In this two part tutorial we are going to have a look into the new TileMap system we have in Kiwi. More specifically we are going to focus on how you can create a TileMap using Tiled and then how you can use that TileMap in Kiwi.js.

In this first section of the tutorial we are going to focus on creating a Tiled map and Part Two will focus on using the TileMap that we create in Kiwi.

Tiled?

Now if you haven’t already heard of it (which you probably have by now), Tiled is an awesome map-editor allowing developers to easily create Tilemaps for use in their games. It is free, easy to use and Kiwi supports it! Now since this tutorial is focused on using it, you need to make sure you have it downloaded, installed and ready to go.

 

Tiled: Creating a new Map

To start this tutorial off, the first thing you have to do is create a new Map. To do this go to File in the top left hand corner and press New…. When you have done so a pop-up window (like the image below) should appear asking for some settings. For this tutorial I am going to use settings below.

Settings

• Orientation: ‘Orthogonal’ is currently the only Orientation that Kiwi supports. Although don’t worry, we do plan on having ‘Isometic’ Tilemaps sometime in the future!
• Layer Format: Choose any. In the next step we are going to save it as a JSON file.
• Width/Height: 18/6 is the size we are going to use for this tutorial.
• TileWidth/TileHeight: 48px by 48px

Once you have the settings you want click ‘OK’ and your new map should have been created.

Saving as JSON

What we need to do next is save our tilemap in a format that Kiwi can understand. To do this go back to your new map a go File and click Save As…. Another pop-up window should have just appeared asking where you want it to be saved. Choose a location that is suitable for you and make sure you change the type of file to JSON, otherwise Kiwi will not understand the format and will not be able to load in the tilemap later. Click ‘SAVE’ and we now have a tilemap that can be used in Kiwi.

Adding Tiles

Our tilemap is a little bit boring without any tiles on the map, so we in this step we will add a new ‘Tileset’ and create some ‘Tiles’. If you don’t want to create some tiles of your own, or don’t have any graphics to use you can download the images I am going to use below.

 

Tilesets

In Tiled, graphics/spritesheets that are used by Tiles are know as ’tilesets’. They are like Tiled’s version of Kiwi TextureAtlas’s. Now to create a new Tileset in Tiled you go to Map -> New Tileset. A pop-up should have hopefully appeared asking you for some information about the new Tileset.

If you have downloaded and are going to use the same tileset graphic as I using, then for the image then choose ’tileset.png’ and give it an appropriate name. The other settings for the graphics are listed below. Once you have the right settings press ‘OK’.

• Tile Width: 48px
• Tile Height: 48px
• Margin: 0px
• Spacing: 0px
• Drawing Offset: 0px

If you don’t have the ‘Tilesets’ panel then you can open that panel by clicking ‘Tilesets’ under the View tab.

Hopefully you should now see the ’tileset.png’ that we used in the ‘Tilesets’ panel. Notice that it is broken up into 48px by 48px slices? That is because each slice is now a valid type of tile you can use on your Tilemap!

Adding Tiles

Now adding tiles in Tiled is easy. All you have to do is click on one of the tile pieces in the ’tilesets’ panel. The tile you clicked on should be now be blue, and you can then just click on an area on your Tilemap. You can add as many of a single type of tile as you want (well, as long as your map has that many spaces)! So have a play and start creating a TileMap.

A few useful common tools appear in Tiled, like the eraser and fill tools which you should make the most of!

Layers

At this stage our map is looking good, but it needs some objects that our player can move over the top of. So we are going to add some Sandbags and Tank traps to the scene. Go to Layer -> Add Tile Layer.

You should now have two layers in the Panel, with ‘Tile Layer 2′ selected. Rename the layers to be more appropriate. I used the name ‘Ground’ for ‘Tile Layer 1′ and ‘Objects’ for ‘Tile Layer 2′.

Now with the ‘Objects’ layer selected you can add some sandbags, tank traps and barbed wire tiles around your map. You can even place these tiles over the top of the tiles on the ‘Ground’ layer if you want, but it may just look a bit off.

Conclusion / Next Step

And that is all for this tutorial. You now should understand the basics of Tiled and can start quickly creating Tilemaps for use in your game.

If you are wondering what to do from here then view Part Two which continues from this tutorial and shows you how to use your Tilemap with Kiwi.

Otherwise leave us a comment about this tutorial and thanks for reading