Premium
Introduction to Tilemaps
Tutorial
Beginner
20 Mins
Overview
Summary
Unity’s Tilemap system makes it easy to create and iterate level design cycles within Unity. It allows artists and designers to rapidly prototype when building 2D game worlds. In this tutorial, you'll create a Tilemap and explore the Tilemap system including Tilemap settings, and you'll use the Tile Palette to edit your Tilemap.
Topics we'll cover
Language
English
Recommended Unity Versions
2017.2 and Above
Tutorial
Introduction to Tilemaps
1.
What is Tilemap?
Unity’s Tilemap system makes it easy to create and iterate level design cycles within Unity. It allows artists and designers to rapidly prototype when building 2D game worlds.
A tile map consists of a grid overlay and a number of other components working together. The entire system allows you to paint levels using tiles and brush tools and define rules for how tiles behave. With tile maps, you can create platforms with dynamic edges, animated tiles, randomized tile placements, and more. Unity’s Tilemap system is perfect for 2D projects that contain gameplay levels as it allows the user to prototype levels that can be immediately tested within the game engine.
In this workflow, we’ll explore the different parts of the Tilemap system.

2.
Create a Tilemap
Right-click in your Scene and select 2D Objects > Tilemap. This will create a Tilemap in the Scene. (Figure 01)

3.
About the Tilemap System
Tilemap consists of two things: a grid and the actual tile map. The Tilemap editor works in a one-to-many relationship; there’s only one grid in the Scene, but there can be several tile maps. The grid creates the layout for the Scene that the tile maps rely on. Selecting the grid in your Hierarchy will open the grid properties in the Inspector. (Figure 02)
Looking at the Inspector, there are three things you can directly change about how the grid displays the tiles, though normally you’ll want to leave these settings at their default values:
  • Cell Size: This determines the size of each square of the grid. This change applies to all tile maps within the grid..
  • Cell Gap: This determines the space between each square on the grid. Much like Cell Size, this applies to all tile maps within the grid.
  • Cell Swizzle: This determines which direction the grid is facing. The directions you can select are, XYZ, XZY, YXZ, YZX, ZXY, and ZYX. This has a real effect within a 3D project.

4.
Configuring the Tilemap
Next, select the Tilemap underneath grid in the Hierarchy. It will display two components:
  • Tilemap (Figure 03)
  • Tilemap Renderer (Figure 04)
With the Tilemap component, you can change how the tile map behaves and how the tiles within it work. Below is a quick breakdown of Tilemap settings:
  • Animation Frame Rate: This i affects the speed of any animated tiles in the Tilemap.
  • Color: You can set not only color, but also transparency values for the tiles. This is particularly useful with tiles like clouds or water.
  • Tile Anchor: This is where each tile will be anchored in the grid. By default, it’s set so the tiles are anchored to the center of each grid space.
  • Orientation: Similar to Grid Direction, this controls the direction the tiles will be facing. This is useful when you’re working within a 3D environment and not 2D.
You’ll also notice the Tilemap Renderer, which allows you to change how each tile is rendered and its sorting order.
  • Material: You can change the material that’s used to render each tile.
  • Sort Order: You can change the sorting order of the tiles by selecting which ones are rendered first. You have the following options: Bottom Left, Bottom Right, Top Left, and Top Right.
  • Sorting Layer: This is the layer that defines the Sprites’ overlay priority during rendering.
  • Order in Layer: Use this option when you have more than one object in a sorting layer. It helps determine which layer is rendered first.

5.
Exploring the Tile Palette
When using the Tilemap system, you’ll most likely be using the Tile Palette tool to assist with creating, modifying, or editing tile maps. In the Tile Palette, there are several tools to aid you in this process.
Open the Tile Palette window by going to Window > Tile Palette in your project. (Figure 05)
From left to right, the Tile Palette has several tools you’ll want to take note of:
Selection: Allows you to select a tile in the Tile Palette window to see the tile’s settings.
Move: Allows you to move the tiles around the Scene view.
Brush: Allows you to paint in the Scene view with the tile you selected in the Tile Palette window.

Fill Selection: Allows you to define an area to fill with a selected tile.
Tile Sampler: Allows you to pick tiles from the Scene; it works like any eyedropper in image manipulation software.
Eraser: Erases tiles in the Scene view.
Fill: Allows you to fill an area with a selected tile without having to define the area you wish to fill. It works by filling out all adjacent vacant grid squares, so it’s best used for areas surrounded by other existing tiles. If you’re not careful, you can fill the entire scene with the selected tile, which can tax the computer.

6.
Using the Tile Palette
There is one more button in this window: the Active Tilemap drop-down. This allows you to select an existing Tile Palette or create a new one. (Figure 13)
  • Select the Active Tilemap and select Create New Tile Palette (Figure 13). Or, select a pre-existing Tile Palette.
  • Name your new palette and leave the other settings alone. This will create a new Tile Palette for you to use.
This button determines which of the tile maps you’re painting on. When you have multiple tile maps within your Scene, it’s important to keep an eye on the one you’re currently working on. Not doing so can lead to issues like overlapping tiles or tiles that won’t animate properly.
The Tile Palette has a few more features to note: Selected Palette, the Edit button, and the Default Brush. (Figure 14)
  • Use Selected Palette to choose which Tile Palette you wish to use/edit.
  • Edit button is a toggle to edit your Tile Palette.
  • Default Brush is a drop-down that allows you to choose from a variety of brushes to paint your Scene.

7.
Using Tilemap Collider 2D
Go to your Tilemap Renderer.
Add an additional component called the Tilemap Collider 2D, which will prevent objects from passing through the tiles.
The Tilemap system is a robust and powerful tool that will help speed up the process of creating 2D levels and allow for rapid prototyping. The system removes a lot of redundant and repetitive work, allowing you to quickly build 2D levels without having to worry about going back over your work to implement the boundaries, rules, and animations by hand.