Friday, August 10, 2012

More GPU Tile map demos (Zelda)

I published these on Twitter and Google+ a little over a week ago, but felt they were worth posting on the blog as well!

So if you recall from my previous post I mentioned that the tile map technique allowed for really REALLY big maps. How big, exactly?

How about big enough to store the entire NES Legend of Zelda overworld...
and all of the dungeons...
and the second quest overworld...
and all of it's dungeons...
all in a single massive map!

(The effect is best when you zoom in and out with the mouse wheel to get the full scope of what's being rendered.)

And THAT is a small map. Seriously, here's the two images that make it up (original size):

The main map file (dark one on top) is 512 x 325, and you could easily fit a 2048x2048 texture onto any WebGL capable device, so that's a lot of room to spare. If you wanted to you could fit this map, plus every map from Mario 1, 2, and 3, plus Metroid's map, plus a few more to boot into a single gigantic map and still have room to spare on any desktop machine!

So yeah, big.

(Yes, the sprite sheet would have to be pretty large at that point, possibly split into several different sheets, but it's still very workable.)

Just for fun I also did a version with the two overworlds from Link to the Past too:

This one is slightly smaller but has a much larger sprite map for comparison.

These were both created by stitching together some really large PNG files that I then pushed through a small HTML utility I cooked up (That link won't show anything, but the source is the interesting part). It essentially would blit 16x16 tiles from the large PNG into a canvas, generate a hash based off the image data, store unique tiles in the sprite sheet with the appropriate offsets in a table, and then write out the appropriate pixel value to the map canvas as it goes. Simple and effective.

I've actually got a few other ideas that I want to pursue with this now, but I'm not sure how well any of them are going to work. I'll post things as I can. In the meantime I've been thrilled to see a couple of other developers grab the idea and run with it, with the code being successfully "ported" to both XNA and Unity!


  1. brb picking my jaw off the floor.
    this is so very cool :) loads of potential here.

  2. Hey Brandon,

    This method looks awesome! I'm actually going to try and see if I can't make a Link to the Past clone using it. I decided to use the Green and Alpha channels for collision and interaction information. Anyway, my question is: is there any way to squeeze more fps out of this method? Currently I can't peak above 20 fps.

    Any ideas?


    1. Hey Brandon,

      Just as an update I have been trying to convert this method to THREE.js as the shader for a "THREE.ShaderMaterial" and have met with some issues. I am so close to finishing I can taste it, just can't figure out this last issue. If you have time to look at my StackOverflow question I would appreciate it. I have documented my progress on the question so make sure to read the entire thing.