在游戏开发过程中我们会遇到很多继承关系的处理，特别是层级之间的关系处理。
可能有的同学也做过类似的处理，比如：
游戏的显示层分级为：
底层Scene ，界面层Layer，页面层Page，弹框层Tip等，我们可以统一的把这些叫做界面容器。
那么我们现在在cocos2dx-Js中怎么实现这些关系呢？怎么样展示表达出，我们想要的游戏界面效果？
我们先梳理一下实现方式，如下图所示：
如图所示：
一，我们可以创建出基类BaseLayer，它继承cc.Layer.extend。并且在构造函数ctor中实现
如下功能：
（1），半透明背景层；
（2），点击事件，控制这个层是否可透过点击；
（3），弹出时是否带弹出动画（如提示弹框Tips，或功能页Page所需要的弹出动画）；
（4），拓展方法（如，当前页面加载cocostudio的文件的方法，内存控制管理等）；
二，我们需要制作自定义Layer层，它可以是一个提示框弹窗，也可以是一个功能列表页Page！这个就可以自己去拓展了；
我们在这里通过创建一个init的初始化的方法来实现自己的功能项，而且可以传递你这个功能页面所需要的参数。
功能：
（1），继承BaseLayer ，使基类的功能都可以控制和使用；
（2），通过init初始化方法，传递所需要用到参数，和实现这个自定义Layer所需要实现的功能；
三，最后将自定义Layer，添加到所需要的Scene或者是Layer中，完成我们的基类的创建和实现；
那么我们开始写我们的代码：
基类定义
BaseLayer.js:
/**
* Created by yangshengjiepro on 15/5/5.
*/
var BaseLayer=cc.Layer.extend({
_bgFrame:null,
_oktouch:false,
_showbg:false,
_showbgAcion:false,
ctor:function(){
this._super();
//渲染一个背景层，默认为黑色的半透明的
if(this._showbg==true)
{
//背景
var bgFrame = cc.LayerColor(cc.color(0,0,0,200));
this.addChild(bgFrame,0);
this._bgFrame=bgFrame;
this.setAnchorPoint(cc.p(0.5,0.5));
//设置当前层里面所有节点的描点也和该层相同
this.ignoreAnchorPointForPosition(false);
this.setContentSize(winSize);
this.setPosition(cc.p(winSize.width/2,winSize.height/2));
}
//开启底层不可点击触摸（层以下的UI都不可被点击）
if(this._oktouch==true)
{
//点击时间
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: function(){ return true;
}
}, this);
}
//开启打开窗体是带的特效
if(this._showbgAcion==true)
{
var obj=this;
obj.setScale(0.8);
if(obj!=null){
var sl=cc.EaseIn.create(cc.ScaleTo.create(0.15,1.1),2);
var sl2=cc.ScaleTo.create(0.15,1);
var seq=cc.Sequence(sl,sl2);
obj.runAction(seq);
}
}
}, setBgColor:function(color){
this._bgFrame.setColor(color);
}, onEnter:function(){
this._super();
},
onExit:function(){
this._super(); }
});
自定义日志输出
Mlog.js
/**
* Created by yangshengjiepro on 15/5/5.
*/
/**
* 自定义输出日志
*/
var OPENLOGFLAG = true; var Mlog = function () {
this.flag = 0;
} //正常输出
Mlog.c = function(){
var bakLog = cc._cocosplayerLog || cc.log || log;
if(OPENLOGFLAG==true)
{
bakLog.call(this,"Mlog:" + cc.formatStr.apply(cc, arguments));
}
};
//错误输出
Mlog.e = function(){
var bakLog = cc._cocosplayerLog || cc.log || log;
if(OPENLOGFLAG==true)
{
bakLog.call(this, "Mlog_ERROR:" + cc.formatStr.apply(cc, arguments));
}
};
主界面自定义层
MainLayer.js
/**
* Created by yangshengjiepro on 15/4/20.
*/ var MainLayer = BaseLayer.extend({
ctor:function(){
this._oktouch=true;//开启可透点击
this._showbg=true;//开启背景
this._showbgAcion=false;//主界面不需要弹出效果
this._super();
var mainbg =cc.Sprite(res.MainBG);
mainbg.attr({
x:this.getContentSize().width/2,
y:this.getContentSize().height/2,
scale:1,
ratation:0
});
mainbg.setAnchorPoint(cc.p(0.5,0.5));
this.addChild(mainbg); Mlog.c(" this layer is " + "ok");
}
}); var MainScene = cc.Scene.extend({
onEnter:function(){
this._super();
var layer = new MainLayer();
this.addChild(layer);
}
});
OK，本章知识点就此结束，希望大家有所收获！