【Cocos2d-Js基礎教學（3）各種基類的定義和使用】，cocos2d-js定義

【Cocos2d-Js基礎教學（3）各種基類的定義和使用】，cocos2d-js定義

在遊戲開發過程中我們會遇到很多繼承關係的處理，特別是層級之間的關係處理。

可能有的同學也做過類似的處理，比如：

遊戲的顯示層分級為：

底層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 CodeOK，本章知識點就此結束，希望大家有所收穫！  本節課源碼下載：

（百度雲端硬碟）

源碼使用方法：

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