Create Backgrounds Using TiledLayer
Although the TiledLayer
layer can be used for a number of things, it lends itself quite well to background images. As with Sprite
is loaded with an image. The image is broken into tiles based on parameters provided to the constructor specifying the number of columns and rows that are desired. The result is a grid of tiles with each tile representing a piece of the provided image. An example image is shown in Figure 4
|Figure 4. Loaded TiledLayer: This example image is divided into four tiles.|
The image in Figure 4 can be loaded into a TiledLayer using the following code:
Image bkgrndImage = Image.createImage("/bkgnd.png");
int rows = getHeight() / 16;
int cols = getWidth() / 16;
TiledLayer bkgnd =
new TiledLayer(cols, rows, bkgrndImage, 16, 16);
In this code example, the number of columns and rows are calculated based on the screen height and width and the desired size of each tile. This allows tiles to be rendered onto the screen in a predictable manner regardless of screen size.
At this point, an instance of TiledLayer has been created and the image has been partitioned into what are called static tiles. Static tiles are the visual elements used to create images using TiledLayer. In this example, the image height is 16 pixels and the width is 64 pixels. Since the image is smaller than the number of requested columns and rows, the image is repeated within the TiledLayer to fill all the requested tiles.
Managing Cells in a TiledLayer
To render different images, the static tiles are mapped to cells. A cell represents a specific square on the screen, defined within the TiledLayer boundaries. A cell is assigned a tile, allowing the static tiles to be arranged and repeated as desired. For example, the following code repeats tile 1 four times across the screen. The result is shown in Figure 5.
bkgnd.setCell(0, 0, 1);
bkgnd.setCell(1, 0, 1);
bkgnd.setCell(2, 0, 1);
bkgnd.setCell(3, 0, 1);
It's worth noting that in the setCell()
method the column and row indexes start at 0, whereas the tile index starts at 1.
In order to produce animated scenery, calls to the setCell() method can be made from within the game loop. Listing 3. shows how to change the scenery to give the appearance of the fish moving in relation to the scenery.
In Listing 3, each pass through the game loop adjusts the TiledLayer based on the key press states. This is captured by the influence variable. If influence is < 0, then the scenery is cycled to the right (giving the appearance of the fish moving to the left). If influence is > 0, the scenery is cycled to the left. Set influence to 0 and the scenery will stop when the user presses the up or down key.
In order to adjust the rate at which the scenery is adjusted, a shiftDelayFactor is introduced so the scenery is not updated on every loop. Adjusting the scenery can also take place in a separate loop on another thread to achieve a similar result. Figure 6 shows how the scenery looks underneath the fish.
Figure 5. Repeating Tiles: The image shows the tile in position 1 repeated four times.
Figure 6. Animated Scenery: The image shows how the scenery looks running below the fish.