Cocos2d-tile map format

Example of a tmx map file:

<?xml version="1.0" encoding="UTF-8"?>  <map version="1.0" orientation="orthogonal" width="40" height="40" tilewidth="32" tileheight="32">   <tileset firstgid="1" name="Desert" tilewidth="32" tileheight="32" spacing="3" margin="2">    <image source="desert_tiled.png" width="281" height="211"/>    <tile id="30">     <properties>      <property name="cactus" value="true"/>     </properties>    </tile>   </tileset>   <layer name="Ground" width="40" height="40">    <data encoding="base64" compression="gzip">     H4sIAAAAAAAAA+2YaQvCMAyGo37wAk/wRJ3OY97+/19nxJVJKF3WrbHKPjzYQVcf30QXXALA0iEdpIv0cp5TQapIjbnmnHnT+K0s/ZpIC2kz19L59ZEBMmSuOWe+shohY2SS088Vup6wrXEaU2SWgTnY9YQta2STgdChX2Tw2yInZPdFP1N+ITNPCb+9h34P4kX9LvDu/6uwH+05ep2WF+3LIvx034OI5KfWaX4016LyO5Br5ZM1P9f1pZ6UY1w/LucC/OoxDUieRSZqzH2KRU6/LiTzhfqsJtrMfbr7bPzGkMwXaj4xMWTu093nsvekCUA/5/jkGQj62MxmEl63+JXz2/n5/AkLen8uHL+X0yPeK+l399CP9rVvfjb1/ZwvpPzuGfxolr7lp6u1z36S+dnMZpJ+/0LggcOvQLNy9b9RWeOSku/wBLyVlw4AGQAA    </data>   </layer>  </map>  

Tmx map format

• Page history

The tmx map format is a flexible tile-Based Map description format used by the tiled editor. A map described by it has the following features: any number of graph blocks, any number of layers, and any number of graph sets) there are also user-defined attributes attached to these elements (elements. In addition to layer, it also provides an object group that can be freely placed ).

In this document, we will fully understand all elements in the tmx format. Each element is listed as a title, followed by the attributes supported by the element and a brief description of the attribute, the attributes not supported by the current version of tiled editor appear in italic.

<Map>

• Version:Tmx format version number, generally 1.0

• Orientation:The orientation of a map. Currently, two methods are supported: Orthogonal and isometric.

• Width:Width of the map (the number of tile. isometric indicates the number of tile of the Oblique Edge)

• Height:Map height (number of tile)

• Tilewidth:Width of a single tile

• Tileheight:Height of a single tile

The tilewidth and tileheight attributes determine the size of the map mesh. Individual tiles can have different sizes. All tiles are attached to the lower left corner, and the excess part is extended on the top and right.

It can contain the following elements: attribute, graph block set, layer, object group (properties, tileset, layer, objectgroup)

<Tileset>

• Firstgid:The first global tile ID of this tileset (this global ID maps to the first tile in this tileset ).

The position of the first graph block in the global graph set.

• Source:Image Source: if the image block is from an external graph block definition file, the value of this attribute is the path of the graph block definition file. The TSX file also has the same property structure. The firstgid and source attributes are not in the TSX file. If the graph blocks in the graph set definition file are used in the map, these two attributes are set in the tmx file.

• Name:Block Set Name

• Tilewidth:Width of the graph block set

• Tileheight:Height of the graph block set

• Spacing:The interval between the block and the block When a sample block is created on the source image.

• Margin:Margin of the block in the graph set. When a sample block is created on the source image, the border size between the left side and the top side of the image is removed.

<Image>

• Format:The format used to embed an image. tiledqt does not support this attribute currently.

• ID:This attribute is used in some versions of tiled java. Currently, tiledqt does not support this attribute.

• Source:The path of the image file corresponding to the image block set. (Tiled supports most common image formats: BMP, GIF, JPEG, JPG, PBM, PGM, PNG, ppm, Tif, Tiff, xbm, XPM)

• Trans:Defines a color used to represent the passed, such as value: "ff00ff" for magenta (Product Red)

• Width:Image Width

• Height:Image Height

In the tiled QT version of the current version, each image set corresponds to an image. Based on the image set attributes, this image is cut into multiple smaller image blocks. The subsequent development plan of QT will support multiple images in one image set, just like the functions provided by tiled of Java.

<Tile>

• ID:Number of the graph block in the graph block set

<Layer>

• Name:Layer name

• X:The X coordinate of the layer (in the unit of block ). The default value is 0. This value cannot be modified in the tiled editor of the QT version.

• Y:Y coordinate of the layer (unit: Graph block ). The default value is 0. This value cannot be modified in the tiled editor of the QT version.

• Width:The width of the layer (unit: Graph ). The previous version must exist. The value is the same as the width of the map in the tiled editor of the QT version.

• Height:The height of the layer (unit: Graph ). The previous version must exist. This value is the same as the height of the map in the tiled editor of the QT version.

• Opacity:Opacity, ranging from 0 ~ 1, 0 is completely transparent, and 1 is not transparent.

• Visible:Visible, 1 visible, 0 invisible, default value: 1.

<DATA>

• Encoding:The encoding method of layer data. Currently, two types of "base64" and "CSV" are provided"

Base64 is a common method. Its principle is very simple, that is, the data of three bytes is represented by four bytes. In these four bytes, only the first 6 bits are actually used, so there is no problem that only 7 bits can be transmitted. The abbreviation of base64 is generally "B ".

A comma-separated CSV value File (comma separated value) is a plain text file format used to store data.

