Welcome to the next part in our ongoing Defold Game Engine tutorial series. Today’s tutorial is going to show an area where the Defold engine really shines, creating 2D tile based levels. This way of creating levels is to paint levels in a data structure called a tilemap, which itself is a collection of tiles. A tile is simply a portion of an image that can be drawn over and over, much like you could use Lego blocks to create a castle.
As always there is an HD video version of this tutorial available here.
For this tutorial we need a tileset to work with. This is simply an image composed of tiles, in this case with no spaces or padding between them. I personally am using the tiles from opengameart.org in the Free Platformer Game tileset. I have taken these individual tiles and merged them together into a single image you can download below. (Be sure to click the image to get the full sized version. In this example size does matter! ).
This is a 1024×512 pixel image composed of 64×64 pixel tiles. Of course you can use whatever image you want, just be aware that if there is padding or different sized tiles your version is going to be different.
As always I assume you have gone through the prior tutorials in the series. Alright, now that we are set up, let’s get going.
Creating a Tile Source
First things first, we need to create a directory for our level, tiles, images, etc. I simply created a folder called level. Inside this folder I created a directory called images and dragged the image above into that folder, like so:
Now we need to create a tile source. You can think of this as the palette or selection of tiles we are going to paint with. Don’t worry, it’s exceedingly easy. Simply right click level, select New->Tile Source File
Called it tiles.tilesource like so:
Now in Outline make sure Tile Source is selected:
Now in the Properties panel, select the image file we added earlier for the Image property, then set Tile Height and Tile Width to 64. Obviously if you used a different image you may have different settings here.
Now in your viewport you should see your tiles, with the grid drawn nicely around them like so:
All done creating our tilesource. Make not of the collision property… we will come back for that in the next tutorial. Make sure you save.
Creating a Tile Map
Now it’s time to actually create our tile map. Once again right click the level folder and select New->Tile Map File. Name this one map.tilemap:
Now in Outline make sure Grid is selected:
Now in the properties, pick out tilesource:
Now select layer1 in the outline window and we can begin painting!
In the viewport use the spacebar to bring up the tile source, then left click to select the active tile. Now hit space again to hide the tile source and paint using the left mouse button. You can also use the right mouse button to select multiple painted tiles to easily clone and reproduce compound tiles.
If you need to paint tiles on top of other tiles, simply create another layer, right click Layers and select add:
The z order determines the draw order of tile layers:
Right click an empty space then left click to delete a tile if required. Save before continuing on!
Using a Tile Map
Finally it’s time to put our newly created tilemap to use. This is also simple. Open your main.collection in the editor then add a new game object just like we did in the past. Right click the game object and select Add Component From File:
Select your .tilemap file, and voila: