Cocos2d-JS中使用CocosStudio资源——关卡选择界面

概述在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的关卡选择界面资源的例子，来简要介绍以下内容：Button控件，Text控件，PageView控件,即翻页容器的使用。 一、CocosStudio准备 第一步：从官网下载相应的示例，LevelSelection。效果图如下： 第二步：修改其中的一些控件的名称，方便寻找获取，如： 由于官网给的例子中的控件名字有的较复

在本篇博客中，我们将通过一个在Cocos2d-Js中使用从Cocosstudio导出的关卡选择界面资源的例子，来简要介绍以下内容：button控件，Text控件，PageVIEw控件,即翻页容器的使用。

一、Cocosstudio准备

第一步：从官网下载相应的示例，LevelSelection。效果图如下：

第二步：修改其中的一些控件的名称，方便寻找获取，如：

由于官网给的例子中的控件名字有的较复杂，所以可以按照自己的想法进行修改。

第三步：发布资源。注意发布设置中应该将数据格式改为JsON格式，发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可，当然，也可以另选其他文件夹。具体发布设置如下图：

二、Cocos Code IDE *** 作

第一步：创建Cocos2d-Js项目，并将Cocos Studio发布的资源res，拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。

PS:创建项目的时候，分辨率默认640 x 960就可以了，方向选择竖向。

第二步：修改project.Json文件，在modules中添加cocostudio。在JsList中添加LevelSelectionScene.Js和resource.Js。具体代码如下：

{  "project_type": "JavaScript","deBUGMode": 1,"showFPS": true,"frameRate": 60,"ID": "gameCanvas","renderMode": 0,"engineDir": "frameworks/cocos2d-HTML5","modules": [ "cocos2d","cocostudio" ],"JsList": [ "src/resource.Js","src/LevelSelectionScene.Js" ] }

第三步：在resource.Js文件中指定所需的各种资源，以备后期加载使用。具体代码如下：

var res = {        level_selection_Json:"res/LevelSelection.Json"};var g_resources = [];for (var i in res) {    g_resources.push(res[i]);}

第四步：非常非常重要的一步，你需要修改main.Js文件，将其中的：cc.vIEw.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL);改为cc.vIEw.setDesignResolutionSize(640,960,cc.ResolutionPolicy.SHOW_ALL);。

虽然，我们选择的方向是竖向，但是不知道为什么，当创建项目的时候宽高还是为960,640。而，竖向的时候宽高应该为640,960。所以，要进行相应的修改才能正常运行。如果你想看不该的效果，可以尝试一下，会有惊喜哦。

main.Js的具体代码如下：

