Cocos 3.61 在Spine动画性能上有所提升，Cocos 3.7版本会继续提升，持久化在原生化处理后，性能会得到加强。在Hello World里面模板程序并没有给我们创建一个首页。接下来，我们尝试一下制作一个简单的欢迎页完善这个模板。

1 创建一个新场景

在资源管理器里面，鼠标右键菜单-选择【创建】-选择【场景】。创建一个新场景名为start，点击start场景进行编辑。

选择菜单场景

创建一个新场景

2 创建UI编辑Canvas

切换场景中为2D视觉，对场景进行UI方面的编辑。切换2D视觉后，创建一个Canvas容器，在这里编辑首页欢迎页。Canvas里面添加首页元素，按钮，标题，背景。

2d视觉

canvas 容器

3调整UI编辑Canvas尺寸

默认情况下，Canvas大小并不能修改，这个时候就需要调整比例尺寸。打开菜单的项目，项目设置修改项目中的设计宽度和高度，分别为720x1280 ，为0.56宽高比。

Canvas设计尺寸

调整设计宽度和高度比例

4添加UI组件

在Canvas 下继续添加不同组件，按钮，精灵Sprite。Sprite的属性面板添加一个约束组件Widget，并将其约束上Top，下Bottom，左Left，右Right分别填充0。让整个画面看起来是填充。

添加组件

约束不同的布局

5 调整Sprite填充内容

调整精灵图中Sprite Frame中属性，借助我们官方模板提供的素材。将其拖放到对应Sprite Frame一栏。

调整精灵图的内容

资源素材需要调整对应sprite-frame，点击确认确保类型一致。

sprite-frame 类型图

5 添加2d对象Label标题

Label组件归纳为2D对象，通用在Canvas旗下添加，同理在属性面板修改文本，字体大小和高度。标题可以在2D面板随意移动位置达到我们希望的视觉效果。

调整字体

6 选择不同机型预览效果

调整完成后，我们可以通过预览场景中效果。Cocos为我们选择默认编辑当前场景，同理下拉菜单后依旧可以预览不同的场景。

切换不同场景

预览效果

对应机型中可以预览查看不同的效果如Iphone，安卓机型等可以调整不同视觉。

不同视觉分辨率

7 跳转场景

目前新建了一个场景start，从1个场景转到另外一个场景，这个时候就需要进行互动。按钮Button提供事件触发行为。这个时候，新建一个事件。填写数量为1。在资源管理起来新建脚本为StartPanel。在StartPanel里面添加一个公开的方法。这个时候就要拖放节点到对应位置。例如，我把某一个脚本绑定在Canvas节点，选择带绑定脚本，然后再选择里面有一个方法执行。这个过程就完成了。

选择绑定脚本StartPanel

绑定按钮行为

拖放脚本到Canvas属性下

import { _decorator, Component, Node, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('StartPanel')
export class StartPanel extends Component {
    start() {

    }

    update(deltaTime: number) {
        
    }


    /**
     * startGame
     */
    startGame() {
        director.loadScene("main");
    }
}

加载场景

7 小结

整个UI编辑起来用到组件分别是Button，Sprite，Label，Widget，这几个组件用到非常广泛。注意到选择3d模板和2d模板在编辑体验并不一样这一点需要注意。如果需要实验以上内容，需要安装其软件实现效果。

Cocos 安装软件：https://www.cocos.com/