HTML5 Map Tile JavaScript Game Engine, Part 1
Posted November 29th by Jay Crossler in Code, Games, iPhone, Maps, Web
What Inspired Me
Check out the video that got me interested in writing a game library:
Isogenic allows millions of map tiles to render very quickly by drawing onto an HTML5 Canvas tag, and allows both 2d top-down and side-scrolling games. The great thing is that it renders incredibly fast – 60 frames per second even with a large amount of data. You can put images on top and have them animated with incredibly complex interactions. Wonderful stuff, and you can still sign up for the beta.
And here’s an image of it:
As I started working on this, the Isogenic Engine code wasn’t available, so I looked around for similar tools. John Graham has a 2D Tile Engine that uses HTML5 Canvas that he’s using to teach some advanced JavaScript concepts. Very cool, thought it’s nowhere near as advanced as the Isogenic Engine (but great to learn with if you go line by line!). Here’s a link to his demo, and source code. All the code that I will use in the rest of this article series is based on this TileEngine project – John was nice enough to give me permission to build upon his code and post it online. I’m using this as a hold-over until I can work on the Isogenic engine, and have already learned some useful concepts and JavaScript efficiencies.
The TileEngine Painter
I’ve posted all the source code (zip and GitHub) and a working example for this here. It works both on iPad, iPhone, and mostly well on Android (rendering works well, but some of the events are a bit off).
In order to demonstrate the map tiles, we’re using a free/open-source spritesheet. This makes the images look quite “8-bit”, but if you make your own map tiles or use physical map tiles like those from Google Maps), you can get much better looking graphics. There are many techniques to speed up web sites and apps, though I won’t go into them here – take my HTML5 class if you’re really interested – and the one we’ll focus on is sprites. Loading many images using the web is very inefficient, as there’s an entire HTTP round-trip request for each. It’s much more efficient to group many small images into one larger image (called a spritesheet in the video game world). Here’s the spritesheet we use for the base image (it’s a transparent PNG, so can render on top of other images):
The tiles.png spritesheet is broken up into many smaller sprites (each 32×32 pixels), so that if we want to show a piece of green grass in the top left corner (map position 0), we can just draw tile #71, and the JavaScript grabs the correct sub-piece of the image and draws it in the right place.
Here’s what a starting map looks like based on a pre-formatted array in the game.js code:
I’ve modified John Graham’s code so that we can have multiple layers of images that all can be drawn on top of each other for more complex world building.
To draw your own maps, click (or touch on an iPad) the paint layer box in the bottom left, and the drawing palette will expand). Select the layer you want to draw on, then touch the tile you want then paint it onto the map. You can have many different layers – though I’ve found that on iPads, you hit the memory limit for a page after about 5 layers. The great part is that it’s all written in JSON, so you can sync your changes up to a server and with other players (though that’s not built yet).
Some of the neat changes I added to this are:
- A “dirty bit” = a boolean that records if the tiles have been edited or not, this way only the canvas needs to be redrawn if there are any changes, not on each game loop
- Multiple layers, so you can have many layers and spritesheet images associated with each
- A “painter.js” object that lets you paint and change the data model of objects that are associated with each tile
- Some iPad and iPhone specific CSS and META tags that allow for mousepress and mouse drag events on the iOS devices
Here’s the Game Loop that one would use to build a game into – notice that it’s constantly running at 2fps (it can be much faster), and redraws the
The current version doesn’t yet save the maps you draw back to JSON, but that’s working in version 2 (which I’ll post about soon)!
Nick Dunn
December 1st, 2010
Very cool stuff – you got cut off towards the end though. “Here’s the Game Loop that one would use to build a game into – notice that it’s constantly running at 2fps (it can be much faster), and redraws the”
Looking forward to part 2
Rob Evans
January 14th, 2011
Even though it says it’s running at 2fps, when I’m using the test in Version 2 I can paint tiles at very high speeds. 2FPS would generate a lot of lag… but this looks super smooth. Are you sure it’s updating that slowly?