Cocos2d-x3.0 game instance of Don't save me Article 5-use Cocostudio UI editor to create an operation interface

This article is actually very simple. You can scan Cocostudio's friends who are familiar with Cocostudio ~ (Xiao RuO: who is familiar with Cocostudio? Can I read your basic tutorial)

 

 

What do you mean? Flowers? No, it's your heart ~

Reprinted please note, original address: http://www.benmutou.com/blog/archives/892

Source: dummies and Game Development

 

 

 

Download Cocostudio

First, go to the official website to download the latest version of Cocostudio: http://www.cocos2d-x.org/download

The version used in this tutorial is V1.3.0.1. There are three branches in the same version. You can choose one branch as needed:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

 

Well, we still chooseV1.3.0.1 + Cocos2D-X 3.0That branch ~ Why? Maybe it is pleasing to the eye ~ (Xiao RuO: I recommend)

Well, from top to bottom, the three branches have the following functions:

1. Cocostudio tool set

2. A Cocostudio toolset that contains Cocos2d-x 2.2.3 source code that allows you to directly create a Cocos2d-x project with Cocostudio

3. A Cocostudio toolset that contains Cocos2d-x 3.0 source code that supports creating Cocos2d-x projects directly with Cocostudio

Using Cocostudio to directly create a Cocos2d-x project I have not tried, do not mislead everyone ~

 

The installation is simple and there is nothing to pay attention ~

 

Open the UI Editor

OK. Now run the Cocostudio program. The following interface is displayed:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Select the second one, "UI Editor", which is the UI Editor we want to use.

 

Create operation interface

Well, there are still a lot of UI editor functions, and one tutorial is endless (and I have not fully mastered all of its functions ), this tutorial introduces the basic usage of the editor through a simple UI.

 

Create a project

First, create a project. Name it OprUI:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

Find the place in the upper left corner:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

We can set the size of the canvas. In theory, we like it. You can set the size based on your UI (note that the UI cannot be fully displayed in the game because it should not be out of the range )~

However, my personal habit is to set the game's design resolution size, which is more convenient and everyone will have their own habits forever.

 

OK. Set the canvas to 480*800:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Then press Ctrl + S to save... (Why save it? Don't know... Habitual action)

 

Import materials

 

This tutorial photo material: http://yunpan.cn/QNbCTBnPPRadX access password 98a9

Well, now we can import the materials used by the UI and drag the image to the resource view on the far right of the UI editor with the mouse,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

Create button

OK. Don't forget our original goal: to create three operation buttons corresponding to the three operations of the main character.

Find the control bar on the far left of the UI editor, and then find the button control,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

I may not be very good at finding it. I used one or two arrows a little more, and you should look for them carefully (Xiao RuO: Seven arrows, does it mean you have a revenge... Are you complaining too deeply? Hello)

 

OK. Click and drag the button control to the canvas. Then, the button is created,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Set button Image

Well, this blue button looks nice. I like it very much, so we need to discard it (blue button: Ah ?)

 

Select this button, and then we will see a large attribute in the attribute view on the right,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

Most of these attributes can be used as the name suggests. Let's take a look at the two attributes circled:

1. Name: this name is very important. Through this name, we can find this control object in the code.

2. normal status: This is very difficult, as the name suggests. In fact, it means "Images with normal button status"

 

Okay, let's set the button name to "rightBtn", and then modify the picture in the normal state of the button. The method is very simple. select one of the image resources that lead to it, then drag it to the "normal status" attribute bar.

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

Originally, I wanted to create a GIF animation, which is more vivid ~ But for some reason, I did not. (What else can I explain if I am lazy)

 

Then you will find that the button image has changed.

Ignore the following "Press status" and "Disable status.

 

Complete button

According to the method just introduced, we have created three buttons,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

The three buttons have the following attributes: leftBtn, rightBtn, and quickMoveBtn.

(Xiao RuO: Wait. Can the arrow be left or right? Isn't there only one arrow image ?)

 

An arrow image creates buttons in different directions. This is because the button has an attribute called "Horizontal flip ~

 

Export the configuration file

OK, a perfect UI was born (Xiao RuO: Ah, fart !)

It is time to export the UI. Ctrl + S to save it. Do not forget to save it because of the habitual action ).

 

Then Ctrl + E export the UI,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

(I recommend, so complicated)

 

You can select the path you want to save ~

To export a large image, you can package the image into a large image.

 

Then, to the exported folder, we will see three files:

ExportJson is the UI configuration file, followed by the image file.

Copy these three files to the Resources directory of our game project. You can directly use the root directory instead of the directory structure ~

 

Now, we need to use the UI file in the code ~

 

 

Import Cocostudio-related libraries

Before using the UI file, we need to add the Cocostudio Library to the project,

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Right-click the project solution, add an existing project, find the Cocostudio project, and then

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

OK. Click "open.

 

If you use VS2013 like me, you need to upgrade it (if you do not have this option, you do not need to upgrade it ),

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Then add the GUI library and Extensions library in the same way:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

Click Generate project, and then compile the newly added library.

Here, I would like to remind you that it is best to [re-generate] the project and compile it again, because I just encountered a very strange problem and the UI is always misplaced after being loaded. After looking for a long time, the problem disappears after the result is generated again.

 

If you find a compilation problem and some header files cannot be found, modify the additional include directory of the Project as follows:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

 

If a compilation error occurs and an external link library error occurs, add a link library reference:

 

 

Use the UI file in the code

Now, we have finally completed the prelude. Now, add a function to toll1_scene:

 

 
 

  
  
/* Create operation UI */
  
  
Void createOprUI ();
  
  

  
  
Function implementation:
  
  
Void toll1_scene: createOprUI ()
  
  
{
  
  
Auto UI = cocostudio: GUIReader: getInstance ()-> widgetFromJsonFile ("OprUI_1.ExportJson ");
  
  
This-> addChild (UI );
  
  
}
 
 

Okay. Run the command. Does the UI appear?

(Xiao RuO: No! Compilation error, too weak !)

 

That's right. If you don't report an error, it's amazing. Because we have not added some necessary header files:

 

# Include "cocostudio/CocoStudio. h"

Using namespace cocostudio;

 

After compilation and running, we can see the following results:

 

Cocos2d-x3.0 game instance of Don't save me Article 5-Cocostudio

 

OK. This is the simplest way to create and load the UI.

 

Ah, by the way, didn't I say that the Sawtooth below is a foreshadowing ~ Now let's undo this foreshadowing ~

Because three buttons need to be placed at the bottom of the page, the Sawtooth can only be placed at that position ~

Is there a pleasure after unlocking the suspense. (Ah, fart)

 

This article seems to be a little long. Let's take a look at how to make a result after clicking the button.