Using Cocosstudio resources in COCOS2D-JS--setting up the interface

In this blog, we will briefly describe the use of the slider control using an example of a Setup interface resource exported from Cocosstudio in Cocos2d-js .

First, Cocosstudio preparation

The first step: Download the appropriate sample from the official website, setting. As follows:

The second step: Modify the names of some of these controls to facilitate the search for access, such as:

Change the control name of the music slider to Musicslider to make it easier to find.
Similar changes can also include: Continue buttons, sound sliders, and so on.

Step Three: publish the resources. Note that you should change the data format to JSON format in the Publish settings, you can select the Res folder of the project created in the Cocos Code IDE, and, of course, you can choose another folder. Specific release settings such as:

Second, Cocos Code IDE Operation

The first step: Create the COCOS2D-JS project and copy the resource Res published by Cocos Studio to the Res folder of the project or directly to the project's Res folder.

PS: When you create a project, the resolution defaults to 640 x 960, and the direction is selected vertically.

Step Two: Modify the Project.json file and add the Cocostudio in the modules. Add Settingscene.js and Resource.js to Jslist. The specific code is as follows:

{  "Project_type":"JavaScript",  "DebugMode":1,  "Showfps":true,  "framerate": -,  "ID":"Gamecanvas",  "Rendermode":0,  "Enginedir":"FRAMEWORKS/COCOS2D-HTML5",  "Modules":[ "cocos2d", "Cocostudio" ],  "jslist":[ "Src/resource.js", "Src/settingscene.js" ]}

Step Three: specify the required resources in the Resource.js file for post-load use. The specific 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 iinchRES) {G_resources.push (res[i]);}

PS: If you do not need to use those PNG resource files alone, you can simply load the JSON file, so it is very convenient and quick.

Fourth Step: a very, very important step, you need to modify the Main.js file, change one cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL); of cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL); the: to.

Although the direction we chose is vertical, we don't know why, when the project was created, the width is 960,640. The height of the vertical should be 640,960. Therefore, to make the appropriate changes to run properly. If you want to see the effect, you can try it, there will be surprises oh.

The specific code for Main.js is as follows:

Cc. Game. OnStart= function () {CC. View. Adjustviewport(true);Cc. View. Setdesignresolutionsize(640,960Cc. Resolutionpolicy. SHOW_all);Cc. View. Resizewithbrowsersize(true);Load Resources cc. Loaderscene. Preload(G_resources, function () {CC. Director. Runscene(New Settingscene ());}, this);};Cc. Game. Run();

Iii. Use of Cocosstudio resources

Come here, finally to our play (settingscene.js), below, we are going to learn how to get the resources exported in Cocosstudio, and so on.

First step: load the JSON resource analysis of the setting interface and get the Settingscene object. Joins the Settingscene object to the layer. The specific code is as follows:

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

The second step: find the corresponding control object from Settingscene, slider control, the specific code is as follows:

musicSlider = ccui.helper.seekWidgetByName"musicSlider");

The third step: Add Event Listener, similar method, the specific code is as follows:

musicSlider.addCCSEventListener(this.sliderStateChange);

Fourth Step: define the specific processing information of the corresponding listener event, the code is as follows:

Event handling 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 code above has comments and is simple. Here's a quick introduction: The event event_percent_changed is triggered for every swipe or state change of a slider. If you want to adjust the volume of the game in real-time, such as some effects, you can capture the event according to the value of percent to adjust and processing accordingly.

Four, the operation effect

Here, the analysis and use of the setting interface are complete. You can run it a bit. Some of my running effects are as follows:

v. Additional Information

Settingscene.js's complete source code is as follows:

varSettinglayer = cc. Layer.extend ({musicslider:NULL, Soundslider:NULL, ctor: function(){         This. _super ();//Load the JSON resource analysis of the setting interface and get the Settingscene object. Settingscene = Ccs.load (Res.setting_json). node;//Add the Settingscene object to the layer.          This. AddChild (Settingscene);//Get the control from Settingscene and register for the listener event. Musicslider = Ccui.helper.seekWidgetByName (Settingscene,"Musicslider"); Musicslider.addccseventlistener ( This. Sliderstatechange); }, Sliderstatechange: function(sender,type){        Switch(type) { CaseCcui. Slider.EVENT_PERCENT_CHANGED:cc.log ("Musicslider percent:"+ sender.getpercent ()); Break;default: Break; }    }});varSettingscene = cc. Scene.extend ({onEnter: function () {         This. _super ();varLayer =NewSettinglayer (); This. AddChild (layer); }});

PS: Because this tutorial content is relatively simple, did not provide complete project on the line download. If you need a complete project, go to: http://blog.csdn.net/qiumengchen12/article/details/45485893
There is a download link, after simple modification, you can use.

Using Cocosstudio resources in COCOS2D-JS--setting up the interface