如下图所示: 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) {}
}