Tilemaps in HTML 5 games
| Tags: game development front-end
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:
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:
- Tilemaps
- How to implement static square tilemaps with the Canvas API
- How to implement scrolling square tilemaps with the Canvas API
- Live demos and their source code
Take a look at the demos! They also showcase stuff like having a camera following a character, off-canvas drawing optimization, etc.