【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();

    }
});

自定義日志輸出

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，本章知識點就此結束，希望大家有所收獲！

 

  本節課源碼下載：

下載地址（百度雲盤）

源碼使用方法：

自己創建新工程，解壓下載的文件，將所有文件拷貝到你新工程的目錄下全部覆蓋既可以運行！