Tiled Maps
There are 2 ways of creating tiled maps in cocos2d.
- by using the TMX Tile Map format (newer, more flexible, recommended)
- by using the PGU Tile Map format (older, deprecated)
cocos2d supports the following TMX maps:
-
Orientation:
-
Orthogonal maps
-
Isometric maps
-
Hexagonal maps (edges on left-right. edges at top-bottom are not supported… it seems that
Tileddoesn’t support them either)
-
Tiles:
-
Embedded tiles are NOT supported (i.e., tilesets with embedded images).
-
Only
embedded tilesets are supported (i.e., the tileset is embedded, but not its images).
-
supports at most 1 tileset per layer.
-
Layers:
-
You can have as many layers are you want
-
Each layer will be represented internally by a
CCTMXLayer (which is a subclass of CCSpriteSheet)
-
Each tile will be represented by an
CCSprite (its parent will be the CCTMXLayer)
-
Object Groups:
-
Tiled objectGroups are supported as well
How to create embedded tilesets with external images
cocos2d doesn’t support embedded images in tilesets (but requires tilesets themselves to be embedded in the map file). Instead you should create a sprite sheet image (AKA: Texture Atlas) by yourself.
Setting the Tiled preferences
Tell tiled to NOT save the tileset with embedded images:
$ cd bin/tiled-0.7.2/
$ java -jar tiled
Once in tiled, you should do:
-
Edit → Preferences → Saving
-
Layer Options:
-
Use binary encoding: ON (“text” encoding is not supported by cocos2d)
-
Compress layer data: ON (non-compressed data is also supported)
-
Tileset Options:
-
Embed images (PNG): OFF (Embedding images is not supported)
How to create a TMX node
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"hexa-test.tmx"];
[self addChild:map];
All the tiles by default will be aliased. If you want to create anti-alias tiles, you should do:
// create a TMX map
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
[self addChild:map];
// iterate over all the "layers" (atlas sprite managers)
// and set them as 'antialias'
for( CCTMXLayer* child in [map children] ) {
[[child texture] setAntiAliasTexParameters];
}
How to get/add/delete/modify a tile
To obtain a tile (CCSprite) at a certain coordinate
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
CCTMXLayer *layer = [map layerNamed:@"Layer 0"];
CCSprite *tile = [layer tileAt:ccp(0,63)];
tile.anchorPoint = ccp(0.5f, 0.5f);
To obtain a tile's GID at a certain coordinate
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
CCTMXLayer *layer = [map layerNamed:@"Layer 0"];
unsigned int gid = [layer tileGIDAt:ccp(0,63)];
To set a new tile’s GID’s at a certain coordinate
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
CCTMXLayer *layer = [map layerNamed:@"Layer 0"];
[layer setTileGID:gid2 at:ccp(3,y)];
To remove a tile at a certain coordinate
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
CCTMXLayer *layer = [map layerNamed:@"Layer 0"];
[layer removeTileAt:ccp(15,15)];
To iterate a Layer
CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
CCTMXLayer *layer = [map layerNamed:@"Layer 0"];
CGSize s = [layer layerSize];
for( int x=0; x<s.width;x++) {
for( int y=0; y< s.height; y++ ) {
unsigned int tmpgid = [layer tileGIDAt:ccp(x,y)];
[layer setTileGID:tmpgid+1 at:ccp(x,y)];
}
}