This is the second portion of a two part series of tutorials about how to use Tiled with Kiwi.JS. In this part we are focusing on how you can use a Tiled JSON to create a Tilemap in Kiwi.JS.
You can view Part One of the series for information about how you can use Tiled in general.
Requirements
In order for you to complete this tutorial you are going to need the following assets. If you came here from part one then you should not need to worry about the first two as you should already have them.
- A Spritesheet/Tileset containing graphics on for your Tiles.
- A JSON file generated through Tiled.
- Kiwi.js version 0.6.0
Create a new HTML File
To start this tutorial off you will need to firstly create a new Kiwi game using 0.6.0 of Kiwi.JS. I will not go into details here of how to do that here but if you need a refresher of how to do so there are some good tutorials on how to so here.
Once you have done some make sure you have a preload and a create method on the state you are going to use. Also move your tilemap.json and tileset.png files next to the HTML file you’re working in (or make them easy to locate through your code).
Loading the Assets
The first step in any Kiwi game is loading in the assets required by the game in the preload method of a State. Now this doesn’t change at all with Tilemaps. You are going to have to load in both the Tilemap and Tileset assets.
|
1 2 3 |
this.addJSON( 'tilemap', 'tilemap.json' ); this.addSpriteSheet( 'tiles', 'tileset.png', 48, 48 ); |
Because you might have multiple tilemaps or other gameobjects that use the same graphics as the ones you use for your Tiles, Kiwi requires that load them independently of each other.
Creating a Tilemap
Now that we have loading the assets, the next step is to move to our create method on the state and we create a new TileMap GameObject.
|
1 |
this.tilemap = new Kiwi.GameObjects.Tilemap.TileMap( this, 'tilemap', this.textures.tiles ); |
The above is all you need to create a new TileMap GameObject that use’s the ’tilemap’ json and the ’tiles’ spritesheet. The width/height, tilesizes and number of tiletypes that the new tilemap has is all received (or calculated) through the JSON File you provide.
Rendering/Adding to Stage
Now that we have our TileMap GameObject created, the next step to do will making our TileMap render.
Usually in Kiwi in order to make a GameObject render, you add it to the stage as a child (using the addChild method). And with Tilemaps the same is true BUT instead of adding the TileMap to the stage you add one of its ‘layers’ instead.
|
1 2 |
this.addChild( this.tilemap.layers[0] ); this.addChild( this.tilemap.layers[1] ); |
When we created our TileMap JSON in part one, we created our TileMap to have TWO layers, and so the new TileMap we created will have TWO layers also. So in order for them to render we need to add each one to the stage.
Why do I need to add them individually? Well the reason we have implemented it this way is because when you are creating your game you may want to have a character appear in the middle of two layers. And so this way is the most flexable while creating your game.
Complete
And that is it all done! You should now have your Tilemap appearing in your Kiwi game.
What does it mean by saying “you may want to have a character appear in the middle of two layers”?
Sorry if the statement “in the middle of two layers” doesn’t make sense.
What it is suppose to communicate is that you have to add the tilemaplayers individually because the order in which they are added the Stage affects the order in which they are rendered (aka the z-depth).
For example: If you have a game where you wanted one tilemaplayer to function as the background, a second tilemaplayer as the foreground and a character which is to be rendered in-between the background and foreground layers, then the order in which you would have to add them to the Stage would be ‘background’, ‘character’ then ‘foreground’.
Hope that makes sense