【Cocos2d-Js基础教学（3）各种基类的定义和使用】

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

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

游戏的显示层分级为：

底层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();

    }
});

View Code

自定义日志输出

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));
    }
};

View Code

主界面自定义层

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);
    }
});

View Code

OK，本章知识点就此结束，希望大家有所收获！

 

  本节课源码下载：

下载地址（百度云盘）

源码使用方法：

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