【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,本章知识点就此结束,希望大家有所收获!
 
 本节课源码下载:

下载地址(百度云盘)

源码使用方法:

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。