cocos creator教程：框架 - UI 框架

【muzzik 教程】：框架 - UI 框架

实现功能

• 层级管理

• 生命周期管理

• 视图基类

  • 编辑器配置窗口动画
  • 视图数据自动重置
  • 资源计数半自动管理

• UI 管理器

  • 对象池管理
  • UI 栈
  • UI 独立展示
  • 获取所有/指定 UI
  • 单组件多预制体

每个功能介绍放在一起篇幅太大，以下依次讲解

层级管理

对于同级节点间的层级管理，分为以下几种类型，层级依次递增

• 内容：默认的展示层级类型

• 窗口

• 提示

• 引导

• 警告

• 加载

层级类型之间都需要一定的间隔，用于同类型层级之间的控制

分成固定的几个类型的话我们不需要去在场景里面建空节点来做层级控制，但是要注意必须支持扩展

实现功能

• 编辑器环境层级类型选择

定义类型枚举，通过 cc.CCClass.Attr.setClassAttr 动态修改编辑器属性类型

• 编辑器环境层级设置

不同类型的游戏层级间隔也不同，比如清明上河图起码定个 1000，默认使用 100 就够了

• 可动态修改层级类型及间隔大小

增加静态 init 接口，内部刷新编辑器

• 运行环境可修改层级类型/层级需实时生效

使用 priority 实现，不过 3.6 以上有 Bug，废弃这接口的看得出来是从没做过游戏的引擎开发

生命周期管理

为什么需要生命周期管理？因为我们需要重复利用 UI 节点，所以原本 onLoad，onDestroy 用处就不大了

那么生命周期函数我们该定义什么？看下面

/**
 * - 静态模块：onLoad 时调用
 * - 动态模块：addChild 后调用
 * - 可在此处初始化视图状态
 */
create?(): void | Promise<void>;

/**
 * 初始化
 * - 静态模块：外部自行调用，常用于更新 item 或者静态模块
 * - 动态模块：onLoad 后，open 前调用
 * - 所有依赖 init_data 初始化的逻辑都应在此进行
 */
// @ts-ignore
init(init_?: typeof this.init_data): void | Promise<void>;

/**
 * 打开
 * - init 后执行，在此处执行无需 init_data 支持的模块初始化操作
 */
open?(): void | Promise<void>;

/**
 * 关闭
 * - 由 ui_manage 启动
 */
close?(): void | Promise<void>;

注解

• 动态模块：动态加载的模块

• 静态模块：非动态加载的模块 及 动态加载模块的子模块

调用顺序

节点树：

• 节点1
  • 节点2

open 执行流程：

1. 节点2 -> open
2. 节点1 -> open

close 执行流程：

1. 节点1 -> close
2. 节点2 -> close

因为父模块需依赖子模块数据，所以子 open 在先，父 close 在先

---

// ...

视图基类

编辑器配置窗口动画

视图数据自动重置

资源计数半自动管理