Use CocosStudio resources in Cocos2d-JS -- set interface, cocos2djs load Interface

Use CocosStudio resources in Cocos2d-JS -- set interface, cocos2djs load Interface

In this blog, we will useUsing Setup interface resources exported from CocosStudio in the Cocos2d-JSTo briefly introduce the use of the Slider control.

I. Preparations for CocosStudio

Step 1:Download the corresponding example from the official website, setting. As follows:

Step 2:Modify the names of some controls to facilitate search and retrieval, for example:

Change the control name of the Music slider to musicSlider to facilitate searching.
Similar modifications include the Continue button and Sound slider.

Step 3:Publish resources.Note:In the release settings, the data format should be changed to JSON format. You can select the res folder of the project created in Cocos Code IDE as the release location. Of course, you can also select another folder. Specific release settings are as follows:

2. Cocos Code IDE operations

Step 1:Create a Cocos2d-JS project and copy the resource res released by Cocos Studio to the res folder of the project or directly publish to the res folder of the project.

PS: when creating a project, the default resolution is 640x960, and the direction is vertical.

Step 2:Modify the project. json file and add cocostudio to modules. Add SettingScene. js and resource. js to jsList. The Code is as follows:

{  "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"  ]}

Step 3:Specify the required resources in the resource. js file for later loading. The Code is as follows:

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: if you do not need to use those PNG resource files separately, you can load only JSON files, which is very convenient and fast.

Step 4: You need to modify the main. js file:cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL);Changecc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);.

Although we chose the vertical direction, we don't know why. When creating a project, the width and height are still 960,640. In vertical mode, the width and height should be 640,960. Therefore, modification is required to run properly. If you want to see the effect you shouldn't have, try it and you will be pleasantly surprised.

The specific code of main. js is as follows:

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();

3. Use CocosStudio Resources

Here, we finally come to the beginning (SettingScene. js). Next we will learn how to obtain the resources exported in CocosStudio.

Step 1:Load the JSON resource analysis on the setting interface and obtain the settingscene object. Add the settingscene object to the layer. The Code is as follows:

// Load the JSON resource analysis on the setting interface and obtain the settingscene object. SettingScene = ccs. load (res. setting_json). node; // Add the settingscene object to the layer. This. addChild (settingScene );

Step 2:Find the corresponding control object from settingScene, the Slider control, the specific code is as follows:

musicSlider = ccui.helper.seekWidgetByName(settingScene, "musicSlider");

Step 3:The method for adding event listening is similar. The Code is as follows:

musicSlider.addCCSEventListener(this.sliderStateChange);

Step 4:Define the specific processing information of the corresponding listening event. The specific code is as follows:

Processing of events triggered by the Slider Control

sliderStateChange:function(sender,type){        switch(type){        case ccui.Slider.EVENT_PERCENT_CHANGED:            cc.log("musicSlider percent : " + sender.getPercent());            break;        default:            break;        }    }

Code introduction:

The above code has comments, which are also very simple. The event EVENT_PERCENT_CHANGED is triggered for each Slider slide, that is, the status changes. If you want to adjust the game's volume and other effects in real time, you can adjust and process the events based on the percent value.

Iv. Running Effect

At this point, the analysis and use of the setting interface are complete. You can run it. Some of my running results are as follows:

5. Additional instructions

The complete source code of SettingScene. js is as follows:

Var SettingLayer = cc. layer. extend ({musicSlider: null, soundSlider: null, ctor: function () {this. _ super (); // load the JSON resource analysis on the Setting interface and obtain the settingScene object. SettingScene = ccs. load (res. setting_json). node; // Add the settingScene object to the layer. This. addChild (settingScene); // obtain the control from settingScene and register the listening event. 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: because the content of this tutorial is relatively simple, you can download it without providing a complete project. If you need a complete project, go to: http://blog.csdn.net/qiumengchen12/article/details/45485893
There is a download link, which can be used after simple modification.