CocosCreator UI管理

如下图所示: Canvas下有空物体 UIRoot,eUI, mUI, eUI用来显示常驻UI,mUI用来显示弹框UI.  Canvas绑定rukou.ts

 

BasePanel.ts

const {ccclass, property} = cc._decorator;

@ccclass
export default abstract  class BasePanel extends cc.Component {

    @property(cc.Node)
    mask:cc.Node = null;
    @property(cc.Boolean)
    modal:boolean = false;

    protected hideFun = null;

    abstract init():any;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    enter(showCb = null, hideCb = null)
    {
        this.node.active = true;
        if(showCb != null){
            showCb();
        }
        this.hideFun = hideCb;
    }

    exit()
    {
        if(this.hideFun != null){
            this.hideFun();
            this.hideFun = null;
        }
        this.node.active = false;
    }

    isModal()
    {
        return this.modal;
    }

    onClose(event:TouchEvent, customEventData:any)
    {
        this.exit();
    }

    useEffect()
    {
        this.node.setScale(0.5,0.5);
        let scaleOut = cc.scaleTo(0.2,1.1,1.1).easing(cc.easeCubicActionInOut());
        let scaleIn1 = cc.scaleTo(0.1,0.9,0.9).easing(cc.easeCubicActionIn());
        let scaleIn2 = cc.scaleTo(0.1,1.0,1.0).easing(cc.easeCubicActionIn());
        this.node.runAction(cc.sequence(scaleOut, scaleIn1, scaleIn2));
    }
}

Singleton.ts

const {ccclass, property} = cc._decorator;

@ccclass
export default class Singleton{
    
    protected static instance:Singleton;

    protected static GetInstance():Singleton
    {
        if(!this.instance)
        {
            this.instance = new Singleton();
        }
        return this.instance;
    }
}

UIMgr.ts

import Singleton from "./Singleton";
import BasePanel from "./BasePanel";

const {ccclass, property} = cc._decorator;

@ccclass
export default class UIMgr extends Singleton {

    UIRoot:cc.Node = null;
    eUIRoot:cc.Node = null;
    mUIRoot:cc.Node = null;

    private curPanel:BasePanel = null;

    allEUIs:{[key:string]:any} = {};
    allMUIs:{[key:string]:any} = {};

    protected static instance:UIMgr;
    public static GetInstance():UIMgr
    {
        if(!this.instance)
        {
            this.instance = new UIMgr;
        }
        return this.instance;
    }

    init()
    {
        this.UIRoot= cc.find("Canvas").getChildByName("UIRoot");
        this.eUIRoot = this.UIRoot.getChildByName("eUI");
        this.mUIRoot = this.UIRoot.getChildByName("mUI");
    }

    public showUI(uiName:string, params = null)
    {
        let self= this;
        let uiNode = self.eUIRoot.getChildByName(uiName);
        if(uiNode == null)
        {
            cc.loader.loadRes("Prefab/ui/" + uiName, cc.Prefab, function(err, prefab){
                uiNode = cc.instantiate(prefab);
                uiNode.position = cc.Vec2.ZERO;
                self.eUIRoot.addChild(uiNode);
                let nextPanel = uiNode.getComponent(BasePanel);
                if(nextPanel != null)
                {
                    self.curPanel = nextPanel;
                    self.curPanel.enter(params);        
                }
            });
        }
        else
        {
            let nextPanel = uiNode.getComponent(BasePanel);
            self.curPanel = nextPanel;
            self.curPanel.enter(params);
        }
        return uiNode;
    }


    public showDialog(uiName, params)
    {
        let self = this;
        let uiNode = self.eUIRoot.getChildByName(uiName);
        if(uiNode == null)
        {
            cc.loader.loadRes("Prefab/ui/" + uiName, cc.Prefab, function(err, prefab){
                uiNode = cc.instantiate(prefab);
                uiNode.position = cc.Vec2.ZERO;
                self.mUIRoot.addChild(uiNode);
                let nextPanel = uiNode.getComponent(BasePanel);
                if(nextPanel != null)
                {
                    if(nextPanel.node.name == "xx")
                    {
                        nextPanel.node.zIndex = 2;
                    }
                    else{
                        nextPanel.node.zIndex = 1;
                    }
                    self.curPanel = nextPanel;
                    self.curPanel.enter(params);
                }  
            });
        }
        else
        {
            let nextPanel = uiNode.getComponent(BasePanel);
            self.curPanel = nextPanel;
            self.curPanel.enter(params);
        }
    }

    public getUI(uiName:string)
    {
        let self = this;
        let uiNode = self.eUIRoot.getChildByName(uiName);
        if(uiNode == null)
        {
            uiNode = self.mUIRoot.getChildByName(uiName);
            if(uiNode == null)
            {
                return null;
            }
        }
        return uiNode;
    }
}

 

简单调用:

ruou.ts

UIMgr.GetInstance().init();

UIMgr.GetInstance().showUI("HallPanel"); //HallPanel为预制体,绑定HallPanel.ts 继承BasePanel

HallPanel.ts

import BasePanel from "./BasePanel";

const {ccclass, property} = cc._decorator;

@ccclass
export default class HallPanel extends BasePanel {

    

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    init(){}

    start () {

    }

    enter()
    {
        super.enter();
        console.log("打开HallPanel~");
    }

    // update (dt) {}
}