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
- Importing Sprites (Environment Assets Imported)
- Player Movement setup
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.
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
Ensure that the player can fit where they need to, and collides with everything they should.
Troubleshooting common issues:
- My player won’t fit through an area they need to fit through!
Try reducing the size of the player’s collider, and make sure your environment colliders are in the right place. It’s okay if the player’s collider is a little smaller than them – this is actually better than it being a little bigger!
- My player isn’t colliding with the environment!
Make sure both the player and the area you are trying to collide with have colliders – click on their GameObject’s and make sure the collider component is expanded. The collider is represented as a green line.
If it looks right, check that both colliders are 2D colliders (2D and 3D don’t work together).
Finally, check if both colliders have “Is Trigger” UNticked.
- My player is not moving at all, or is teleporting way out of the environment!
Check that you don’t have a really large collider somewhere, perhaps on the background image itself. This can also happen if you’ve accidentally added a box collider to your tilemap instead of a Tilemap Collider. This will cause your player to be colliding the moment the game starts, which can cause the above issues.
- My player starts spinning when they touch the environment!
This is due to physics controlling your player’s rotation. Fix this by selecting your player, looking at the Rigidbody2D component, and choosing Constraints > Freeze Rotation.
- My player is sometimes hidden behind the background!
Your player needs to have a higher Sorting Layer or Order in Layer than your environment. Click on the background tilemap GameObject, go to the Tilemap Renderer’s Additional Settings, and change Sorting Layer to “Background”. Click on the player GameObject, go to the Sprite Renderer’s Additional Settings, and change Sorting Layer to “Gameplay”. You can add these layers if they aren’t already present – make sure the “Gameplay” layer is LOWER in the list (farther down) than the “Background” layer. You can also use the “Order” instead of the Sorting Layer if you wish.
- My player can’t jump when they are touching the ground!
If you followed my jumping tutorial, your ground needs to be tagged as Ground so the player knows it’s allowed to jump after touching it. Click on each of the foreground GameObjects and change their tag to Ground.