cocos.tiles module provides a simple method of managing tiled
displays in 2D games.
Tiled maps are made of three components:
Images are from individual files for from image atlases in a single file.
Tiles may be stand-alone or part of a TileSet.
MapLayers are made of either rectangular or hexagonal Cells which reference the tiles used to draw the cell.
- tmx objects
Entities that do not align with a grid, see Support for TMX object layers. Currently only available when loading from a .tmx file.
cocos.tiles supports two file formats:
The TMX file format as generated by the Tiled map editor from <http://mapeditor.org>.
An internal cocos2d XML format that it can both read and write described below in The XML File Specification.
Both file formats are loaded with the same API call:
#This loads a TMX format map cocos.tiles.load('filename.tmx') #This loads a cocos2d XML format map cocos.tiles.load('filename.xml')
Once the map is loaded the API for accessing the map information is the same regardless of the on-disk format.
Fairly simple examples of using the cocos.tiles module is provided in test/test_tiles.py, test/test_tmx.py, test_platformer.py
A basic tile map editor is provided in tools/editor.py; use toolsgentileset.py to generate separate .xml for each tileset used.
RectMapLayer class extends the regular Cocos layer to handle a
regular grid of tile images, or Cells. The map layer may be manipulated
like any other Cocos layer. It also provides methods for interrogating
the map contents to find cells (eg. under the mouse) or neighboring
cells (up, down, left, right.)
Maps may be defined in Python code, but it is a little easier to do so in XML. To support map editing the maps support round-tripping to XML.
The XML File Specification¶
The intent is that you may have a tile set defined in one XML file which is shared amongst many map files (or indeed within a single XML file). Images may be shared amongst multiple tiles with the tiles adding different meta-data in each case.
These may be constructed manually or loaded from XML resource files which are used to store the specifications of tile sets and tile maps. A given resource XML file may define multiple tile sets and maps and may even reference other external XML resource files. This would allow a single tile set to be used by multiple tile maps.
Assuming the following XML file called “example.xml”:
<?xml version="1.0"?> <resource> <requires file="ground-tiles.xml" namespace="ground" /> <rectmap id="level1"> <column> <cell tile="ground:grass" /> <cell tile="ground:house"> <property type="bool" name="secretobjective" value="True" /> </cell> </column> </map> </resource>
You may load that resource and examine it:
>>> r = load('example.xml') >>> map = r['level1']
and then, assuming that level1 is a map:
>>> scene = cocos.scene.Scene(map)
and then either manually select the tiles to display:
>>> map.set_view(0, 0, window_width, window_height)
or if you wish for the level to scroll, you use the ScrollingManager:
>>> from cocos import layer >>> manager = layer.ScrollingManager() >>> manager.add(map)
and later set the focus with:
>>> manager.set_focus(focus_x, focus_y)
See the section on controlling map scrolling below for more detail.
XML file contents¶
XML resource files must contain a document-level tag <resource>:
<?xml version="1.0"?> <resource> ... </resource>
You may draw in other resource files by using the <requires> tag:
<requires file="road-tiles.xml" />
This will load “road-tiles.xml” into the resource’s namespace. If you wish to avoid id clashes you may supply a namespace:
<requires file="road-tiles.xml" namespace="road" />
If a namespace is given then the element ids from the “road-tiles.xml” will be prefixed by the namespace and a colon, e.g. “road:bitumen”.
Other tags within <resource> are:
<image file="" id="">
Loads file with pyglet.image.load and gives it the id which is used by tiles to reference the image.
<imageatlas file="" [id="" size="x,y"]>
Sets up an image atlas for child <image> tags to use. Child tags are of the form:
<image offset="" id="" [size=""]>
If the <imageatlas> tag does not provide a size attribute then all child <image> tags must provide one. Image atlas ids are optional as they are currently not referenced directly.
Sets up a TileSet object. Child tags are of the form:
<tile id=""> [<image ...>] </tile>
The <image> tag is optional; these tiles may have only properties (or be completely empty). The id is used by maps to reference the tile.
Currently tools/editor.py fails to save if a tileset is inlined in the .xml
Workaround: use tools/gentileset.py to generate a .xml for each tileset used, and then include in the map using a:
<requires file="my-tiles.xml" ...>
element for each tileset.
<rectmap id="" tile_size="" [origin=""]>
Sets up a RectMap object. Child tags are of the form:
<column> <cell tile="" /> </column>
Map, Cell and Tile Properties¶
Most tags may additionally have properties specified as:
<property [type=""] name="" value="" />
Where type is one of “unicode”, “int”, “float” or “bool”. The property will be a unicode string by default if no type is specified.
Properties are accessed on the map, cell or tile using common dict operations with some extensions. Accessing a property on a cell will fall back to look on the tile in case it’s not found on the cell.
If a cell has a property
player-spawn (boolean) and the tile that the cell
uses has a property
move-cost=1 (int) then the following are true:
'player-spawn' in cell == True cell.get('player-spawn') == True cell['player-spawn'] == True 'player-spawn' in tile == False tile.get('player-spawn') == None tile['player-spawn'] --> raises KeyError cell['move-cost'] == 1
You may additionally set properties on cells and tiles:
cell['player-position'] = True cell['burnt-out'] = True
and when the map is exported to XML these properties will also be exported.
Controlling Map Scrolling¶
You have three options for map scrolling:
Never automatically scroll the map.
Automatically scroll the map but stop at the map edges.
Scroll the map an allow the edge of the map to be displayed.
The first is possibly the easiest since you don’t need to use a
ScrollingManager layer. You simple call
map.set_view(x, y, w, h)
on your map layer giving the bottom-left corner coordinates and the dimensions
to display. This could be as simple as:
map.set_view(0, 0, map.px_width, map.px_height)
Maps have a
map.get_at_pixel(x, y) query which will return the Cell at
that position in the Map.
Given a Cell object you may also use
map.get_neighbor(cell, direction) to
get the Cell which is in the direction (one of
Cells are stored in column-major order with y increasing up, allowing [i][j] addressing:
+---+---+---+ | d | e | f | +---+---+---+ | a | b | c | +---+---+---+
The cells property is list of lists:
[['a', 'd'], ['b', 'e'],
Thus the cell at (0, 0) is ‘a’ and (0, 1) is ‘d’.
Support for .TMX maps with hexagonal tiles¶
To have the same visualization in cocos than in Tiled Editor, you should set in Tiled the following map properties:
‘staggeraxis’: ‘x’ (top and bottom hexagon sides parallel to the x axis).
‘staggerindex’: ‘even’ (lower columns are the even ones).
Draw order is not guaranteed by cocos, so tilesets which expands outside the hexagon will not look good.
Support for TMX object layers¶
The TMX map format allows to specify ‘object layers’ also know as ‘object groups’.
An ‘object layer’ is a collection of entities freely placed in the world, that is, they don’t need to align with a tile map grid.
Objects can represent abstract ‘ellipse’, ‘polygon’, ‘polyline’, ‘rect’ or ‘tile’.
Usually after loading the map, your app code iterates over ‘.objects’ and takes appropriate actions, like:
build a specific
CocosNodefor visualization (particle system, animated sprite,…) based in the
TmxObject.usertypeand other attributes, then add it to the scene.
translate to some model class, like a zone trigger or a patrol path and store in your level info.
Other than the debug view,
TmxObjectLayer provides some methods to
select objects with certain properties or into a specified area.