Cocos2d-JS中使用CocosStudio資源——設置界面

在本篇博客中，我們將通過一個在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
裏面有下載鏈接，經過簡單修改，即可使用。