How to make a rpg game with phaser and html5 tutorial 2

Exporting our tile set

Now that we have built our basic map. Let’s export it in a format which we can use in phaser. Follow the following instructions from your tiled application. If this isn’t clear don’t worry I will post a video which demonstrates this.


Click File -> Export As -> Choose the JSON file export and save the level in your Phaser project folder under a folder called levels. Your project folder structure should look something similar to this.

Phaser folder structure for our rpg game
Phaser folder structure for our rpg game

The map data explained

Just to explain further open up your map json file in your favourite text editor and take a look at the data provided. The first field you might see is “height” in or case this should have a value of 64 as when we were creating our map we chose 64 x 64 tiles. The next data point you will see is layers and under that data with a whole long list of numbers. These number represent the tile number in our tiles.png which we used to create our tilemap. Essentially what phaser would do is read the data and match it back to a tile number. The data you see is the dimensions of our map you should see 64 x 64 values. You will also see there is a set of these for each layer we created in tiled.

Start up code

Lets take a quick re look at our file and folder structure. This is what you should end up with by the end of this tutorial.

Folder structure for this tutorial
Folder structure for this tutorial

Our index.html file


<!DOCTYPE html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<style>
 body {
 padding: 0px;
 margin: 0px;
 background: black;
 }
 </style>
</head>
<body>
</body>
<script type="text/javascript" src="js/phaser.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>

Our main.js.


preload: function() {
this.load.image('tilesetimage','images/tiles.png',128,128);
this.load.tilemap('tilemap','levels/level1.json',null,Phaser.Tilemap.TILED_JSON);

},
create:function() {
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

var map = this.game.add.tilemap('tilemap');
map.addTilesetImage('tileset','tilesetimage',32,32);

ground = map.createLayer('Ground');
ground.resizeWorld();

}

Possible errors you can encounter and their solutions

“tileset image tile area is not an even multiple of tile size”

We need to make sure our tileset image is correctly sized in order for Phaser to interpret it correctly. The tile set image needs to be a multiple of your tile size. For example if we have a tile size of 32. Our tileset image may need to be 32×32, 64×64, 128×128 pixels.

“tileset image loading issues”

It’s always good to check your json in this section to see if you tileset image is pointing to the right place and the name of the tileset is corresponding to your Phaser code.

Tileset loading errors solutions
Tileset loading errors solutions

Some other errors relating to tileset naming. Do not for example use the same key in loading your tile image and the same again when adding the tilesetimage

Explanation of the code

We load our tileset image:


this.load.image('tileset','images/tiles.png',96,128);

We load our level1.json


this.load.tilemap('tilemap','levels/level1.json',null,Phaser.Tilemap.TILED_JSON);

The first parameter is our tilemap key, second the path to our json map file, third is where you can directly pass string data instead of a file, so here we make it null. fourth is a special identifier to help us load tiled map data.


var map = this.game.add.tilemap('tilemap');
map.addTilesetImage('tileset','tilesetimage',32,32);

We add our tile map to the scene and add our tileset image. In the addTilesetImage function we pass the tileset id we created in our preload function, then the name of the tileset in our level1.json and then the width and height of our tiles.

Next we create one of our layers by passing in our layer name from our level1.json

ground = map.createLayer('Ground',32,32);

You should have something like this now at the end of this tutorial, in the next tutorial we will add some more layers and create the collisions.

Canvas with our ground layer loaded for our rpg game
Canvas with our ground layer loaded for our rpg game

The live video where we code this tutorial:

Comments 4

Leave a Reply

Your email address will not be published. Required fields are marked *