Getting Started with TileMaps!

Objective: Understanding what Tiles/Tilemaps are and how to create them!

The first thing we want to do is create a grid for us to paint in. Create > 2D object > Tilemap, this creates a grid object.

I rename the Tilemap “Ground_Tilemap”

A grid is basically where we paint our environment and a Tilemap is similar to a layer. Our environment will have several Tilemaps, each acting as their own layer (foreground, background, midground, etc.), each represented with their own Tilemap.

We are going to start with our ground layer. Make sure the active Tilemap on the Tile Palette is set to your Tilemap we just created/

We need to create a new Palette. A Palette is going to host all of the sprites that we can then us to paint out environment.

This will open a Save window where you can select where to save you new Palettes. For organizational purposes I would suggest you navigate into your project and create a new folder “Tilemap” Inside that folder, create another new folder named “Palettes” and save your new palette into the Palettes folder.

Now, we want to populate this Palette with our ground item sprites. Navigate to your ground sprite. A ground sprite should look something like this.

We need to take the individual tiles and place them in the Tile Palette. Before we can do that we need to slice this image up so that we can turn this into multiple tiles that we can then select from and begin painting. To do that, we need to make this a multiple type sprite. With the sprite selected make sure the Texture type is Sprite (2D and UI). Change the Sprite Mode to Multiple and Select Apply at the bottom.

This give us the ability to cut this sprite up.

Press the sprite editor button on the inspector to open the sprite editor window.

Select slice > change the type to grid by cell size. For this specific sprite the artist said the size should be 128 x 128. So when selecting your sprite read the description to see if there is a size spec. With those specification place press slice.

Now your sprite is made up of several 128 x 128 sprites. With the parent ground sprite selected we want to change the pixel per unit to be the same as the individual tiles and select apply.

Drag the parent ground and drop into the tile palette.

This is going to take all of those sprites and convert them to individual tile assets and it’s going to save out those tile assets.

Since Organization is key we want to create a new folder inside the Tilemap folder we created earlier, “Tiles” Inside the new Tiles folder create another folder “Ground” Select save and it will generate the tile assets.

The tile assets are what we are actually paining. We can now select a tile in the Tile Palette window and pain on our grid!

Now you know how to populate a Tile Palette and how to slice a sprite! Don’t be afraid to experiment with your sprites and I’ll see you in the next tutorial!