How to use Tile Map in Cocos2dx

Tile Map is a large graphical layer composed of small images called Tiles. Since tile maps re-use a number of small images, they save a lot of ram space and also improve real time game performance. For this reason, Tile Maps have been used in several games.

All the small tiles are packed in a single sprite sheet resulting in more optimized usage of ram and file I/O operations. On run time, the game maps tiles from the sprite sheet into a large graphic using information stored as 2D array.

To use Tile Maps, one needs a map editor to create those maps and a tile engine to render them. One such popular tile map editor is Tiled. Tiled Map Editor exports maps in TMX format. Cocos2dx already has in-built support for TMX maps.

First download Tiled and create a map in it.

cocos2dx tutorial 1024x575 How to use Tile Map in Cocos2dx

Now place the tmx file and corresponding image in your resources/assets folder.

Cocos2dx provides a special class `CCTMXTiledMap` to add tmx maps to your layer.

To add TMX map create an instance to CCTMXTiledMap with the path to tmx file.

1
2
3
4
5
6
7
8
9
bool GameLayer::init()
{
  if (!CCLayer::init())
    return false;
  this->schedule(schedule_selector(GameLayer::update));
  CCTMXTiledMap *map = CCTMXTiledMap::create("maps/map.tmx");
  addChild(map, 0);
  return true;
}

Now you scale, rotate, move your map like you do it with any node in Cocos2dx.

Your map might be larger than screen, in that case you will need to make camera follow your player. Cocos2dx already provides this feature. You can use CCFollow action to make camera follow your player:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
bool GameLayer::init()
{
  /*
  Some Code Here
  */
 
  this->runAction(CCFollow::create(player, map->boundingBox()));
 
  /*
  Some Code Here
  */
 
  return true;
}


get started How to use Tile Map in Cocos2dx

If you have any questions or need any further assistance to integrate this, please feel free to write us at support@shephertz.com

twitter How to use Tile Map in Cocos2dxfacebook How to use Tile Map in Cocos2dxgoogle How to use Tile Map in Cocos2dxlinkedin How to use Tile Map in Cocos2dxpinterest How to use Tile Map in Cocos2dxreddit How to use Tile Map in Cocos2dxstumbleupon How to use Tile Map in Cocos2dxtumblr How to use Tile Map in Cocos2dx

Leave a Reply

Your email address will not be published. Required fields are marked *


× 1 = one

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>