Cocos学习之UI系统基础

---

前言

在游戏和互动应用开发中，用户界面（UI）系统是连接用户与程序逻辑的重要桥梁。Cocos Creator 提供了一套高效易用的 UI 解决方案，涵盖从基础元素布局到复杂交互逻辑的全流程支持。本文将通过理论解析和实战案例，系统讲解 Canvas 画布适配原理、Widget 对齐机制、五大基础组件（Label/Button/Sprite/EditBox/Layout）的核心特性，并配合三个典型应用场景的完整实现过程，帮助开发者快速掌握界面开发的关键技能。无论您是刚接触 UI 开发的新手，还是需要优化现有界面系统的工程师，都能通过本文获得可直接落地的实践方案。

UI系统基础

1. Canvas（画布）
   • 所有UI元素的根容器，自动适配不同分辨率（通过 Canvas 组件的 Fit Height/Fit Width 属性配置）
2. Widget（对齐挂件）
   • 控制UI元素相对父节点的对齐方式（如居中、贴边）
3. 基础UI组件
   • Label：文本显示
   • Button：可点击按钮
   • Sprite：图片显示
   • EditBox：输入框
   • Layout：自动布局组件（横向/纵向/网格排列）

UI系统案例

案例1：创建可交互按钮

目标：点击按钮改变背景颜色，并显示点击次数。
步骤：

1. 搭建UI结构

   • 在层级管理器右键 → 创建 → UI → 选择 Button，命名为 ColorButton
   • 在按钮节点下自动生成的 Label 节点中修改文本为“点击变色”

2. 编写按钮逻辑
   创建脚本 ButtonController.ts：

   import { _decorator, Component, Button, Node, Color, Label } from 'cc';
   const { ccclass, property } = _decorator;
   
   @ccclass('ButtonController')
   export class ButtonController extends Component {
       @property({ type: Node })
       background: Node | null = null; // 关联背景节点
   
       @property({ type: Label })
       counterLabel: Label | null = null; // 关联计数Label
   
       private clickCount: number = 0;
   
       start() {
           // 监听按钮点击事件
           this.node.getComponent(Button)?.node.on(Button.EventType.CLICK, this.onClick, this);
       }
   
       onClick() {
           if (!this.background || !this.counterLabel) return;
           
           // 随机生成颜色
           const randomColor = new Color(
               Math.floor(Math.random() * 255),
               Math.floor(Math.random() * 255),
               Math.floor(Math.random() * 255
           ));
           
           // 修改背景颜色（通过Sprite组件）
           const sprite = this.background.getComponent('cc.Sprite');
           if (sprite) sprite.color = randomColor;
   
           // 更新点击计数
           this.clickCount++;
           this.counterLabel.string = `点击次数: ${this.clickCount}`;
       }
   }
   

3. 关联节点

   • 在场景中创建一个Sprite节点作为背景
   • 将背景节点拖拽到脚本的 background 属性
   • 创建一个独立Label节点显示计数，并关联到 counterLabel

4. 运行测试

   • 点击按钮观察背景色变化和计数器递增

案例2：使用Layout实现自动排列

目标：创建一个横向排列的技能图标栏。

操作流程：

1. 创建空节点 → 添加 Layout 组件 → 设置：
   • Type: HORIZONTAL
   • Resize Mode: CONTAINER (容器自适应)
   • Spacing X: 10 (图标间距)
2. 在Layout节点下创建多个子节点（技能图标）
3. 运行时会自动排列，新增/删除图标会自动调整位置

案例3：EditBox输入交互

代码片段：实时显示输入框内容

import { _decorator, Component, EditBox, Label } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('InputHandler')
export class InputHandler extends Component {
    @property({ type: Label })
    displayLabel: Label | null = null;

    start() {
        const editBox = this.node.getComponent(EditBox);
        if (editBox) {
            editBox.on(EditBox.EventType.TEXT_CHANGED, (editbox: EditBox) => {
                if (this.displayLabel) {
                    this.displayLabel.string = `输入内容: ${editbox.string}`;
                }
            });
        }
    }
}

---

常见问题预解答：

1. 按钮无反应：检查按钮的 Interactable 属性是否开启，是否有其他UI遮挡
2. 文字显示不全：调整Label的 Overflow 属性为 RESIZE_HEIGHT
3. 布局错乱：确保父节点有 Layout 组件，子节点未手动修改位置

总结

通过本文的学习，我们掌握了 Cocos Creator UI 系统的三大核心要素：
画布自适应：通过 Canvas 组件的多分辨率适配策略，配合 Widget 对齐挂件，实现了不同设备屏幕的完美适配
组件化开发：Label、Button 等基础组件的灵活运用，结合事件监听机制，可快速构建文本显示、按钮交互等基础功能
高效布局体系：Layout 组件的横向/纵向/网格布局能力，配合自动容器调整特性，大幅提升了界面元素的排列效率

三个典型案例演示了从简单交互到复杂布局的完整开发流程：

• 按钮变色计数器实现了组件通信与状态管理
• 自动布局技能栏展现了动态排列的最佳实践
• 输入框实时反馈揭示了事件驱动的开发模式

建议开发者在实践中注意：

• 善用 Widget 对齐属性构建响应式界面
• 通过 Layout 的 Spacing 和 Padding 参数精细控制元素间距
• 使用 EditBox 的输入校验功能提升用户体验

这些技能的组合运用，将帮助开发者打造出既美观又高效的现代化游戏界面。