Using TileSets

A TileSet is a block of small images used to make up larger pictures. Many Games uses TileSets to display their graphics.

This is a TileSet designed for making Platform games. Each tile in the Image is 32 by 32 pixels in size. They are arranged in a block of 12x8 tiles.

To load a TileSet you can use the loadImage function to both load the Image and to say that it is comprised of 12 cells wide and 8 cells high.

you can then draw the individual tiles by calling drawImage and giving a number to say which tile image to use.

For example, the tileset has a flower at tile number 86;

To make a picture out of tiles you can assemble the tiles together in any form, in the example below we are drawing the tiles 52,0,1,2,2,2,4,5,55 in a row. Each tile is placed 32 pixels across from the last. The row of tiles is 32 pixels below the flower so it looks like the flower is growing out of the ground.

To harness the real poser of the TileSet, you can make a map of your world using the tile numbers.

Here we have the map stored as a list of rows, where each row is a list of tile numbers.

Now we can draw complex maps with just a few lines of drawing code.

To make the world even more interesting, we can add multiple layers