cocos creator从零开发简单框架(20)-Panel从场景加载

编辑framework/scripts/view/PanelMgr.ts，修改show方法。

public static async show(panelCls: any, ...panelArgs: any[]) {
    TopBlock.show()

    const cls = new panelCls() as PanelBase
    const viewName = cls.getClassName()

    let current = this._panels.get(viewName)
    if (!current) {
        current = cls
        current.panelName = viewName

        let skinNode: cc.Node
        if (current.bundleName == 'null') {
            const panelPrefab = cc.find(current.skinPath, cc.Canvas.instance.node)
            if (!panelPrefab) {
                TopBlock.hide()
                console.error(`PanelMgr.show cc.find 找不到[${viewName}]面板场景对象:${current.skinPath}`)
                return
            }
            skinNode = cc.instantiate(panelPrefab)
        } else {
            const [panelPrefab, err] = await AppUtil.asyncWrap<cc.Prefab>(ResMgr.load(current.bundleName, current.skinPath))
            if (err) {
                TopBlock.hide()
                console.error(`PanelMgr.show load bundleName:${current.bundleName},skinPath:${current.skinPath},err:${err}`)
                return
            }
            skinNode = cc.instantiate(panelPrefab)
        }

        current.init(panelArgs)
        current.skin = skinNode
        current.initDone()

        LayerMgr.setLayer(current.skin, AppConstants.viewLayer.Panel)
        this.maskStyle(current)

        this._panels.set(viewName, current)
    } else {
        current.reset(panelArgs)

        LayerMgr.setLayer(current.skin, AppConstants.viewLayer.Panel)
    }

    current.skin.active = false
    current.showing()

    this.startShowPanel(current, current.panelShowStyle, true)
}

参考main场景新建game场景，创建一个名为btnPanelRed文本为红面板的按钮，再新建一个名为_panels的节点。

在_panels下参考PanelYellow面板新建一个PanelRed面板并把背景色设置为红色。

编辑完成后隐藏PanelRed面板。

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

import AppConstants from "../framework/scripts/AppConstants"
import PanelBase from "../framework/scripts/view/PanelBase"


export default class PanelRed extends PanelBase {
    public bundleName: string = 'null' //Bundle名称设置成 null 就从场景加载
    public skinPath: string = '_panels/PanelRed' //场景路径

    public panelMaskStyle: number = AppConstants.panelMaskStyle.Close | AppConstants.panelMaskStyle.Black //关闭组件(点击面板区域外会关闭面板)加半透明组件
    public panelShowStyle: number = AppConstants.panelShowStyle.LeftToCenter
}

新建scripts/Game.ts 并把它挂载到Canvas节点上，内容如下。

import App from "../framework/scripts/App"
import PanelMgr from "../framework/scripts/view/PanelMgr"
import PanelRed from "./PanelRed"

const { ccclass } = cc._decorator


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

        const btnPanelRed = this.node.getChildByName('btnPanelRed')
        btnPanelRed.on('click', () => PanelMgr.show(PanelRed))
    }
}

选择game场景运行程序，最开始只有红面板按钮，点击红面板按钮就能打开红色面板了，再点击红面板外的区域也能正常关闭面板。测试完成后再次选择main场景。

这里要说明一下，从场景加载Panel是跟其它方式一样简单的，这里是因为这种加载方式可能不常用，所以就单独新建一个场景来测试。