[Cocos2dx note 011] Using Cocostudio UI Editor, cocos2dxcocostudio

[Cocos2dx note 011] Using Cocostudio UI Editor, cocos2dxcocostudio
Address: Workshop
Cocos2dx not only has a framework, but also provides an editor to edit animations, UIS, skeleton animations, and scenes. Using these tools greatly shortens the development cycle of cocos2dx. But in general, the operation is not very convenient, but it is always better than not! : Http://cn.cocos2d-x.org/download/ now MAC version has come out. Yes

Start and create a project


In this way, the project is created.
Before editing, you need to provide resources for the project. One is to drag the resource list to the right or open the select resource dialog box in the resource list.


Insert result
Other resources are pushed accordingly.
By default, a canvas and a container panel are created during project creation.

Before you officially edit the UI, you need to set the screen size according to your project requirements.

Add an image to the screen. Unfortunately, you cannot drag the resource list directly to the canvas in the middle. You can only right-click the canvas or object list, and right-click the menu to add image objects.


Select the object with the mouse. On the right side of the screen, there is an object property panel.

The property Panel provides dimensions and modes, general, control layout, and features. You can try setting it to know its role. After adding the image, drag the specific image resource to the attribute area-> features-> file box.

Result

So OK.
The attribute panel has a Tag attribute and a sub-name attribute. After loading the UI, you can use these two attributes to obtain the object in the UI.
You may adjust the rendering level to adjust the display order.
Follow the steps above to quickly make the UI.
After that, you need to export the UI. cocos2dx cannot directly use the UI project, and you need to use export.


When exporting resources, pay attention to the fact that using a large image will combine the resources used into a large image to improve efficiency. When a thumbnail is used, the resource diagram is copied as is. This depends on your choice.
After the export is complete, copy the exported directory to the Resource Directory of the cocos2dx project for use in the project.

Add the following code when you need to use the UI.

Gui: TouchGroup * ul = gui: TouchGroup: create ();
Ul-> addWidget (GUIReader: shareReader ()-> widgetFromJsonFile ("NewUi_1/NewUi_1.ExportJson "));
This-> addChild (ul, 2); you can use tags to access this resource. Ul-> getWidgetByTag (42 ). Note that not the ui-> getChildByTag (42), this will not traverse all the child nodes. ! This completes a complete UI operation!
Download CocoStudio and cocos2Dx

CocoStudio is mainly used by the artist to facilitate the work of the sprite support and scenarios;
Cocos2Dx is a game engine mainly required by programmers to write code.
This should be understandable. You have to try to understand more details. Actually, I am a newbie. Come on! Haha ~