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:
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):
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)!