Internship Small white:: (EXT) Cocos2d-x 3.0 Development (iv) creating a UI with Cocostudio and loading into the program

1. Overview

The use of Cocostudio is undoubtedly an important part of Cocos2d-x 3.0, and we will use it to create a set of UI and read it into the program. First on:

2. Create and edit UI

First, run Cocostudio, and select UI Editer (the second one). After entering, enter the appropriate project name and path from file, new project. The new project that is created should look like this:

The next step is for everyone to play freely. On the side of the toolbar control casually dragged up to see what is the function, specifically I will not elaborate. You can rename the canvas in the canvas list, which affects the exported file name, and my project changes it to Testui. Resources, place them in the resource folder in the Cocosstudio directory.

Also note that if this button is interactive, the option to interact in the properties –> general-----No Click effect.

3. Export

Before exporting, it is a good idea to create a new project first. Run our script file and name the new project: Hellostudio. Compile and run to make sure it's okay.

Back in Cocostudio, click File –> to export the project. In the location of the exported resource, select export using large image. Also change the directory to the resource directory of our project files.

4. Loading into the program

Switch to VS2012 to change the init () method in the HelloWorld class:

[CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
20. /////////////////////////////////  
22. uilayer* Uilayer = Uilayer::create ();
24. Auto Mylayout = dynamic_cast<layout*> (ccuihelper->createwidgetfromjsonfile ("Testui.exportjson")) ; use in//alpha0
26. Auto Mylayout = Cocostudio::guireader::sharereader ()->widgetfromjsonfile ("Testui.exportjson")); use in//alpha1
28. Uilayer->addwidget (mylayout);
30. This->addchild (Uilayer);
34. return true;
36. }

Compile and run, it's ready.

5. Summary

Through Cocostudio for visual editing, and then export the edited file into a JSON-formatted configuration file, in the program to load the file to create a uiwidget, to achieve a graphical interface to the full program of association. The corresponding demo can be downloaded below:

Demo Download: http://download.csdn.net/detail/fansongy/6404989

This blog from the Asura road , reproduced please indicate the source, prohibited for commercial use: http://blog.csdn.net/fansongy/article/details/12757411

Internship Small white:: (EXT) Cocos2d-x 3.0 Development (iv) creating a UI with Cocostudio and loading into the program