3.7的社区版已经在社区里面进行火热测试中，bug依旧多不适合用于生产中。新增光照探针功能，LOD等技术。

Cocos 内置了多个UI的组件，这些组件通过复合组合成日用的组件。例如Button，EditBox，ScrollView ，Slider，Widget，ProgressBar 等等。但在这里你会发现Label 并不归纳UI组件范畴，这一点会比较奇怪。它归属2D对象。同时需要注意在3d模板和2d模板显示并不一样。建立2d模板，它的使用习惯更加倾向2.4的经典版本。3.6后把习惯迁移过渡而来。

提示：Cocos 编辑UI可以使用内置编辑器的方法，也可以通过FairyGUI的方式来创建完成

UI组件

1 创建UI和编辑UI

要使用里面组件，通过鼠标右键选择菜单去创建，这里层级编辑会基于节点编辑。需要把UI放在Canvas下进行拼界面。

层级管理器

每当编辑好的新组件，需要在属性检查器里面进行修改属性，在场景里面拖放摆设使用对应的UI进行编辑。如颜色，对齐方式，字体大小，加粗设置。

Label编辑

编辑改变Label的属性

2 使用按钮Button

button 使用频繁最高的组件之一，承接了很多交互的任务。默认Cocos的提供按钮样式都很丑陋。需要替换按钮的四个状态normal,pressed,hover,disabled。在替换资源过程，按钮可以考虑复用原则，做一个常用的按钮皮肤进行全局使用。在一些没有需要多图的情况下，可以采取2张图片则可以满足。对于只使用一张图片也可以满足当下使用。不需要每一个按钮都实现不同贴图。这一切都需要实际设计为内容决定按钮所需要资源数。在大多数活动中，按钮使用则是需要更多变化形态满足不同的交互。

按钮属性

3 使用代码监听节点事件

按钮交互可以通过Click Events属性面板进行绑定，里面填写数字则代表有多个事件绑定。如果不采取这种办法，改成代码监听方式来完成交互在多人协同过程也是非常有效，减少冲突。按钮需要触发，先获取节点node，再通过监听触控Touch事件实现点击。

第一步：首选对节点改名，如startBtn。接下来就要看挂载脚本在什么位置。新建一个脚本StartPanel挂载到Canvas，形成父子关系。

对按钮改名

挂载脚本到Canvas其下

代码如下，先通过自身子节点获取子节点，使用getChildByName的方法获取，再监听TOUCH_START事件实现点击事件。

