Cocos2d-x using Cocos Studio to create an interface and apply---game development "Zhao Yun to Fight" (11)

here is Evankaka 's blog, welcome everyone to discuss and exchange ~~~~~~

Reprint Please specify the source http://blog.csdn.net/evankaka/article/details/42883881

This article is mainly about how to use Cocos Studio to make the landing interface, and exported to Json file, directly in the coco2d-x to invoke. The advantage of this is that the interface and code is separate, if you want to change the interface, you can directly outside with Cocos Studio to modify, as long as the button is not modified, such as the name, your function code without modification, as long as the exported Json file and picture resources are replaced by OK , so the development efficiency will be greatly improved!

Cocos2d-x version: 2.2.5

Engineering Environment: WINDOWS7+VS2010

Open by: Put the project under the project folder in the Cocos2d-x installation directory with VS Open

The effect of this article:

First, Cocos Studio system to do landing interface

First of all, be sure to note the corresponding version of cocos2d-x and cocosstudio , or Cocos2d-x may not be able to use the interface or animations you make.

   version corresponding list: 
studio2.x
Cocosstudioversion      correspondingCocos2d-xversionJSversion       Notes 
V2.1beta v3.4beta0 Nonehas been separated outReader, you can addReaderpull to another versionCocos2d-xto support the new version of theCocosstudio
v2.0.6 v3.3final None
v2.0.5 v3.3rc2 None
v2.0.2 v3.3rc2 None
v2.0beta0 v3.3rc0 v3.1

studio1.x

Cocosstudio version	2d-x version	2d-x version
1.6.0.0	3.2	2.2.5
1.5.0.1	3.2	2.2.5
1.5.0.0	3.0	2.2.4
1.4.0.1	3.0	2.2.3
1.4.0.0	3.0	2.2.3
1.3.0.1	3.0rc1	2.2.3
1.3.0.0	3.0rc0	2.2.3
1.2.0.1	3.0beta	2.2.2
1.1.0.0	2.2.1
1.0.0.2	2.2.0
1.0.0.1
1.0.0.0
PS : Generally high version 2dx can load a lower version of the studio1.x data, higher version of studio1.x data must not be able to be in the lower version of the 2d-x Loading

It is important to note that you are what version of the next version of the, to be impossible to call. Cocos Studio went to find the resources and then it was OK. Basically no problem.

Let's start with a simple tutorial,

1. First, open Cocos StudioandSelect the interface Editor, where you can also choose other, such as animations, scenes

2. then this is the UI Editor interface, there are some examples, you can also directly to use, or to change the picture

3. Click File, New

4. Click on the canvas to change the size of the interface size for your game

5. then directly will use the picture, background picture and button picture, drag to the upper right corner of the Resources. as follows:

6. Then we look at how to change the background of the interface, in fact, just drag the picture, remember to choose the panel_14first:

7. then the effect, at the same time to put the button, and add pictures, here to remember the name of the picture: named Begin:

Effect

8. Follow the above process, put the pictures on the well, add the other buttons in turn and align them

9. final step, document -"Export Project"

The exported stuff is in your project Export folder:

This is the case for exporting a larger image:

This is the case when you select a small graph when exporting:

See it. When the picture is small, this is the difference between the export, the picture is more when it is recommended to export large map, there will not be a lot of pictures.

this way, the interface is ready, and we can directly COCOS2DX called in the.

Second,cocos2dx using Json file

1. Here, we create a new project casually, first put the above resources json, pictures all in the Project Resource folder:

2. Add a header file to the new project HelloWorldScene.h

<span style= "Font-size:18px;color: #333333;" > #include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; Using_ns_cc_ext;using namespace gui;//The key to remember is to not have error C2065: "Sel_touchevent": undeclared identifier </span>

and add a callback event for the button

<span style= "Font-size:18px;color: #333333;" >void Touchbutton (cocos2d::ccobject* obj,gui::toucheventtype type);</span>

3. Then in Init () added in the function:

Loading Cocos Studio made interface gui::touchgroup* ul = Gui::touchgroup::create (); gui::layout* equipe_root =dynamic_cast<gui::layout*> (Guireader::sharereader ()->widgetFromJsonFile (" Mylogin_1.exportjson ")); Ul->addwidget (Equipe_root); This->addchild (UL, 2);//Add Event Listener to start button Gui::button *btn_begin = dynamic_cast<gui::button*> (equipe_root-> Getchildbyname ("Begin_game")); Begin_game is the name of the button defined in Cocos Studio Btn_begin->addtoucheventlistener (This,toucheventselector (HelloWorld:: Touchbutton));

4. Implementation of callback function

void Helloworld::touchbutton (cocos2d::ccobject* obj,gui::toucheventtype type) {switch (type) {case GUI:: Toucheventtype::touch_event_began:cclog ("button down");//Button Press Break;case gui::toucheventtype::touch_event_moved: Cclog ("button down and Mouse move");//button Press to move Break;case gui::toucheventtype::touch_event_ended:cclog ("button up"); Release button Break;case gui::toucheventtype::touch_event_canceled:cclog ("button Cancel");//Cancel button break;default:break;}}

Then let's look at the effect:

This is a simple example, the interface is very simple to make, and later to change the picture or something is also very convenient, the development of the effect greatly improved. This is where the talk goes, and next we'll apply this to our game.

Cocos2d-x using Cocos Studio to create an interface and apply---game development "Zhao Yun to Fight" (11)