Cocos2d-x 3.x Game Tutorial-Eight

Cocos2d-x 3.x Game Tutorial-Eight

Eight is 8 meaning, this tutorial is to write a simple and complete puzzle game, the right is to put the 1-8 number of scrambled to rearrange. My tutorial features are to use basically the latest version and tools, now out of the cocos2d-x3.7, but now this game we can rest assured that the use of 3.6 bar, and will not be used for too advanced content-mainly lazy upgrade, O (∩_∩) o ha!

Main Technical tools:
1. cocos2d-x3.6
2. Cocos
3. Cocos Studio

The most basic of what Cocos installation settings and so on is not introduced, because that is the basis of the foundation, this tutorial is the basic tutorial, but because it is a complete game production process, therefore can not speak the basis of the foundation, mainly to take everyone to do a complete game.

First create the project using Cocos:

• Open Cocos, click: Project--New project, pop up the following window:
  
• Click: Next, and then get the following screen, according to the picture set good:
  
• Click Finish to create a project successfully, and then cocos will automatically help us with Cocos Studio Open, of course you must install Cocos Studio, get the following screen:
  

Well, to this, the project to create a successful, the following we make the game interface, you can use Tilemap to create our game interface, you can also directly use Cocos Studio, see Personal like it, use tilemap words may need the following art to do the interface material, I was lazy to find, So use some of the ready-made materials and use Cocos Studio directly.

Making the Game interface

Take Cocos's Hello World picture out, we make a simple interface, here to use ImageView and Sprite container on it, simple and quick.

• Create a new layer first
  
  After clicking New file:
  
  If set, click New to get a new layer;
  Then add the background color, we use ImageView to do the background color bar, you can use Colorlayer, but this compiler can't find-_-!!!
  Drag the picture icon onto the layer:
  
  With this ImageView selected, the following properties are set:
  
  Then drag the white.png into its picture resource:
  
  Well, there's something missing, that is, to import resources such as white.png into Cocos Studio, or you can simply drag the picture into the box below:
  
  I use is very simple can find resources, this white.png is a random out of the background color, but in order not to let everyone find, tutorial below I will upload.
  Finally we get a pure white background color:
  

Said too detailed, did not do anything to write so much, this chapter as the opening is very basic, temporarily omit some steps, the next complete.
Finally, I want to do a simple interface, the effect is as follows:

The interface is ugly, first make up, the back of the beautiful point, and then add some button function, see this interface believe you can guess the game play it.

Copyright notice: The author of this article Jing Xin, Jing Space address: http://blog.csdn.net/kenden23/, without the permission of the author may not be reproduced.

Cocos2d-x 3.x Game Tutorial-Eight