In this tutorial we are going to take a look at how we can create a TileMap in Kiwi, using only code.
Requirements
In order for you to be able to complete this tutorial, you are going to need to have some graphics that you would like to use for your Tiles. You can download the set of tiles I am going to use below.
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 on the tutorial page of the website.
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 tileset.png graphic next to the HTML file you’re working in (or make them easy to locate through your code).
Firstly: Preload Graphics
The first step in this tutorial is to preload the graphics which we are going to use. Make sure you remember to put this code inside the preload method of the State you are going to use.
|
1 |
this.addSpriteSheet( 'tiles', 'tileset.png', 48, 48 ); |
Create the Tilemap GameObject
Now that we have the Tile graphics loading into our game, the next step is to create a new TileMap GameObject inside of the create portion of our State.
|
1 2 3 4 5 6 7 8 9 |
this.tilemap = new Kiwi.GameObjects.Tilemap.TileMap(this); /** * Param 1 - Width of a single tile. * Param 2 - Height of a single tile. * Param 3 - Width of the whole map - in tiles. * Param 4 - Height of the whole map - in tiles. */ this.tilemap.setTo(48,48,17,6); |
Let me explain what the code above does. The first line will create a new BLANK Tilemap. Because usually you create a TileMap through JSON when you instantiate the TileMap GameObject, not passing any means that the TileMap will not contain a single TileMapLayer.
The second step we do is execute the setTo method. This method is used to set-up the properties needed on a TileMap and also the default properties of ANY TileMapLayer created on this TileMap.
The size of the Tiles in our TileMap are 48px wide by 48px high, and the dimensions of map are 17/6 tiles.
Create the TileTypes
Now that we have created our TileMap, the next step for us to do is create a few different Types of Tiles.
|
1 2 3 4 5 |
this.tilemap.createTileType( 0 ); this.tilemap.createTileType( 1 ); this.tilemap.createTileType( 2 ); this.tilemap.createTileType( 3 ); this.tilemap.createTileType( 4 ); |
There are a few different methods located on TileMaps to create new TileTypes on a TileMap, but the one we will use is named createTileType. This method is used to create a single new TileType that uses a cellIndex provided.
So the first TileType we created will use cellIndex 0, which is the first cell in our Tileset image. The second TileType use’s cellIndex 2, which is the second and so on.
TileData
Now that we have a few new TileTypes created on our TileMap, we can now create the data which is used to describe which Tiles are to be used in which locations.
|
1 2 3 4 5 6 7 8 |
var tilemapdata = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 3, 3, 3, 3, 4, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; |
What we have done above is created a single dimensional array, which describes a basic TileMap, that we will use when we create a TileMapLayer. The reason this needs to be a single dimensional array is because that is how the data is stored on TileMapLayers (which we will create in the next step).
Each number in this array is a reference to a particular TileType stored on our TileMap. ZEROS are used to describe spaces where there are no Tiles (Every TileMap automatically has a TileType of ZERO created). Where as ONE refer’s to the first TileType that we created, which is the one that will use cellIndex 0 of our SpriteSheet.
Creating the TileMapLayer
The final step in creating our TileMap, is to create a TileMapLayer and add it to the State so that it will be rendered.
|
1 2 3 4 5 |
//Create a new TileMapLayer this.tilemap.createNewLayer( 'Ground', this.textures.tiles, tilemapdata ); //Add the Layer to the State to be Rendered. this.addChild( this.tilemap.layers[0] ); |
When we create a new TileMapLayer we need to create it through our TileMap using the createNewLayer method. This method accepts THREE parameters, the first of which is a name for the Layer you are creating.
The SECOND parameter is a texture that the Tiles should use when this TileMapLayer is being rendered. We have used the SpriteSheet we loaded in the first step.
We then have passed the tilemapdata that we created in the step above, because that holds the of the information about the map.
And lastly we added the layer we just created to the State to be rendered.
Take Note!
TileMaps can have contain as many Layers as you would like, and if you want them to have different dimensions than your TileMap then try have a look at the createNewLayer method on api.kiwijs.org.
Conclusion
And you can now pat yourself on the back because you should now have a TileMap created and rendering in your Kiwi Game.
And like always, if you are stuck or need help then comment below/contact us or use the forum and we will reply to you ASAP!
Have fun!
Recent Comments