Tilemap Loader for HTML5 Canvas (EaselJS)

For the new game we’re working on, we developed a TMX tilemap loader and renderer to HTML5/Canvas (using the awesome EaselJS, from the CreateJS suite). Now we decided to share it with you (download link), since we haven’t found a similar one online.

Tilemap being edited on Tiled

Tilemap being edited on Tiled.

Disclaimer: Tilset by “Yar” (image found at OpenGameArt.Org)

We use the popular Tiled map editor (mapeditor.org), and the loader currently works for tile layers only, supports a single tileset (but it is easy to extend it to multiple ones). You just have to export the tilemap in JSON format (export -> json on Tiled). In the source code, we  included the JSON mapData at the end of the Javascript file, but you can easily load the map-files asynchronously as well.

Here’s the result on HTML5 Canvas:

HTML5/Canvas Tilemap loader

HTML5/Canvas Tilemap loader

The loader is free to use and modify. You can download the full source code for the sample above and have a go. If you want to say thanks, just include this in the credits:

  • Original tilemap load and rendering code by Erick Passos (CTO at Sertão Games)

17 thoughts on “Tilemap Loader for HTML5 Canvas (EaselJS)

    • You just have to change the bit that calculates the X and Y coordinates of the cell bitmap to something like this:

      cellBitmap.x = x * tilewidth;
      cellBitmap.y = y * tileheight;

      It’s much simpler than the isometric one that’s included in the sample.

      • Thanks for this quick response, and thanks for this tutorial, it works😀 (for the moment)

      • At the initLayers() function, this bit sets the tile size:

        var imageData = {
        images : [ tileset ],
        frames : {
        width : 64,
        height : 64
        }
        };

        You might change it manually there or modify the loader to get this information from the tilemap data (look at the JSON data in the end, and check for tilewidth and height at the tileset section)

      • Perfect ! , but i think my Json File have a problem, because in my browser, finally my image is not the same like the tmx file. I think differents pictures are confused. Have you any idea where the problem can be?

  1. I thought a good test for this would be to get it to load one of the default tileset that comes with Tiled. If you look in the examples folder there is a tileset called isometric_grass_and_water, although the image loads, the tiles look all wrong, any chance you can give it a go yourself?

    • I’ll take a look at it right now. I’ve probably used a contant (tile sizes) where I should have loaded from the tilemap data. Wait a few minutes and I’ll post a reply (and update the public file with the solution).

    • As I mentioned, there were some hard coded constants (a couple of 64’s while setting the tile size).

      I fixed and updated the downloadable code, including a second example (just uncomment a line in the beggining of the ‘renderer’ code).

      I used a personal example (not one from Tiled), because I had it at hand. It uses different sizes, so it illustrates that the code can load different tile sizes (including big tiles, with lots of transparency).

      I should work with any Tiled ISOMETRIC tilemap now (I’ll find some time to include the generalisation to rectangular tiles – it’s fairly trivial to fix – just look at lines 60-61, and fix for positive values only).

  2. I have it working with an orthoganal map now, the only thing is the tilemap has a black 1px line around each tile, although the tiles are 32×32 I can’t get them to sit exactly right, is there a way to account for this 1px or do I need to remove it from the tilemap?

    • Your tileset probably has a pixel offset between tiles (spacing and margin attributes).

      You might need to specify that while loading the tiles in EaselJS, although I haven’t seen a parameter to that at the SpriteSheet class.

    • If there’s no way to specify a spacing or margin in EaselJS spritesheets, you might need to fix the tileset, removing any spacing, and then re-creating the tilemap on Tiled with the new one.

    • Who’s creating your tilesets? There’s another post in our blog that shows how to create isometric ones with pixel-perfect alignment (from 3D objects).

      Since you’re using orthogonal maps, you might be drawing them by hand. Do they show this spacing in Tiled as well?

  3. To get it working with easeljs 0.7.1 in renderer.js, update line:

    createjs.Ticker.addListener(stage);

    to

    createjs.Ticker.addEventListener(“tick”,stage);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s