How to Create Tiles in Your HTML5 Game - dummies

How to Create Tiles in Your HTML5 Game

By Andy Harris

A tile-based world is a technique used in HTML5 games to provide interesting flexible backgrounds without huge memory costs. The basic idea is to take a number of small images and use them in combination to build a complete background image.


Typically, you’ll build a tile object, which contains a number of small (32 x 32 pixel) images. Each tile object can display any of the images on command. This scheme has a number of interesting advantages:

  • Memory requirements can be very small. Each image loads into memory only once, so you can create a very large world with a small memory footprint.

  • You can use many different tiles. You can build an extremely complex world with any of the beautiful tile sets you can download from sites like

  • The map is dynamic. The image displayed in each tile can be modified at runtime.

  • Tiles can have gameplay effects. You can use tiles to create interesting tactical situations, like water that cannot be crossed or mountains that give an advantage to a defender.

  • Maps are simply arrays of integers. To store a tile-based map, you don’t need to store the tiles at all. Instead, you simply keep track of the tile states.

  • Maps can be much larger than the screen. A tile map can be any two-dimension array of integers.

  • Scrolling a tileset is simple. It’s easy to make large scrolling worlds with a tile system, because the display is separated from the data. The tiles themselves rarely move.

  • Tiles are suitable for multiple game types. Tiles are frequently used for role-playing games, as well as board games, tactical games, and side-scrolling platform games.

How to create a Tile object

The Tile object is the foundation of tile-based maps. Here’s code for a simple tile prototype:

 var GRASS = 0;
 var DIRT = 1;
 var WATER = 2;
 var NUMSTATES = 3;
 function Tile(){
  tTile = new Sprite(scene, "grass.png", 32, 32);
  tTile.state = GRASS;
  tTile.images = new Array("grass.png", "dirt.png", "water.png");
  tTile.row = 0;
  tTile.col = 0;
  tTile.setState = function(state){
   this.state = state;
  } // end setState
  tTile.getRow = function(){
   return this.row;
  } // end getRow
  tTile.getCol = function(){
   return this.col;
  } // end getCol;
  tTile.getState = function(){
   return this.state;
  } // end getState
  tTile.checkMouse = function(){
   if (this.isClicked()){
    newState = this.state;
    if (newState >= NUMSTATES){
     newState = 0;
    } // end if
   } // end if
  } // end if
  return tTile;
 } // end Tile constructor

The most significant part of a tile is its multi-state nature. It has multiple states. Each state displays a different image. Here’s how to write it:

  1. Prepare your images.

    The most visible parts of the tile-based system are the various images. Build or obtain (with the necessary permissions, of course) some tiles you can use.

  2. Build constants for the states.

    The easiest way to work with states is to assign constants for them. Constants have the advantage of being easily readable by humans and straightforward integers to the computer.

  3. Build a standard sprite.

    The tile is still essentially a sprite. It doesn’t typically move, so you can set its speed to 0. Use any of the sprite images you want as the default.

  4. Assign a default state.

    The state property is the most important aspect of a tile. It indicates which state the tile is currently displaying. The state value should always be one of the state constants.

  5. Create an array of images.

    Each tile will have access to all the possible images. Store them in an array. Make sure the array order lines up with the constant values.

  6. Set a row and column.

    Tiles are usually placed in a two-dimensional grid, so it can be very useful to track the current tile’s row and column.

  7. Add a setState() method.

    This method allows you to easily change a tile to any of the state values. Use a constant to assure the state is recognized by your tiles. The state property is modified to reflect the current state, and the image is also changed, so the correct image will display on the next update.

  8. Provide data retrieval techniques.

    These functions return the row, column, and current state of the tile.

  9. Allow an editing behavior.

    The checkMouse() method determines whether the tile has been clicked. If so, the state is incremented and the new state is displayed.

How to build a game map from tiles

Each tile is a powerful tool, but the real power of the tile-based structure is how tiles are combined to create a complete map. The tileset is a two-dimension array of tile objects. Like most two-dimension arrays, it’s normally managed by a pair of nested loops. Here’s the code for setting up the tileset:

 function setupTiles(){
  tileset = new Array(ROWS);
  for (row = 0; row < ROWS; row++){
   tRow = new Array(COLS);
   for (col = 0; col < COLS; col++){
    tRow[col] = new Tile();
    xPos = 16 + (32 * col);
    yPos = 16 + (32 * row);
    tRow[col].setPosition(xPos, yPos);
    tRow[col].row = row;
    tRow[col].col = col;
   } // end col for loop
   tileset[row] = tRow;
  } // end row for loop;
 } // end setupTiles

There are only a few points to keep in mind here:

  • The tileset is an array. Each member of the tileset array is actually a row. Build an array of length ROWS.

  • Step through each row. Use a standard for loop to step through all the rows.

  • Each row is an array of length COLS. A two-dimension array is actually an array of arrays. Make an array of length COLS for each row.

  • Step through the columns. Make a for loop that happens once per column. You now have two counting variables (row and col), which together describe the position of each tile in the two-dimension structure.

  • Create a new tile. Simply use the tile constructor to build a new tile.

  • Set the tile’s position. You can multiply the row and column by the width and height of the cell to determine a rough placement.

  • Assign the row and column data to the sprite. Simply copy the row and col data to properties of the sprite.