Cocos2d-Js BASICS (4) the use of cocostudio in cocos2dx-Js], cocos2dxcocostudio

Cocos2d-Js BASICS (4) the use of cocostudio in cocos2dx-Js], cocos2dxcocostudio

First we open the official website www.cocos2d-x.org, download us to install the latest cococostudio (cocos ).

Introduction:

Cocos Studio is upgraded to cocos. Better products and better services. All-in-One game development solutions, low cost and high efficiency; high performance, one-time production, multi-terminal platform sharing; simultaneous release of Windows and Mac updates, easier team collaboration; rich plug-in material library, game Development is more flexible and convenient.

After the download and installation are completed, we can perform the following steps:

1. Prepare the required materials.

2. Create a background map

3. Create a role Avatar panel

4. Make a music switch button.

5. Use custom art fonts and system fonts on the Avatar panel

 

Then, we export the. Json project file and resource file.

Next let's look at how the exported project file is used in the Cocos2dx-Js

First, let's take a look at the call code of a base class in JS-test:

_parseUIFile: function(file){        if(cocoStudioOldApiFlag == 0){            cc.log("ccs.load : %s", file);            var json = ccs.load(file);            return json.node;        }else{            cc.log("ccs.uiReader.widgetFromJsonFile : %s", file);            return ccs.uiReader.widgetFromJsonFile(file)        }  },

OK, there is a judgment in it. cocoStudioOldApiFlag indicates that, if you are using the new version of Cocostudio, you must use the new AIP to call the interface,

If it is an old version, use the previous interface;

I have tried the following versions to avoid detours:

Cocostudio2.1.0 and above require a new interface:

 var json = ccs.load(file);

Here, the json object is only a root node, and our real root node needs to be retrieved separately;

var root = json.node;

The old interface is required for the following Cocostudio2.1.0:

var root = ccs.uiReader.widgetFromJsonFile(file);

Now, we have downloaded the latest Cocostudio2.2.5 version and generated. json.

Add the following code to our project base class:

Add the following to the BaseLayer. js base class:

setUIFile_File:function(file){        var json = ccs.load(file);        return json.node;    },setUIFile_JSON:function(file){        return ccs.uiReader.widgetFromJsonFile(file);},

The setUIFile_File and setUIFile_JSON methods are added. It is clear that the first method is used for the new version and the second method is used for the second half;

Then we will continue to implement our call in MainLayer:

 var UIroot = this.setUIFile_File(resJSON.Main_JSON); UIroot.setAnchorPoint(cc.p(0.5,0.5)); UIroot.setPosition(this.getContentSize().width/2,this.getContentSize().height/2); this.addChild(UIroot,1);

Through this. setUIFile_File (PATH), we can bind the interface file generated by cocostuido;

So how can we get the original custom Node?

Var lv_100 = ccui. helper. seekWidgetByName (UIroot, "lv_100"); lv_100.setString ("grade: 1 ");

You can get the control object through ccui. helper. seekWidgetByName (root node, custom control name ).

Then you can assign values or bind event relationships!

 

OK. Let's take a look at the UI created using cocostudio!

The results are quite good! Awesome!

Cocostudio can greatly improve the efficiency of our work, and this type of tool can be submitted to planning, art use, no need to write code.

What you see is the visualized editing interface. You only need to implement our interface layout to complete a lot of previous Code work!

Download source code:

(Baidu cloud disk)

Source code usage:

Create a new project by yourself, decompress the downloaded files, and copy all the files to the directory of your new project to overwrite all the files that can be run!