(12) Tile map

In the game development process, we will encounter more than the screen size of the map, such as real-time strategy game, so that players can scroll the game screen in the map. This type of game often has a rich background element, if you use the background map to switch the way, you need to prepare a background map for each different scene, and each background map is not small, which will cause the waste of resources.

The tile map was created to solve the problem. A large map of the world or a background image can be represented by several terrains, each of which corresponds to a small picture, and we call these small topographic images tiles. The tiling of these tiles together, a complete map of the combination, this is the principle of tile map.

Tilemap Solutions

In Cocos2d-x, the tile map implements the TILEMAP scheme, and tilemap requires each tile to occupy a quadrilateral or hexagon area on the map. By stitching together different tiles, you can form a complete map. We need a lot of smaller textures to create tiles. Usually we will put these smaller textures in one picture, which will improve the performance of the drawing.

Tile Map Editor

Cocos2d-x supports a map created and saved in the TMX format by the tile map editor tiled. Tiled Map Editor is an open source project that supports Windows, Linux and Mac OS X operating systems, which we can download from the official website to the Java and QT versions of the editor.

How to use the tiled tool to build a map can refer to the following articles:

How to make Tilemap-based games with cocos2dx3.0

Map direction

The tiled map supports a right angle aerial map (90° map), an isometric squint map (oblique 45° map), and a hexagon map, which does not support the hexagonal map of the left or right or upper and lower boundaries.

Map Resources

• Suggested tile map footage size is a multiple of 32*32
• Tile material groups cannot be mixed with other pictures
• Only tile footage can be imported into TMX file
• Each layer supports up to 1 sets of tile material groups.

Tile layer

• There is no limit to the number of tile layers in TMX files
• Each tile layer can be made up of only one tile material
• Each tile layer can be represented by a Tmxlayer class-a subclass of Spritesheet
• Each single tile is represented by a sprite-the parent node is Tmxlayer

Object layer

• Tile Map Support Object Group
• Used to add game elements other than the background-props, obstacles, etc.
• Objects in the object group exist as key-value pairs in the TMX file, so they can be modified directly in the TMX file

Tile Map Coordinate system

For a 16*16 tile map file, the coordinate system is

• (0, 0): Upper left corner
• (15, 15): Lower right corner

Using TMX to create a TMX node in cocos2d-x

    TMXTiledMap *map = TMXTiledMap::create("bg.tmx");    addChild(map, 0);

Traversing child nodes

    Vector<Node*> pChildrenArray = map->getChildren();    SpriteBatchNode* child = NULL;    Ref* pObject = NULL;    for (Vector<Node*>::iterator it = pChildrenArray.begin(); it != pChildrenArray.end(); it++) {        pObject = *it;        child = (SpriteBatchNode*)pObject;    }

Get/Delete a tile

    TMXLayer* layer = map->getLayer("layer0");    Sprite* tile0 = layer->getTileAt(Point(1, 15));    layer->removeTileAt(Point(1, 15));

Traversing objects in the object layer

    TMXObjectGroup* objectGroup = map->getObjectGroup("center");    ValueVector object = objectGroup->getObjects();    for (ValueVector::iterator it = object.begin(); it != object.end(); it++) {        Value obj = *it;        ValueMap map = obj.asValueMap();        log("x = %d y = %d", map.at("x").asInt(), map.at("y").asInt());    }

(12) Tile map