Cocos2d-JS中使用CocosStudio资源——设置界面

概述在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的设置界面资源的例子，来简要介绍以下内容：Slider控件的使用。 一、CocosStudio准备 第一步：从官网下载相应的示例，setting。效果图如下： 第二步：修改其中的一些控件的名称，方便寻找获取，如： 将Music那个滑动条的控件名字改为musicSlider，从而方便查找。 类似的修改还可以有：Con

在本篇博客中，我们将通过一个在Cocos2d-Js中使用从Cocosstudio导出的设置界面资源的例子，来简要介绍以下内容：SlIDer控件的使用。

一、Cocosstudio准备

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

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

将Music那个滑动条的控件名字改为musicslIDer，从而方便查找。
类似的修改还可以有：Continue按钮，Sound滑动条等。

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

二、Cocos Code IDE *** 作

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

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

第二步：修改project.Json文件，在modules中添加cocostudio。在JsList中添加SettingScene.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/SettingScene.Js" ] }

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

var res = {//      png13:"res/Setting/DnE10.png",//      png15:"res/Setting/Star026.png",//      png16:"res/Setting/Star026_2.png",//      png14:"res/Setting/DnE15.png",//      png7:"res/Setting/BaS07.png",//      png8:"res/Setting/BaS08.png",//      png9:"res/Setting/BaS09.png",//      png10:"res/Setting/BaS10.png",//      png11:"res/Setting/BaS11.png",//      png12:"res/Setting/BaS17.png",//      png17:"res/Setting/pvpangle03.png",//      png18:"res/Setting/pvpangle04.png",//      png19:"res/Setting/pvpangle05.png",//      png20:"res/Setting/pvpangle06.png",//      png21:"res/Setting/PvPMsgBoard.png",//      png22:"res/DifficultySelection/DS16.png",login_Json:"res/Setting.Json",};var g_resources = [];for (var i in res) {    g_resources.push(res[i]);}

PS：如果你不需要单独使用那些PNG资源文件，完全可以只加载JsON文件就可以了，这样的话，非常方便快捷。

第四步：非常非常重要的一步，你需要修改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 SettingScene());    },this);};cc.game.run();

三、使用Cocosstudio资源

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

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

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

第二步：从settingScene中查找相应的控件对象，SlIDer控件，具体代码如下：

musicslIDer = ccui.helper.seekWidgetByname(settingScene,"musicslIDer");

第三步：添加事件监听，方法类似，具体代码如下：

musicslIDer.addCCSEventListener(this.slIDerStateChange);

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

SlIDer控件触发的事件处理

slIDerStateChange:function(sender,type){        switch(type){        case ccui.SlIDer.EVENT_PERCENT_CHANGED:            cc.log("musicslIDer percent : " + sender.getPercent());            break;        default:            break;        }    }

代码简介：

上面的代码都有注释，也都很简单。这里就简单介绍一下：对于SlIDer的每次滑动即状态改变，都会触发事件EVENT_PERCENT_CHANGED。如果你要实时调整游戏的音量等一些效果的话，可以在捕获该事件之后根据percent的值进行相应的调整和处理。

四、运行效果

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

五、补充说明

SettingScene.Js的完整源码如下：

var SettingLayer = cc.Layer.extend({    musicslIDer:null,soundSlIDer:null,ctor:function(){        this._super();        //加载Setting界面的JsON资源分析，并获取settingScene对象。        settingScene = ccs.load(res.setting_Json).node;        //将settingScene对象加入到layer中。        this.addChild(settingScene);        //从settingScene中获取控件并注册监听事件。        musicslIDer = ccui.helper.seekWidgetByname(settingScene,"musicslIDer");        musicslIDer.addCCSEventListener(this.slIDerStateChange);    },slIDerStateChange:function(sender,type){        switch(type){        case ccui.SlIDer.EVENT_PERCENT_CHANGED:            cc.log("musicslIDer percent : " + sender.getPercent());            break;        default:            break;        }    }});var SettingScene = cc.Scene.extend({    onEnter:function () {        this._super();        var layer = new SettingLayer();        this.addChild(layer);    }});

PS：由于本次教程内容较为简单，没有提供完整工程就行下载。如果需要完整工程，请去：http://www.jb51.cc/article/p-wycpshzq-em.html 里面有下载链接，经过简单修改，即可使用。

总结

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

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