Images on the Canvas - HTML5 Canvas - page 143

will not actually cover the game-play portion of the code in this chapter because we
want to focus on using images to render the screen. In Chapter 9 we will create a simple
game using the type of examples shown here.
Defining a Tile Map
We will use the term tile map to refer to a game level or background built from a tile
sheet. Take a look back at Figure 4-7 —the four row by eight column tile sheet from
earlier in this chapter. If we were to create a maze-chase game similar to Pac-Man , we
could define the maze using tiles from a tile sheet. The sequence of tiles for our game
maze would be considered a tile map.
The first tile is a gray square, which we can use for the “road” tiles between the wall
tiles. Any tile that a game sprite can move on is referred to as walkable . Even though
our tanks are not literally walking but driving, the concept is the same. In Chapter 9
we will create a small game using these concepts, but for now, let's concentrate on
defining a tile map and displaying it on the canvas.
Our tile map will be a two-dimensional array of tile id numbers. If you recall, the tile
id numbers for our tile sheet are in a single dimension, numbering from 0 to 31. Let's
say we are going to create a very small game screen consisting of 10 tiles in length
and 10 tiles in height. This means we need to define a tile map of 100 individual tiles
(10×10). If our tiles are 32 pixels by 32 pixels, we will define a 320×320 game screen.
There are many ways to define a tile map. One simple way is to use a tile map editor
program to lay out a grid of tiles, and then export the data to re-create the tile map in
JavaScript. This is precisely how we are going to create our tile map.
Creating a Tile Map with Tiled
The program we are going to use, Tiled, is a great tile map editor that is available for
Mac OS, Windows, and Linux. Of course, tile maps can be designed by hand, but map
creation is much easier if we utilize a program such as Tiled to do some of the legwork
for us. Tiled is available for free under the GNU free software license from http://www
.mapeditor.org/ .
As stated before, you do not need to use this software. Tile maps can be
created with other good (and free) software such as Mappy ( http://tile
map.co.uk/mappy.php ) and Tile Studio ( http://tilestudio.sourceforge
.net/ ), and even by hand using MS Paint.
The goal of creating a tile map is to visually lay out a grid of tiles that represents the
game screen, and then export the tile ids that represent those tiles. We will use the
exported data as a two-dimensional array in our code to build the tile map on the
canvas.