TiledLayer
A TiledLayer is a Layer that is composed of a
grid of cells that can be filled with a set of
tile images. This technique is commonly used in
2D gaming platforms to create very large scrolling backgrounds without the need
for an extremely large Image. The use of animated tiles allows numerous cells of a
TiledLayer to be animated quickly and easily.
12.4.1 Tiles
As with a Sprite's frames, the tiles used to fill the
TiledLayer's cells are provided in a single Image object which
may be mutable or immutable. The Image is broken up into a series of
equal-sized tiles whose dimensions are specified along with the
Image.
Each tile is assigned a unique index number, as shown in Figure 12.7. The tile located in the
upper-left corner of the Image is assigned an index of 1 (unlike
Sprite where the first frame is given an index of 0). The remaining
tiles are then numbered consecutively in row-major order (indices are assigned
across the first row, then the second row, and so on). These tiles are regarded
as static tiles because there is a fixed link
between the tile and the image data associated with it. The static tile set is
created when the TiledLayer is instantiated; it can also be updated at
any time using the setStaticTileSet method.
In addition to the static tile set, the developer can also
define several animated tiles. An animated tile's appearance is provided by the
static tile to which it is linked. This link can be updated dynamically, thereby
allowing the developer to change the appearance of several cells without having
to update the contents of each cell individually. This technique is very useful
for animating large repeating areas without having to explicitly change the
contents of numerous cells.
Animated tiles are created using the
createAnimatedTile method, which returns the index to be used for the
new animated tile. The animated tile indices are always negative and
consecutive, beginning with –1. The associated static tile that provides the
animated tile's appearance is specified when the animated tile is created, and
can also be dynamically updated using the setAnimatedTile method.
12.4.2 Cells
The TiledLayer's grid is made up of equal-sized cells;
the number of rows and columns in the grid are specified in the constructor, and
the physical size of the cells is defined by the size of the tiles. The contents
of each cell is specified by the means of a tile index; a positive tile index
refers to a static tile, and a negative tile index refers to an animated tile. A
tile index of 0 indicates that the cell is empty, meaning that the cell is fully
transparent and nothing is drawn in that area when the TiledLayer is
rendered. By default, all cells contain tile index 0.
The contents of cells may be changed individually using the
method setCell and as rectangular groups of cells using the method
fillCells. Several cells may contain the same tile; however, a single
cell cannot contain more than one tile.
The following example illustrates how a simple background can
be created using a TiledLayer. The setCell and
fillCells methods are used to set the contents of the cells as shown in
Figure 12.8. By default, the contents of
the cells is 0, which makes them transparent.
tiles.fillCells(0, 0, 8, 1, 1);
tiles.fillCells(0, 0, 1, 6, 1);
tiles.setCell(2, 2, -1);
tiles.setCell(7, 3, -1);
tiles.setCell(3, 5, -1);
With the cell contents set, the appearance of the
TiledLayer would be as shown in Figure 12.9. Note that since static tile 2 is linked to
animated tile –1, it appears in each of the cells that contain –1.
To animate the coin, a different static tile is linked to the
animated tile using the setAnimatedTile method. In this example, the
animated tile –1 is linked to static tile 5 instead of static tile 2, and the
resulting appearance is shown in Figure
12.10.
myTileLayer.setAnimatedTile(-1, 5);
Sections
