Programming Wireless Devices with the Java2 Platform

12.4 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 ?. 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 ?, it appears in each of the cells that contain ?.

To animate the coin, a different static tile is linked to the animated tile using the setAnimatedTile method. In this example, the animated tile ? 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);