Belén Albeza

Tilemaps in HTML 5 games

One of the things I'm working on at my new role at Mozilla is to create content related to HTML 5 game development in the MDN. We are several people doing this, and my first contribution has been helping to write articles and demos about tilemaps.

Tilemaps (or tiles) are a very popular 2D game development technique. It has been used since forever and it's still being used nowadays. The technique consists in building up a large image from smaller pieces called tiles.

Tiles are usually square or hexagonal, and the perspective is usually top-down / side view or (fake) isometric.

Here's a level of the original Spelunky, featuring square tiles on a side view:

Spelunky

Regardless if you want to use already-made tilemaps provided by your engine or implement your own from scratch, you might find these articles useful:

Take a look at the demos! They also showcase stuff like having a camera following a character, off-canvas drawing optimization, etc.