cocos creator从零开发简单框架(06)-UI显示

新建framework/scripts/view/UIBase.ts，内容如下。

import ViewBase from "./ViewBase"


export default class UIBase extends ViewBase {
    public uiName: string
}

新建framework/scripts/view/UIMgr.ts，内容如下。

import UIBase from "./UIBase"
import LayerMgr from "./LayerMgr"
import AppUtil from "../AppUtil"
import AppConstants from "../AppConstants"
import ResMgr from "../manager/ResMgr"


export default class UIMgr {
    private static _current: UIBase


    /**
     * 打开 UI
     * @param uiCls UI 类
     * @param uiArgs UI 参数
     * @returns 
     */
    public static open(uiCls: any, ...uiArgs: any[]) {
        const cls = new uiCls() as UIBase
        const viewName = cls.getClassName()

        if (this._current && this._current.uiName == viewName) {
            console.error(`UIMgr.open 已在当前UI:${viewName}`)
            return
        }

        this.show(cls, uiArgs)
    }


    private static async show(cls: UIBase, uiArgs: any[]) {
        const viewName = cls.getClassName()

        const current = cls
        current.uiName = viewName

        const [uiPrefab, err] = await AppUtil.asyncWrap<cc.Prefab>(ResMgr.load(current.bundleName, current.skinPath))
        if (err) {
            console.error(`UIMgr.show loadRes skinPath:${current.skinPath} err:${err}`)
            return
        }

        current.init(uiArgs)
        current.skin = cc.instantiate(uiPrefab)
        current.initDone()

        this.startShowUI(current)
    }

    private static startShowUI(go: UIBase) {
        go.showing()
        // 挂载 Widget 组件, 保持跟 Canvas 一样大小
        AppUtil.setWidget(go.skin)
        // 添加对象到 UI层级
        LayerMgr.setLayer(go.skin, AppConstants.viewLayer.UI)

        go.skin.active = true

        go.showed()

        this.hideLast()
        this.showUIAfter(go)
    }

    private static hideLast() {
        const last = this._current
        if (!last) return

        this._current = null
        last.hiding()

        this.hideUI(last)
    }

    private static hideUI(go: UIBase) {
        go.skin.active = false
        go.hided()

        go.destroy()
    }

    private static showUIAfter(current: UIBase) {
        this._current = current
    }
}

场景创建空节点并重命名为UIMain，大小设置为750x1334即设计分辨率大小，再在节点下新建按钮节点并重命名为BtnUIBag并把文本输入为背包，然后把 UIMain节点拖动到resources目录下并从场景删除。

新建scripts/UIMain.ts，内容如下。

import UIBase from "../framework/scripts/view/UIBase"


export default class UIMain extends UIBase {
    public skinPath: string = 'UIMain'


    protected onButtonClick(button: cc.Node) {
        switch (button.name) {
            case 'BtnUIBag':
                console.error('点击了 BtnUIBag')
                break
        }
    }
}

编辑framework/scripts/App.ts脚本，改动后如下。

// 初始化
public static init() {
    this.initFramework()
}

编辑scripts/Main.ts脚本，改动后如下。

import App from "../framework/scripts/App"
import UIMgr from "../framework/scripts/view/UIMgr"
import UIMain from "./UIMain"

const { ccclass } = cc._decorator


@ccclass
export default class Main extends cc.Component {
    protected onLoad(): void {
        App.init()

        UIMgr.open(UIMain)

        this.scheduleOnce(() => App.showNode(this.node), 1)
    }
}

运行程序，看到UIMain已经显示了，并且把它挂载到了UI层级上，点击背包按钮也输出了日志信息。

本作品采用《CC 协议》，转载必须注明作者和本文链接