P1 - Preparing our tilemap

00 -What will you learn in this part?

In this first part, we’re only preparing our tilemap. You will learn:

What a tilesheet is.
How to create and set up a Tile Source.
How to create a Tilemap.
And finally, how to implement it in your game.

Download the starting project: Tilemap

01 - What is a tilemap?

If you’re not familiar with the term, here’s a simple definition:

A tilemap is a map created by assembling small images called tiles. These tiles are usually grouped together in a single image file called a tilesheet.

This technique is very common in video games, especially for creating 2D environments like landscapes, floors, or buildings. It allows you to build large, detailed maps while keeping your game lightweight and optimized.

To start working with tilemaps, you first need a tilesheet, essentially a collection of tiles arranged in one image. In this course, we’ll use one made by Kenney.

The goal here is not to create a tilesheet from scratch, but to learn how to use it effectively in Defold.

02 - Tilesheet

The first thing we need is a tilesheet. As mentioned earlier, we’ll use one from Kenney, but with a few small modifications made specifically for this course.

This tilesheet is made up of small images, and the base size of each tile is 18×18 pixels.

I say base size because a single image can sometimes be made up of multiple tiles.

Go ahead and download the prepared file, I’ve already set it up for the course.

Once that’s done, we’ll adjust some settings so that it fits perfectly with our game.

03 - Defold Set up

Open the downloaded project and click on the game.project file.

Go to the Display settings and you’ll notice that I’ve set the project resolution to 1280 × 720.

Then, go to the Graphics settings. You’ll see that I’ve changed the Default Texture Min Filter and Default Texture Mag Filter to Nearest and Nearest.

This is the setting you should use if you’re working with pixel art, as it keeps the pixels sharp without blurring them.

Last thing—go back to the Project Settings section and look at Dependencies.

A dependency is an external library you choose to add to your game project to make development easier.

I think it’s important to know that these exist, especially if you’re a beginner, because they can save you a lot of time.

There are libraries for things like pathfinding, camera control, GUI systems, fonts, window management, and much more.

In this project, I’ve added a library called DefOS. It provides extra native functions for managing your game’s window, such as changing the icon, resizing the window, and more. Here, I’m just using it to lock the window size.

You don’t need to follow the next steps, it’s just to show you how it works.

How to find and add a library: go to the Defold website, then click on the Asset link.

And then look for something useful for the project you are working on. When you find one, you will usually get a page where you can copy a link to paste into your Defold engine, like the one below.

Then, in your project settings, under the Dependencies section, click on the ➕ icon and paste your link.

Finally, we need to fetch the library to add it to your game project. At the top menu of Defold, click Project → Fetch Libraries.

Normally you will notice a new Icon appear name Defos.

Ok, so that’s how you find and add a library to your game. As I said, it was important for me to explain this early, so you know how to use libraries in the Defold engine.

Now, let’s move on to the main purpose of this course: Tilemaps.

04 Let's create our first Tilesource

The first thing to do is create a Tile Source, which is required to paint our tilemap.

In the Asset Tree:

Click on the game folder → environment folder.
Right-click → New → Tile Source.
Name it farming_tilesource.
Click Create Tile Source.

Normally, a window like the one below will open.

In the Properties Panel, click the Browse button next to the Image property to add your tilesheet, then click OK to confirm.

Tadaa! our tilesheet! 🎉

But we need to adjust a few properties to make it ready to use.

Change the Tile Width and Tile Height values to 18, because each tile is 18 pixels. This will divide the size of our image along each axis by 18. With that, our tilesheet setup is complete.

it should normally look like this ☝️

Before moving to the next section, it’s important to know that each tile in the Tile Source has its own ID. The first tile in the top-left corner has ID 1, and the last tile in the bottom-right corner has the last ID, which in this case is 128.

To see the ID of a tile, simply move your mouse over the tilesheet image, it will display the current tile ID at the top-left.

05 - Create our Tilemap

Go back to the environment folder, and now let’s add a Tilemap resource:

Right-click on the environment folder → New → Tilemap.
Name it fields_tilemap.
Click Create Tilemap.

A new window will open automatically!

In the Properties Panel, click the Browse button next to the Tile Source section to add your farming_tilesource.

You’ll notice that the display changes, you now have a grid visible in the View section.

For now, close this window and let’s implement the Tilemap in our main collection.

06 - Add our tilemap

In the Asset Tree, locate the main folder and open main.collection. You’ll notice there’s already a Game Object called manager. This Game Object only has a small script that uses the Defos library and changes the game’s view projection.

At this stage, you don’t need to worry about it, we’ll discuss projection in another course. For now, let’s continue focusing on the Tilemap.