I'm working on a new Phaser HTML5 game right now, which is using tilemaps for the levels. But I decided to write a tutorial about tilemaps way before starting working on the game, so here it is:

A tile engine is a computer graphics technique which generates a larger graphic from re-using a number of smaller graphics to save RAM and increase real-time rendering performance. Source

I will use JSON for tilemaps and Tiled to create them. CVS is also a supported format, but I prefer JSON.

Some examples for tilemaps:

Lets start with the editor:

An editor will let you create a tilemap from one or more images which we call tilesets. Tileset is an image like this: 

undefined

A tile can be square or rectangle.

Some of the best editors:

Browser based tilemap editors (no download required):

Lets see how to use Tiled:

After you are done installing, open it, then press File -> New...

undefined

For simple 2D tilemaps choose from drop down option what I choosed above.

First set the Tile size (this means the size of one piece of tile). Be sure to add correct values, because after you started drawing the tilemap you can't change the size of the tiles or the whole map size..

Then set the Map size, which will be in tiles*tiles.

After you pressed OK click on Map -> New Tileset... Add your tileset file (preferably PNG image) then give it a simple name.

Before start drawing enable Grid by clicking on View then checking Show Grid:

undefined

As far as I know Phaser doesn't support multiple tile layers at the moment, so I will not talk about it now.

After you draw your tilemap export it as JSON.

Put it to your game folder and preload it along the PNG tileset file:

        this.load.image('tileset', 'assets/tileset.png'); // loading the tileset image
        this.load.tilemap('map', 'assets/tilemap.json', null, Phaser.Tilemap.TILED_JSON); // loading the tilemap file

After preload put this in your Create function:

        map = this.add.tilemap('map'); // Preloaded tilemap
        map.addTilesetImage(tileset'); // Preloaded tileset
        layer = map.createLayer('Tile Layer 1'); // This is the default name of the first layer in Tiled
        layer.resizeWorld(); // Sets the world size to match the size of this layer.
        map.setCollisionBetween(0, 100); // If you use 'collide' function with the layer, then the tiles from the first (ID 0) tile till the 100th element will collide with the other sprite

This is how to debug the tilemap:

	layer.debug = true;

Now our tilemap is loaded and visible we can add a sprite, so we can interact with it:

        player = this.add.sprite(10, 10, 'spriter'); // Adding a player sprite

If our tilemap is bigger than the actual canvas size, then we have to set a 'camera' on our player character. There are 5 different types of camera follow types:

  • Basic followthis.camera.follow(player);
  • Lockon: this.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON);
  • Platformer: this.camera.follow(player, Phaser.Camera.FOLLOW_PLATFORMER);
  • Topdown: this.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN);
  • Topdown tight: this.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN_TIGHT);

This is how the basic follow looks like:

undefined

If we have the character then we are ready to make it interact with the tilemap. If we defined our 'setCollisionBetween' function, then we are ready to make our character walk/jump on it.

We add a control function like this:

function controls(){
if (cursors.up.isDown)
    {
        if (player.body.onFloor())
        {
            player.body.velocity.y = -200;
        }
    }

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -200;
    }
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 200;
    }
}

But of course we have to allow physical body for the player sprite:

        this.physics.arcade.enable(player); // Enabling arcade physics on player sprite

Now add this to our 'Update' function:

	this.physics.arcade.collide(player, layer);

One more thing... If we want a function to run if our sprite collides with a specific tile element (for example with tile ID 255), the we have to use this function (in 'Create'):

map.setTileIndexCallback(255, this.awesomeEvent, this);

And we are ready! Now we have a sprite which can do anything on the tilemap. This is almost enough to make a nice platformer game :)

If you have any question ask it in the comment section below. 

Follow me on Twitter for games and tutorials: https://twitter.com/SvejkGames