• Compression:Layer data compression method. The tiled editor of QT supports gzip or zlib data compression.

If the data is encoded, converted, and compressed, the block data is stored as a sub-element of XML, which is the easiest data format to parse.

It is complicated to parse the data in base64 encoding format and compressed data. First, you must decode the data, and then you may need to compress the data. Your data is stored in a byte array and you have to sort it into an unsigned integer array in the little-Endian byte order.

No matter which format is used to store your layer data, you must end with the so-called gids. They are global, since any graph block of the graph block set is used to design the current map. To find the graph block set where the graph block is located, you need to find the firstgid of the largest graph block set smaller than the graph block GID. The firstgids of all graph blocks are arranged in order.

C ++ pseudocode:

// Bits on the far end of the 32-bit global tile ID are used for tile flagsconst unsigned FLIPPED_HORIZONTALLY_FLAG = 0x80000000;const unsigned FLIPPED_VERTICALLY_FLAG   = 0x40000000;const unsigned FLIPPED_DIAGONALLY_FLAG   = 0x20000000;...// Extract the contents of the <data> elementstring tile_data = ...unsigned char *data = decompress(base64_decode(tile_data));unsigned tile_index = 0;// Here you should check that the data has the right size// (map_width * map_height * 4)for (int y = 0; y < map_height; ++y) {  for (int x = 0; x < map_width; ++x) {    unsigned global_tile_id = data[tile_index] |                              data[tile_index + 1] << 8 |                              data[tile_index + 2] << 16 |                              data[tile_index + 3] << 24;    tile_index += 4;    // Read out the flags    bool flipped_horizontally = (global_tile_id & FLIPPED_HORIZONTALLY_FLAG);    bool flipped_vertically = (global_tile_id & FLIPPED_VERTICALLY_FLAG);    bool flipped_diagonally = (global_tile_id & FLIPPED_DIAGONALLY_FLAG);    // Clear the flags    global_tile_id &= ~(FLIPPED_HORIZONTALLY_FLAG |                        FLIPPED_VERTICALLY_FLAG |                        FLIPPED_DIAGONALLY_FLAG);    // Resolve the tile    for (int i = tileset_count - 1; i >= 0; --i) {      Tileset *tileset = tilesets[i];      if (tileset->first_gid() <= global_tile_id) {        tiles[y][x] = tileset->tileAt(global_tile_id - tileset->first_gid());        break;      }    }  }}
<Tile>
 
 

  
  
GID:Global ID of the graph Block
 
 
A graph block does not have to be in a graph block set, but can also exist in a layer. This element defines a basic graph block that can be used for a layer. This is the least efficient layer data storage method and should be avoided.
<Objectgroup>
 
 

  
  
Name:The name of the object group.
 
 
 
 

  
  
Color:The color of the current object group.
 
 
 
 

  
  
X:The X coordinate of the object group. The default value is 0. tiledqt cannot be modified.
 
 
 
 

  
  
Y:Y coordinate of the object group. The default value is 0. tiledqt cannot be modified.
 
 
 
 

  
  
Width:The width of the object group, which is meaningless currently.
 
 
 
 

  
  
Height:The height of the object group, which is meaningless currently.
 
 
 
 

  
  
Opacity:The image transparency of the object group is 0 ~ 1. The default value is 1.
 
 
 
 

  
  
Visible:The visibility 1 of the object group is 0 hidden. The default value is 1.
 
 
The object group is actually a layer, so in tiledqt, we also call it an Object layer.
<Object>
 
 

  
  
Name:Object Name. String Representation
 
 
 
 

  
  
Type:Object type. String Representation
 
 
 
 

  
  
X:X coordinate of the object, in pixels
 
 
 
 

  
  
Y:Y coordinate of the object, in pixels
 
 
 
 

  
  
Width:Object width, in pixels
 
 
 
 

  
  
Height:Object height, in pixels
 
 
 
 

  
  
GID:Graph block index (optional)
 
 
 
 

  
  
Visible:Visibility; 1: 0 hidden; default value: 1
 
 
Although block layers are ideal for aligning all objects to a grid, sometimes you need to add information that does not need to be aligned to a grid in a map. Therefore, the object location and size are measured in pixels. It is easy to align the object to the grid. You usually use an object to add custom information, such as the birth point, jump point, and exit point.
If the GID attribute of an object is set, the object is represented by the graph block corresponding to the ID, that is, the width and height of the object are ignored. The alignment of the image depends on the orientation of the current map. In the orthogonal map, align in the lower left corner, and align in the center at the bottom of the same distance map.
<Polygon>
 
 

  
  
Points:A series of x and zcoordinate points (in pixels)
 
 
A polygon object consists of coordinate points separated by space characters. The origin of these coordinate points is the location of the parent object. By default, the coordinates of the first vertex are 0, 0, indicating the storage location of the object.
<Polyline>
 
 

  
  
Points:A series of x and zcoordinate points (in pixels)
 
 
The rule is like a polygon.
<Properties>
Can contain any number of custom attributes. It can be used as a child element of a map, graph block, layer, object group, and object.
<Property>
 
 

  
  
Name:Attribute name
 
 
 
 

  
  
Value:Attribute Value
 
 
If the attribute value contains a line break, the tiled editor of the current Java and QT versions can be used to include it in the property element rather than the value, currently, the tiled editor does not really support multi-row attribute values. In versions, attribute values may be stored directly in elements rather than as an attribute.
Address: https://github.com/bjorn/tiled/wiki/TMX-Map-Format
<End of this section>