Unity Feature: Tilemap

This tutorial will walk you through the basic features of the Unity Tilemap Editor. This is a great way to make levels for 2D unity games. This does require you to have tiles created for your game. Preferably these tiles should all be the same size.

Required Tasks or Knowledge

Video Tutorial

Step 1 – Create a Scene

Create a scene for your environment to be placed in. You may want to name the scene something like “Level 1” if your game will be organised into multiple levels. If your game will be all one big level, you could name it something like “InGame”.

Create a scene by choose File > New Scene, and save the scene in the Scenes folder inside your project’s Assets folder.

Step 2 – Open Tile Palette Window and dock it

The Tile Palette can be found in Window > 2D > Tile Palette

Step 3 – Create a new Tile Palette

Click “Create New Palette” on the Tile Palette window to start. Create a folder for your Tile Palette and save the palette with a useful name, like “City Tiles” or “Cave Tiles” or something similar.

Step 4 – Drag your tile images onto your Tile Palette

In your Project window, select all the images you want in your Tile Palette by Shift or Ctrl clicking them. Once you have them all selected, drag them onto the Tile Palette window. This will pop up a window asking you where you want to save your new tiles – chose the Tiles folder you created in the previous step.

Step 5 – Create a Tile Map in your scene

Now you have a Tile Palette. Just like a painter, a palette is not the place where you create your final work of art – it is the place where your paints (in this case, your tiles) are stored. You now need to make your actual tile map – the painter’s canvas in our painting metaphor.

Click on GameObject > 2D Object > Tilemap to create your Tilemap. This will also create a parent Grid object. Click on the triangle next to the Grid in the Hierarchy window to see you Tilemap.

Step 6 – Draw some tiles onto the map

You can now draw onto your tilemap. In the Tile Palette, select the tile you want and click on the paintbrush tool at the top of the Tile Palette window. Then, in the Scene window, click and drag. You will see your tiles drawn onto the screen like a pixel paint program.

However, most likely there will be a bit of a difference in the size of your tiles compared to the size of your grid squares.

Step 7 – Adjust your tile image import settings so your tiles are the right size

Click and shift or ctrl click to select all of the images for your tiles (NOT the tiles themselves, the images). In the settings, take a look at the size of the images, and set the pixels per unit to be the same as the number of pixels on the side of each tile. This means each tile will take up 1 unit in Unity’s word – the same size as a square of the grid.

Click Apply and you should see your Tilemap update to look more filled out.

Step 8 – Try out the other tile map tools

There are a few other map tools including an eraser, drop selector, fill tool, and square tool. Try them out and see how they work.

Step 9 – Add collision to the tile map

You can add collision to the tilemap by adding a special Tilemap Collider 2D component. Make sure you do not add a Box Collider – this will create a giant collider and won’t do at all what you want.

Step 10 – Create a second Tile Map for collision tiles

If you want some tiles to have collision and some not, you will need two tilemaps. Create a new one by right-clicking the Grid object and choosing 2D Object > Tilemap. Rename your two tilemaps so it is clear which one has collision and which doesn’t, such as “Background” and “Walls”.

You can change which Tilemap you are currently editing in the Tile Paletteusing the “Active Tilemap” drop-down at the top of the Tile Palette window.


WARNING
It is very easy to accidentally edit the wrong Tilemap. Make sure to triple-check which one you are editing, as it is very annoying to have to fix this later if you edit the wrong one!


Step 11 – Add your player to the scene and test collision

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s