【Cocos2d-Js基础教学(3)各种基类的定义和使用】
在游戏开发过程中我们会遇到很多继承关系的处理,特别是层级之间的关系处理。
可能有的同学也做过类似的处理,比如:
游戏的显示层分级为:
底层Scene ,界面层Layer,页面层Page,弹框层Tip等,我们可以统一的把这些叫做界面容器。
那么我们现在在cocos2dx-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(); } });
/** * 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); } });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。