import { _decorator, Component, Node, director, Input } from 'cc';const { ccclass, property } = _decorator;@ccclass('StartPanel')export class StartPanel extends Component {    start() {        this.node.getChildByName("startBtn").on(Input.EventType.TOUCH_START,this.startGame,this);    }    update(deltaTime: number) {            }    /**     * startGame     */    startGame() {        director.loadScene("main");//跳转场景    }}

4 使用代码交互改变Label内容

在上面通过按钮跳转，通过按钮改变Label内容同样是可以实现。同理我们要先找到Label所在的节点。

获取需要改变的节点

import { _decorator, Component, Node, director, Input, Label } from 'cc';const { ccclass, property } = _decorator; @ccclass('StartPanel')export class StartPanel extends Component {    private label:Label;    start() {        this.node.getChildByName("startBtn").on(Input.EventType.TOUCH_START,this.startGame,this);        this.label = this.node.getChildByName("Label-001").getComponent("cc.Label") as Label;    }    update(deltaTime: number) {            }    /**     * startGame     */    startGame() {               this.label.string = "孤勇者,上神之路, 天神之战";        // director.loadScene("main");    }}

通过交互改变Label值

注意：this.label.string = "孤勇者,上神之路, 天神之战"; 从API查询label 设置字符串需要以string属性方式处理。这一点和日常做安卓，做Unity的对文本命名属性有所区别。

显示标签文本内容

通过属性面板去查看这个关键词可以看到Label值是string字段

按钮交互方式，通过点击事件去改变文本值。这个方式在cocos编码通过上述方式改变文本内容。

4 玩家协议提醒

在日常游戏中，进入之前会展示一段文字告知玩家里面内容。在Cocos里面，使用类似Toggle组件来实现。这个组件如同小程序checkBox组件。用法就是要拿到对应值进行判定是否勾选。

默认情况下是不勾选状况

显示勾选还是不勾选

import { _decorator, Component, Node, director, Input, Label, Toggle } from 'cc';const { ccclass, property } = _decorator; @ccclass('StartPanel')export class StartPanel extends Component {    private label:Label;    private toggle:Toggle;    start() {        this.node.getChildByName("startBtn").on(Input.EventType.TOUCH_START,this.startGame,this);        this.label = this.node.getChildByName("Label-001").getComponent("cc.Label") as Label;        this.toggle = this.node.getChildByName("Toggle").getComponent("cc.Toggle") as Toggle;        this.toggle.isChecked = false; // 设置不勾选    }    update(deltaTime: number) {            }    /**     * startGame     */    startGame() {        //判定是否勾选，不勾选则提示玩家勾选        if(this.toggle.isChecked){            this.label.string = "孤勇者,上神之路, 天神之战";        }else{            console.log("请勾选用户协议和用户隐私");        }          // director.loadScene("main");    }}

当玩家要看协议的时候，点击文本弹窗展示一段协议。协议内容会很长，并不能一个一下子呈现出来。这个时候需要借助滚动组件ScrollView+Label来查看。利用滚动效果让滚动里面组件产生滚动的效果。整个过程需要分为三步。第一步，创建ScrollView组件。第二步，将滚动的content添加Label组件，并将一段很长文本复制到面板展示。第三步，选择RESIZE_HEIGHT方式让文本高度处理。

创建滚动组件ScrollView

添加ScrollView需要滚动调整文本内容高度，让其自适应高度。这样滚动就能滚动公告出来。

调整OverFlow类型为RESIZE_HEIGHT

滚动文本展示

6 协议展示弹窗显示和隐藏

在cocos 隐藏和显示一个节点node，使用active的属性来显示和隐藏节点显示和隐藏。

如下代码

this.node.active = true；//显示

this.node.active = false；//隐藏

import { _decorator, Component, Node, director, Input, Label, Toggle, ScrollView } from 'cc';const { ccclass, property } = _decorator; @ccclass('StartPanel')export class StartPanel extends Component {    private label:Label;    private toggle:Toggle;    private scrollView:Node;    start() {        this.node.getChildByName("startBtn").on(Input.EventType.TOUCH_START,this.startGame,this);        this.label = this.node.getChildByName("Label-001").getComponent("cc.Label") as Label;        this.toggle = this.node.getChildByName("Toggle").getComponent("cc.Toggle") as Toggle;        this.toggle.isChecked = false; // 设置不勾选        this.scrollView =  this.node.getChildByName("ScrollView"); //获取滚动文本节点    }    update(deltaTime: number) {            }    /**     * startGame     */    startGame() {               if(this.toggle.isChecked){            this.label.string = "孤勇者,上神之路, 天神之战";            this.scrollView.active = false; //隐藏        }else{            console.log("请勾选用户协议和用户隐私");            this.scrollView.active = true; //显示        }          // director.loadScene("main");    }}

7 日志如何看？

在上面代码中，使用一个日志输出，只是这个日志并没有如我们所愿看到出现屏幕。这个日志需要在谷歌浏览下展示出来。如通过开发者工具菜单查看谷歌打印日志查看呈现日志上输出。

日志输出

8 美化按钮

由于内置按钮并不好，这个时候引入一张按钮图片进行处理。按钮由于长度和高度不一样，采取对SpriteFrame 进行九宫图处理。这样按钮就可以在拉伸过程不变形。

添加一张图片

处理九宫图效果

把按钮皮肤拖到相应组件去

按钮美化

9 预制体

当我们希望这个按钮在不同场景进行复用，制作预制体就是不错选择。制作预制体方法很简单，只要把节点拖到对应资源管理器即可生成对应素材。注意是删除场景会把所有节点清除。而预制体可以保留下来继续使用。删除场景也是一个比较危险的操作。预制体处理内部会影响在场景所有预制体，同时可以通过解绑方式解除影响。这一点将是内置预制体一种玩法。

预制体创建

10小结

综述上述，在调度按钮，Label，滚动条这些常规的组件后，从开始游戏切换场景，到使用弹窗方式展示滚动文本。这个过程就是日常UI组件之间的混合操作。不过，由于皮肤限制，内置引擎的组件皮肤都偏向很弱。很难通过现成UI来展示出整个美术效果。这些都是需要引入美术做出更多美术效果。