Embedded Files
00 -What will you learn in this part?
In this part, you will learn:
How to paint and erase tiles
How to use layers and manage their z values
How to set up the correct size for your tilemap
Download the project: Part 1
01 – Learning the Basic Painting Method
Let’s go back to the tilemap resource, normally named `fields_tilemap`.
You’ll notice there is a grid view area, this is where we’ll paint our tiles and an outline area, this is where we can add and manage layers.
So, how do we paint?
First, you need to choose the layer you want to paint on, click on layer1, which is the default layer created automatically.
Then, go back to the view: you’ll notice a tile now follows your cursor. If you left-click (or hold left-click), you’ll start painting tiles on the grid.
That’s awesome! But how do we change the tile we want to paint?
Just press the spacebar, the entire tilesource will appear, letting you pick the tiles you want to use. You can even select more than one!
If you want to paint with a single tile, just click on the one you’re interested in.
If you want multiple, click and drag over the tiles in the tilesource. When you release the click, you’ll be able to paint again with your new selection.
Let’s go a bit further! You can also select what you’ve already painted and use it again, super useful!
Just hold the Shift key, then click and drag over the area you want to reuse.
If you want to go back to painting with just one tile, simply hold Shift again and click on a single painted tile to select it.
Maybe you’re wondering how to erase? You already know the shortcut!
Just hold the Shift key and select an empty cell, this will switch you to erase mode.
You can also select multiple empty cells if you want, and the size of your selection will become the size of your eraser brush.
There are also more shortcuts!
Go to the toolbar panel and select Edit, you’ll see some functions related to the tilemap. At the bottom of the panel, you’ll also find other shortcuts, like flipping or rotating your brush.
So, you’ve learned how to paint, but you’ll probably also need to manage layers.
In the outline area, you’ll notice we currently have a layer called layer1.
If you look at the bottom of the panel, you can see some properties like:
Id: the name of the layer
z: the depth index (controls the rendering order)
visible: a checkbox to set whether the layer is visible or not
To create a new layer, right-click in the outline panel and select Add Layer and a brand-new layer will appear!
Now select the new layer and paint some tiles on top of another tile. You’ll see that your tiles are drawn behind the ones on layer1. Why? Because we didn’t set up the z value, so Defold just draws layers from bottom to top.
If you want to control the draw order, simply select the layer you want to change and assign it a higher value than 0.0. The higher the value, the closer to the top the layer will be drawn.
02 – Painting Our Tilemap
Okay, now delete all layers and tiles, then create just one layer and name it "ground".
The first thing I like to do is place some tiles in the four corners of the size of my game.
To know where to put them, simply divide the native resolution of your game by the size of a tile. Here, our native resolution is 640x360 and the tile size is 18.
X position: 640 ÷ 18 ≈ 35.5 → round to 36
Y position: 360 ÷ 18 = 20
So we’ll place tiles at:
0,0 for the bottom-left
0,20 for the top-left
36,0 for the bottom-right
36,20 for the top-right
Next, let’s paint some grass tiles and make sure not to draw outside our defined limits.
Then, add some variation by including a few ground tiles as well.
Create another layer and name it "ground_details", then set its z value to 0.01.
Now, let’s draw some small grass details on the new layer.
Next, draw the boundary of where the plants will be in our garden. I decided to make a rectangular limit near the middle, which I achieved by rotating the tile.
I selected this tile so I could draw the garden boundary.
Next, add another layer and name it "plantable_ground". Set its z value to 0.02.
⚠️ Important: This layer will be used in the next lesson to define where plants can be placed.
Select tile 117 and draw it along the boundary you created earlier.
Next, add another layer and name it "decoration", then set its z value to 0.1.
Select tiles 21 and 27 together to create a full sunflower, then paint them around the garden.
Afterwards, erase any unnecessary tiles that fall outside the garden boundary.
Add another layer and name it "vegetables",this is where our plants will go.
Set its z value to 0.2.
Then, draw some carrots, pumpkins, and turnips.
Don’t add anything else for now, as the next lesson will focus exclusively on these plants.
Finally, add one last layer and name it "foreground", then set its z value to 0.5.
And feel free to draw some trees at the bottom of the garden for decoration.
And voilà! That was a big part to complete. Feel free to add more details and create something you love.
For reference, I ended up with this setup, so you can draw inspiration from it or check the final project file at the bottom of the lesson to see how I managed my layers.
03 – Final Settings
Okay, before we end this part, go to the main collection, select the Map game object, and change its scale to 2.0 x 2.0.
Why? Because our native resolution is 640x360, but the game project resolution is set to 1280x720. Doubling the scale ensures the game object fills the entire screen.
So that’s it for now. In the next lesson, we’ll start coding and learn how to interact with our tilemap: how to get or set a tile in a specific layer, how to determine the boundaries of our tilemap, and much more.
As always, you can download the full project here: Download project: Part2.
Page updated
Google Sites
Report abuse