在游戏开发过程中我们会遇到很多继承关系的处理，特别是层级之间的关系处理。

可能有的同学也做过类似的处理，比如：

游戏的显示层分级为：

底层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，本章知识点就此结束，希望大家有所收获！

 

 

本节课源码下载：

源码使用方法：

自己创建新工程，解压下载的文件，将所有文件拷贝到你新工程的目录下全部覆盖既可以运行！