Introduction to the New Unity 2D Tilemap System

Create a Tilemap Grid

Using the GameObject menu at the top of the Unity editor — or the Unity menu bar if you’re on MacOS — click 2D Object and then Tilemap to create a new Tilemap grid:

You should see a Grid GameObject added to your scene Hierarchy. Expand this and select the nested Tilemap GameObject.

Think of this Tilemap object as one layer — of potentially many — in your game. You can add more of these to build more Tilemap layers.

In the Inspector, you’ll see two components that Unity added automatically to this GameObject:

• The Tilemap component is used by the Unity engine to store sprites in a layout marked with a Grid component — in this case, the Grid GameObject. Don’t worry too much about the technicalities as Unity handles all the linking up of these components for you when you first created the Tilemap.
• Tilemap Renderer assigns a material to use for rendering the tiles on the Tilemap. It also allows you to set up sorting properties for this Tilemap layer.

Rename the Tilemap GameObject to BaseLayer.

Using Different Tile Palette Painting Tools

Switch to the Scene view in the editor.

With the Tile Palette window still open, make sure you have the RoguelikeCave palette selected, then select the brush tool (or press B). Select the sandy tile as shown below:

Using the Scene window, hover your mouse cursor over the grid near the player. The sand tile brush will snap to the grid.

Click and hold your left mouse button, and paint a rectangular area around your player. This will paint to your BaseLayer Tilemap layer:

Painting large areas can be tedious, so there is a Filled Box brush that you can use for larger section painting. In the Tile Palette window, click the square brush icon (or press U).

Return to the editor and paint an even larger rectangle around the player by clicking and holding your left mouse button at the top left corner and dragging down to the bottom right, then releasing your mouse button:

While you’ve added some color to your game, this sandy dungeon floor is boring. It’s time to add some death and decay!

Use the GameObject -> 2D Object -> Tilemap menu option to create a new Tilemap layer. This time, it will be the only object created in the Hierarchy because you already have a valid Grid. Rename this layer DungeonFloorDecoration:

Using the Tile Palette window, switch your Active Tilemap to the DungeonFloorDecoration layer:

Make sure you select the brush tool (B), then use the Scene window to paint down a number of random grunge-like items:

Disable and then re-enable the DungeonFloorDecoration GameObject in the Hierarchy to see how painting with the active Tilemap changed your DungeonFloorDecoration layer, ensuring that all newly painted tiles went onto this new layer:

Create a new Tilemap layer using the GameObject -> 2D Object -> Tilemap menu option again. Name it Collideable. You’ll use this next to create walls and boundaries.

Switch your Active Tilemap selection in the Tile Palette window to Collideable. Make sure your brush tool (B) is selected, then paint down the following tile pieces to establish a basic dungeon or mine-like wall around the play area you have so far. The red highlighted areas below are the new bits you’ll need to add:

Refer to the Tile Palette window screenshot below for an idea of where to find the tiles that you’ll need to select as you build. Don’t forget that you can use CTRL-Z or CMD-Z to undo, or erase with your current brush (hold Shift) if you want to undo mistakes:

Start the game in the editor and try to walk through a wall:

Who enabled noclip mode?

Who enabled noclip mode?

That’s not what you expected is it?

The problem is that you’ve just painted standard tiles and have not yet applied any magical Unity physics to the Tilemap layer.

With the Collideable GameObject selected, add a new component by pressing the Add Component button in the Inspector window; in the search box, type Tilemap Collider 2D:

This component was created especially for Unity 2D Tilemap games, and it cleverly applies a physics collider shape around all the tiles on the layer to which it is added with no other work required.

Start the game again, and try run through a wall this time. Access denied!

The collisions work well, and you might think this is good enough. But, right now, the colliders are not optimized effectively. Using the Scene view, zoom into a section of wall and look at the collider outlines:

Each tile has a collider placed around it. The middle sections of these walls don’t need these extra collider shapes.

With the Collideable GameObject still selected, add a Composite Collider 2D component. This will automatically add a RigidBody2D, too.

Set the RigidBody2D BodyType to Static and check the Used by Composite check box on the Tilemap Collider 2D component:

As soon as you do this, you’ll notice those unnecessary square collider shapes in the middle of your walls disappear:

This skeleton is giving you a double high five not only because he isn’t one of the piles of bones on the floor of your dungeon, but because you managed some sweet performance optimization, too.

This skeleton is giving you a double high five not only because he isn’t one of the piles of bones on the floor of your dungeon, but because you managed some sweet performance optimization, too.

Complete the walls by building them upward and closing them off at the top — about 16 tiles in length upward. Remember to keep the Collideable selected as your Active Tilemap in the Tile Palette window:

A section of dungeon is no challenge to our hero without a gauntlet run. You’ll now start to work on a chamber of death, complete with ornate ancient marble halls. At the end of this run will be the goal: a pile of gold.

To paint down these hallway floors, you’ll use a custom tile brush called a Rule Tile. As you saw at the beginning of this tutorial, custom tile scripts have been added to the project already from the Unity 2D Extras Github repository. One of these is the Rule Tile.

The Rule Tile allows you to set rules regarding which tiles get painted down depending on the other tiles adjacent to the tile you’re placing. Pretty smart!

Right-click the Prefabs project folder and choose Create -> Rule Tile (it should be near the top of the menu). Name the new item MarbleFloorRuleTile:

Select this new MarbleFloorRuleTile and use the Inspector to set the Default Sprite to roguelikeDungeon_transparent_335. Then, add a new Tiling Rule by clicking the + icon. Set this rule’s Sprite to roguelikeDungeon_transparent_339 and click all the external squares in the rule layout so that each one has a green arrow facing outwards, as illustrated below:

Using the box fill brush tool (B) in the Tile Palette window, and ensuring you’ve selected the BaseLayer Tilemap layer, paint down a plain section of marble. You’ll want this to cover all the currently empty floor space.

Take note that, when you do this, the layer covers the collideable wall tiles because the ordering of the layers has not yet been set. This is an easy fix by selecting the Collideable GameObject, and changing the Order in Layer on the Tilemap Renderer component to a higher value (5 should be fine):

Return to your Prefabs project folder and, with the Tile Palette window open= and the RoguelikeCave palette selected, drag and drop MarbleFloorRuleTile into an empty space in the palette:

Use the box fill brush and your new rule tile to paint down some ornate marble floor sections in the hallway:

Notice how your configured rule tile ensures that, once a tile is completely surrounded on all edges and corners, the tile becomes an ornately textured tile (the sprite you selected in the Tiling Rules editor).