Use tile map in Cocos2d-X

Use tile map in Cocos2d-X

 

This blog will detail the application of tile map in Cocos2d-X

Use the map editor to create a tile Map

 

After the edited tile map is saved, A tmx file is used. After opening the tmx file, the tmx file is actually an XML file.

Content in the tmx file of the tile Map edited above:

EJxjYBgFQwkIYsH4gDYWjA + oYsH4AACWOAHm

 

Code explanation:

Version = 1.0
Map version

Encoding = UTF-8

// Map encoding method

Orientation = orthogonal
// Map direction

Width = 12
// Number of x blocks in the map

Height = 12
// Number of blocks in the y direction in the map

Tilewidth = 101
Width of each block in a map

Tileheight = 81

Height of each block in a map

Source = orthogonal-test1.tsx
// Map source file

Layer name = Layer 0

Layer

 

Add the following code:

 

// Create map CCTMXTiledMap * map = CCTMXTiledMap: create (orthogonal-test1.tmx); addChild (map );

 

 

 

Execution result:

 

Tile map application 1: Click the bricks and bricks to change to a treasure chest

You need to know some knowledge before creating this applet:

1. The coordinate origin of the window is located in the lower left corner of the window.

2. The coordinate origin of the map is located in the upper left corner of the map.

3. Therefore, the map must be converted into window coordinates during design innovation.

The image shows that the x coordinates of the points in the graph are the same as those on the map.

In the figure, the y coordinate at the point in the window = the height of the tile map-the y coordinate at the point in the tile Map

Implementation Code:

 

# Include TmxMapBasic. hCCScene * TmxMapBasic: scene () {CCScene * s = CCScene: create (); TmxMapBasic * layer = TmxMapBasic: create (); s-> addChild (layer ); return s;} bool TmxMapBasic: init () {CCLayer: init (); CCSize winSize = CCDirector: sharedDirector ()-> getWinSize (); // create map CCTMXTiledMap * map = CCTMXTiledMap: create (orthogonal-test1.tmx); addChild (map); _ map = map; // register the touch setTouchEnabled (true); setTouchMode (kCCTouchesOneByOne ); return true;} // The touch response function bool TmxMapBasic: ccTouchBegan (CCTouch * touch, CCEvent *) {// obtain the coordinates of the touch point CCPoint ptLocation = touch-> getLocation (); // ptLcocation-> coordinate in the tmx map // obtain the size of each graph block in the map CCSize tileSize = _ map-> getTileSize (); // obtain the number of chunks in the map. CCSize mapSize = _ map-> getMapSize (); CCPoint ptInMap; // obtain the coordinate ptInMap of the touch point in the map. y = mapSize. height * tileSize. height-ptLocation. y; ptInMap. x = ptLocation. x; // obtain the coordinates of the touch point in the window. int tx = ptInMap. x/tileSize. width; int ty = ptInMap. y/tileSize. height; // obtain the map object CCTMXLayer * layer0 = _ map-> layerNamed (Layer 0) using the Layer name ); // set tile number 0 to hide tile layer0-> setTileGID (9, ccp (tx, ty); return true ;}

 

 

Execution result:

Tile map application 2: Click the bricks and bricks to jump to the treasure chest

Program code:

 

# Include TmxMapBasic. hCCScene * TmxMapBasic: scene () {CCScene * s = CCScene: create (); TmxMapBasic * layer = TmxMapBasic: create (); s-> addChild (layer ); return s;} bool TmxMapBasic: init () {CCLayer: init (); CCSize winSize = CCDirector: sharedDirector ()-> getWinSize (); // create map CCTMXTiledMap * map = CCTMXTiledMap: create (orthogonal-test1.tmx); addChild (map); _ map = map; // register the touch setTouchEnabled (true); setTouchMode (kCCTouchesOneByOne ); return true;} // The touch response function bool TmxMapBasic: ccTouchBegan (CCTouch * touch, CCEvent *) {// obtain the coordinates of the touch point CCPoint ptLocation = touch-> getLocation (); // ptLcocation-> coordinate in the tmx map // obtain the size of each graph block in the map CCSize tileSize = _ map-> getTileSize (); // obtain the number of chunks in the map. CCSize mapSize = _ map-> getMapSize (); CCPoint ptInMap; // obtain the coordinate ptInMap of the touch point in the map. y = mapSize. height * tileSize. height-ptLocation. y; ptInMap. x = ptLocation. x; // obtain the coordinates of the touch point in the window. int tx = ptInMap. x/tileSize. width; int ty = ptInMap. y/tileSize. height; // obtain the map object CCTMXLayer * layer0 = _ map-> layerNamed (Layer 0) using the Layer name ); // set the tile number 0 to hide the tile layer0-> setTileGID (9, ccp (tx, ty )); // use the image at the position in the vertex to create the genie CCSprite * sp = layer0-> tileAt (ccp (tx, ty); // set the sprite to jump to the CCAction * action = CCJumpBy :: create (3, ccp (0, 0), 30, 5); // execute the Skip action sp-> runAction (action); return true ;}

 

 

Execution result:

 

??