游戏开发之UI管理器(跨引擎)

最新推荐文章于 2026-04-28 23:53:49 发布

原创

最新推荐文章于 2026-04-28 23:53:49 发布 · 1.2k 阅读

使用UI管理器的目的

使用单场景与zindex结合的方式管理UI。
能够隐藏底层UI达到优化效果。
很好的组织和管理UI。
跨引擎使用。

管理器分类

根据以往经验我开发了三种类型的管理器，队列管理器，栈式管理器，单UI管理器。

单UI管理器：SingleManager负责管理如登录，loading，大厅，游戏这样的一级UI，同一时刻只有一个UI实例存在。UI之间是替换关系。
栈式管理器：StackManager用于管理先进后出的UI，弹出功能UI使用。
队列管理器：QueueManager用于管理先进先出的UI，用于第一次进入大厅弹出各种活动UI时候使用，关闭一个弹出另一个。
类图

将UI分为五层

第一层：使用单UI管理器用于管理，大厅，游戏等一级界面。
第二层：使用栈式管理器管理二级界面
第三层：使用队列管理器用于管理进入游戏时弹出的各种活动面板。
第四层：使用栈式管理器用于管理toast，tip等提示框。
第五层：为最上层，使用栈式管理器，用于管理教学，对话界面和网络屏蔽层等。

特别说明：比如将一个战斗UI分为战斗层和按钮层，这个不属于管理器范畴。

结构图

代码

为了跨引擎使用，需要将各个引擎的组件抽象。

export default interface LayerInterface {

 exit(): void;
 /**
  * 设置组件是否可见
  * @param f 
  */
 setVisible(f: boolean): void;
 /**
  * 设置组件节点的zroder
  * @param order 
  */
 setOrder(order: number): void;
 /**
  * 
  * @param t 管理器层级
  */
 setUIIndex(t: number): void;

 getUIIndex(): number;
 /**
  * 获得组件的node
  */
 getNode(): any;
 isLoad(): boolean;

}

2. 管理器的父类

import LayerInterface from "./LayerInterface"; export default abstract class LayerManager {

//根节点
protected root: any;

protected list: LayerInterface[]

//管理器中的内容是否可以被删除
protected popFlag: boolean = false;

protected zOrder: number = 1;

constructor(zOrder: number = 1, canPop: boolean = true) {
    this.list = []
    this.zOrder = zOrder;
    this.popFlag = canPop;
}
init(node: any) {
    this.root = node;
}
setZOrder(order: number) {
    this.zOrder = order;
}
getZOrder(): number {
    return this.zOrder;
}
canPop() {
    return this.popFlag;
}
//ui数量
count() {
    return this.list.length;
}
setVisible(flag: boolean) {
    for (let index = 0; index < this.list.length; index++) {
        const element = this