cc.game.onStart = function(){    cc.vIEw.adjustVIEwPort(true);    cc.vIEw.setDesignResolutionSize(640,960,cc.ResolutionPolicy.SHOW_ALL);    cc.vIEw.resizeWithbrowserSize(true);    //load resources    cc.LoaderScene.preload(g_resources,function () {        cc.director.runScene(new LevelSelectionScene());    },this);};cc.game.run();

三、使用Cocosstudio资源

走到这里，终于到我们的重头戏（LevelSelectionScene.Js）了，下面，我们将要来学习如何获取Cocosstudio中导出的资源等。

第一步：加载LevelSelection界面的JsON资源分析，并获取levelSelectionScene对象。将levelSelectionScene对象加入到layer中。具体代码如下：

//加载levelSelection界面的JsON资源分析，并获取levelSelectionScene对象。        levelSelectionScene = ccs.load(res.level_selection_Json).node;        //将levelSelectionScene对象加入到layer中。        this.addChild(levelSelectionScene);

第二步：从loginScene中查找相应的控件对象，包括button控件，Text控件，PageVIEw控件等，查找方法相似。具体代码如下：

//startbutton控件        startbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_Enter");        //leftbutton控件，负责向左切换关卡。        leftbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_left");        //rightbutton控件，负责向右切换关卡。        rightbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_Right");        //pageVIEw控件，用于展示当前所选关卡        pageVIEw = ccui.helper.seekWidgetByname(levelSelectionScene,"PageVIEw_SelectPage");        //numberText控件，用于展示当前关卡用户获得的成绩。        numberText = ccui.helper.seekWidgetByname(levelSelectionScene,"LabelAtlas_CurrentScene");

第三步：添加事件监听和初始化处理，方法类似，具体代码如下：

//leftbutton控件，负责向左切换关卡。        //设置按钮取消对点击事件的响应，但是按钮依旧处于正常状态。        leftbutton.settouchEnabled(false);        //设置按钮为禁用状态。        leftbutton.setBright(false);        leftbutton.addtouchEventListener(this.leftRightbuttontouchEvent);        //rightbutton控件，负责向右切换关卡。        rightbutton.addtouchEventListener(this.leftRightbuttontouchEvent);        //pageVIEw控件，用于展示当前所选关卡        pageVIEw.addCCSEventListener(this.pageVIEwStateChanged);

第四步：定义相应监听事件的具体处理信息，具体代码如下：

pageVIEw控件触发的事件处理

//pageVIEw控件触发事件的处理函数    pageVIEwStateChanged:function(sender,type){        switch (type) {        //pageVIEw当前所在的page的index发生了变化。        case ccui.PageVIEw.EVENT_TURNING:            cc.log("PageVIEw Event Turning");            cc.log(pageVIEw.getCurPageIndex());            break;        default:            break;        }    },

向左向右button控件触发的事件处理，精华之所在。

//leftbutton和rightbutton按钮点击事件的处理函数。    leftRightbuttontouchEvent:function(sender,type){        //根据触发事件的类型进行分情况处理，从控制台输出cc.log();        switch (type) {        case ccui.Widget.touch_BEGAN:            cc.log("loginbutton touch Began");            break;        case ccui.Widget.touch_MOVED:            cc.log("loginbutton touch Moved");            break;        case ccui.Widget.touch_ENDED:            cc.log("loginbutton touch Ended");            //只有在有效点击的情况下，才进行pageVIEw切换。            //获取当前pageVIEw所展示的page的index。            var index = pageVIEw.getCurPageIndex();            //如果点击 *** 作来自于“向右”按钮。            if(sender.getname() == "button_Right"){                index = index + 1;                //如果即将跳转到右边的最后一页。                if(index == 2 ){                    //禁用rightbutton，并取消touch事件的触发。                    rightbutton.setBright(false);                    rightbutton.settouchEnabled(false);                }                //如果跳转的目标页为第1页，即当前页为第0页。                //那么取消leftbutton的禁用状态，激活touch事件的触发。                if(index == 1){                    //解除禁用状态，激活touch事件的触发。                    leftbutton.settouchEnabled(true);                    leftbutton.setBright(true);                }                //跳转到目标页。                pageVIEw.scrolltopage(index);            }else{                //如果点击 *** 作来自于“向左”按钮。                index = index - 1;                if(index == 0){                    leftbutton.settouchEnabled(false);                    leftbutton.setBright(false);                }                if(index == 1){                    rightbutton.settouchEnabled(true);                    rightbutton.setBright(true);                }                pageVIEw.scrolltopage(index);            }            //提示用户所选关卡中，用户获得的成绩“星星个数”，满分是3个星星。            var number = index + 1;            numberText.setString(number + "/3");            break;        case ccui.Widget.touch_CANCELED:            cc.log("loginbutton touch Canceled");            break;        default:            break;        }    },

代码简介：

上面的代码都有比较详细的注释，我想应该都能看懂，在这里强调几点：

初始化时：注意，我们要做的是一个关卡选择界面，初始情况下默认展示第一个关卡，那么此时常理来说是不能向左翻看关卡的。所以，向左的按钮应该处于禁用状态，当然了同时可以取消向左按钮对touch事件的响应。这样的话，用户体验会好很多。

如若不然，你想象一下，你看到一个亮亮的按钮在诱惑你，你以为里面藏着美妙的东西，然后，你拼命地点击就是没有效果，你会多么地愤怒！

左右切换pageVIEw时：由于你初始化时禁用了leftbutton，那么在用户向右切换一页的时候，千万别忘了激活leftbutton。要不然，一去不回头了。当然了，如果已经到了向右的极限，那么你此时要注意设置rightbutton为禁用状态，这样才完美嘛。

有效触碰再响应：非常重要。记得在以前的教程中，我们说过，button一共有四个事件，其中有一个touch_ENDED事件，这个事件表示用户的有效点击。所以，一定不要在touch_BEGAN事件中对按钮的主要功能进行处理。

你假想一下，假如你玩游戏正嗨！！！BOSS剩下一滴血，然后你不小心刮碰到退出按钮，但并没有有效点击它，但是你退出了！！！退出了！！！！

你想你有多愤怒，用户会比你更愤怒！！

四、运行效果

到这里，对于levelSelection界面的分析和使用就介绍完毕了。你可以运行一下。我的部分运行效果如下：

五、补充说明

为了方便大家学习研究，下面提供本教程项目文件的百度网盘下载链接：
链接：http://pan.baidu.com/s/1mgvHEiO 密码：03fp

LevelSelectionScene.Js的完整源码如下：

var LevelSelectionLayer = cc.Layer.extend({    levelSelectionScene:null,startbutton:null,leftbutton:null,rightbutton:null,pageVIEw:null,numberText:null,ctor:function(){        this._super();        //加载levelSelection界面的JsON资源分析，并获取levelSelectionScene对象。        levelSelectionScene = ccs.load(res.level_selection_Json).node;        //将levelSelectionScene对象加入到layer中。        this.addChild(levelSelectionScene);        //从levelSelectionScene中获取控件并注册监听事件。        this.dealWidgets();        return true;    },//从loginScene中获取控件并注册监听事件。    dealWidgets:function(){        //startbutton控件        startbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_Enter");        //leftbutton控件，负责向左切换关卡。        leftbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_left");        //设置按钮取消对点击事件的响应，但是按钮依旧处于正常状态。        leftbutton.settouchEnabled(false);        //设置按钮为禁用状态。        leftbutton.setBright(false);        leftbutton.addtouchEventListener(this.leftRightbuttontouchEvent);        //rightbutton控件，负责向右切换关卡。        rightbutton = ccui.helper.seekWidgetByname(levelSelectionScene,"button_Right");        rightbutton.addtouchEventListener(this.leftRightbuttontouchEvent);        //pageVIEw控件，用于展示当前所选关卡        pageVIEw = ccui.helper.seekWidgetByname(levelSelectionScene,"PageVIEw_SelectPage");        pageVIEw.addCCSEventListener(this.pageVIEwStateChanged);        //numberText控件，用于展示当前关卡用户获得的成绩。        numberText = ccui.helper.seekWidgetByname(levelSelectionScene,"LabelAtlas_CurrentScene");    },//pageVIEw控件触发事件的处理函数    pageVIEwStateChanged:function(sender,//leftbutton和rightbutton按钮点击事件的处理函数。    leftRightbuttontouchEvent:function(sender,type){        //根据触发事件的类型进行分情况处理，从控制台输出cc.log();        switch (type) {        case ccui.Widget.touch_BEGAN:            cc.log("loginbutton touch Began");            break;        case ccui.Widget.touch_MOVED:            cc.log("loginbutton touch Moved");            break;        case ccui.Widget.touch_ENDED:            cc.log("loginbutton touch Ended");            //只有在有效点击的情况下，才进行pageVIEw切换。            //获取当前pageVIEw所展示的page的index。            var index = pageVIEw.getCurPageIndex();            //如果点击 *** 作来自于“向右”按钮。            if(sender.getname() == "button_Right"){                index = index + 1;                //如果即将跳转到右边的最后一页。                if(index == 2 ){                    //禁用rightbutton，并取消touch事件的触发。                    rightbutton.setBright(false);                    rightbutton.settouchEnabled(false);                }                //如果跳转的目标页为第1页，即当前页为第0页。                //那么取消leftbutton的禁用状态，激活touch事件的触发。                if(index == 1){                    //解除禁用状态，激活touch事件的触发。                    leftbutton.settouchEnabled(true);                    leftbutton.setBright(true);                }                //跳转到目标页。                pageVIEw.scrolltopage(index);            }else{                //如果点击 *** 作来自于“向左”按钮。                index = index - 1;                if(index == 0){                    leftbutton.settouchEnabled(false);                    leftbutton.setBright(false);                }                if(index == 1){                    rightbutton.settouchEnabled(true);                    rightbutton.setBright(true);                }                pageVIEw.scrolltopage(index);            }            //提示用户所选关卡中，用户获得的成绩“星星个数”，满分是3个星星。            var number = index + 1;            numberText.setString(number + "/3");            break;        case ccui.Widget.touch_CANCELED:            cc.log("loginbutton touch Canceled");            break;        default:            break;        }    },});var LevelSelectionScene = cc.Scene.extend({    onEnter:function () {        this._super();        var layer = new LevelSelectionLayer();        this.addChild(layer);    }});

总结

以上是内存溢出为你收集整理的Cocos2d-JS中使用CocosStudio资源——关卡选择界面全部内容，希望文章能够帮你解决Cocos2d-JS中使用CocosStudio资源——关卡选择界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。