Cocos2d-JS中使用CocosStudio资源——设置界面，cocos2djs加载界面
在本篇博客中，我们将通过一个在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://blog.csdn.net/qiumengchen12/article/details/45485893
里面有下载链接，经过简单修改，即可使用。
http://www.bkjia.com/Androidjc/995241.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/995241.htmlTechArticleCocos2d-JS中使用CocosStudio资源——设置界面，cocos2djs加载界面 在本篇博客中，我们将通过一个 在Cocos2d-JS中使用从CocosStudio导出的设置界面资...
