Cocos2d-x 3.2-2048-Article 2

Cocos2d-x 3.2-2048-Article 2

 

 

OK, everyone is happy ~.~

2048 development article 2, a little slow = ..

 

Well, this time we will talk about the layout and drawing of the game interface.

 

Previously, we made the main interface, made a text button to jump to the main interface, as well as the exit image button.

This time, we have to do one thing,

Draw a grid of game Interfaces

 

The principle of Game Grid is very simple,

Is the stack of two LayerColor layers,

First, add a large LayerColor layer to the original game interface,

Then add 16 small LayerColor layers to the LayerColor layer.

 

Draw in the init function of the game interface,

When drawing, you need to know the color settings:

Color3B has three elements, which are RGB. Each value ranges from 0 to 255.

Color4B has four elements. The first three elements are the same as those of 3B. The last one is set to transparency, and 0 to 255 are all transparent. is not transparent.

In addition, you need to add the size of each grid and the number of rows and columns to the macro definition in the game:

 

#define GAME_ROWS 4#define GAME_COLS 4#define GAME_TILED_WIDTH 64#define GAME_TILED_HEIGHT 64#define GAME_TILED_BOARD_WIDTH 4

The last one is the width of the dividing line between cells.

 

 

Then, add a LayerColor pointer in GameScene. h.

 

LayerColor* colorBack;

Then, add the large LayerColor layer in init: (when calling GAME_ROWS, you must include GameDefine. h ~)

 

 

// Initialize the game mesh colorBack = LayerColor: create (Color4B (170,170,170,255), GAME_TILED_WIDTH * GAME_COLS + GAME_TILED_BOARD_WIDTH * (GAME_COLS + 1 ), GAME_TILED_HEIGHT * GAME_ROWS + GAME_TILED_BOARD_WIDTH * (GAME_ROWS + 1); // The anchpoint is located at in the lower left corner. Therefore, you need to change the anchorpointforposition (false) to the center ); colorBack-> setAnchorPoint (Point (0.5, 0.5); colorBack-> setPosition (Point (GAME_SCREEN_WIDTH/2, GAME_SCREEN_HEIGHT/2); this-> addChild (colorBack );

LayerColor: create contains three parameters: color (including transparency), width, and height.

 

Why is the width and height set to this?

-- The width is the width of each grid * Number of grids + width of the dividing line * (number of grids + 1)

Because the demarcation lines on both sides should also be counted,

The height must be the same as the width.

For the LayerColor layer, its anchpoint is in the lower left corner by default,

This, specific can see, I have published an article-> http://blog.csdn.net/lttree/article/details/39317329
Therefore, we first unlock the anchor and then set it to the central position.

SetPosition

 

Again, we can see that there is a gray Square in the center of the game interface,

(Why is it gray? -- See RGB for = .)

 

Next, we need to add a small layercolor layer:

 

// Initialize each grid for (int row = 0; row <GAME_ROWS; ++ row) {for (int col = 0; col <GAME_COLS; ++ col) {auto layerTiled = LayerColor: create (Color4B (70,70,70,80), gradient, GAME_TILED_HEIGHT); layerTiled-> setPosition (Point (GAME_TILED_WIDTH * col + cursor * (col + 1 ), GAME_TILED_HEIGHT * row + GAME_TILED_BOARD_WIDTH * (row + 1); colorBack-> addChild (layerTiled );}}

Well, two layers of loops, one by one lattice addition,

 

Note that the addChild statements are added to the large LayerColor layer, not to the bottom layer.

 

Run the code again. We can clearly see that these grids are:

 

Then, add a two-dimensional array in GameScene. h, map

Used to save the status of each grid ~

This map is a grid array in the logic,

Although we have drawn the mesh, there is no definition of the location of each grid in the computer,

Therefore, we need to use a two-dimensional array to locate the position of each grid. In the future, we can also determine the content of the grid:

GameScene. h: (Note that GAME_ROWS must contain GameDefine. h ~)

 

int map[GAME_ROWS][GAME_COLS];

Of course, you also need to initialize it in. cpp:

 

 

// Initialize the logical Grid Array for (int I = 0; I <GAME_ROWS; ++ I) {for (int j = 0; j <GAME_COLS; ++ j) {map [I] [j] = 0 ;}}

Well, this time, first come here.

 

The next article is about to proceed. The establishment of the digital block class ~

 

 

Download this article: http://pan.baidu.com/s/1pJujrDL

 

* *********************************** Please specify the source: bytes ******************************************