Introduction to the New Unity 2D Tilemap System

The introduction of Unity’s 2D Tilemap System creates a great opportunity for aspiring indie developers and game studios around the world to save time prototyping and building out quality 2D games.

Without this system, you could spend days, possibly even weeks, programming your own tilemap system or customizing someone else’s to work for you. And that’s just the programming bit – what about a tilemap editor!?

The new system is free, built directly into the Unity editor and provides a plethora of features that we’ll cover in this tutorial.

In this tutorial, you’ll use a simple 2D tile-based game to learn:

• How tile maps work.
• How to enable tilemaps in Unity and set up your grid.
• How to add sprites to your project, convert them to tiles and then add them to your tile palette.
• How to use the tile editor tools to craft your levels.
• How to sort and layer tiles.
• How to add Unity physics to tiles.
• How to dynamically paint tiles.
• How to customize prefab tiles with your own code and logic.
• How to add customized tilemap extensions and scripts to your project.

Phew! That’s a massive list. Don’t be frightened though; you’ll see how easy these tools are to grasp once you get started.

What Is a Tilemap-Based Game?

A 2D tilemap-based video game is any game in which the levels or play areas consist of many small tile-based shapes that collectively form a grid of tiles. Sometimes, the distinction between each tile can be obvious but it might also be seamless and unrecognizable to players.

The collection of tiles available in the game are known as a tileset, and each tile will usually be a sprite that is a part of a spritesheet. If you want to brush up on spritesheets, here is a Unity tutorial that covers spritesheets.

Tiles are typically square, as you’ll see in this tutorial. But they also come in other shapes such as rectangles, parallelograms or hexagons. Games usually use a top-down or side view perspective, but tile-based games offer 2.5D as an option, too.

You may already be familiar with two well-known games that use a tilemapping system: Starbound and Terraria.

Getting Started

Download the project materials for this tutorial using the “Download Materials” link located at the top and bottom of this tutorial. Next, extract the .zip file to a convenient location.

Fire up the Unity editor and load the Rayzor-starter project from the extracted project materials package.

Here is what you’ll be working with in the project:

• Cinemachine/Gizmos: Unity Cinemachine is included simply for the purpose of giving you an easy-to-use camera that follows the player as he walks.
• Palettes: You’ll store your own custom tile palettes in this folder.
• Prefabs: Some pre-baked prefabs you’ll use later in the tutorial game.
• Scenes: Where you’ll open and save the scenes you work on.
• Scripts: A few basic scripts to handle player movement, trap collision logic and game win/lose scenarios. Also included in this folder are custom Unity Tilemap scripts from the Unity 2D Extras Github repository that you’ll use later on.
• Sfx: A bit of audio for the game.
• Sprites: 2D sprites to create your tile palettes with. These are courtesy of the kenney.nl roguelike caves and dungeons pack.

Building Your Game

Open the Game scene from the Scenes folder.

Click the Play button in the editor to start the game. In the Game window, use your WASD or Arrow keys to move the hero.

The hero currently wanders the seemingly infinite camera background color #00000 darkness of the game, lost in eternity.

To remedy this, you’ll need 2D tile tools to build out interesting levels and game mechanics. Now, if only Unity offered this feature…

Say Hello to My Little Tile Palette

In the editor, click Window -> Tile Palette to open the 2D Tile Palette window.

This window is now one of your best friends whenever you work on a tilemap game in Unity.

1. This row of icons are your basic tile manipulation, painting and erasing tools
2. This selector allows you to create different palettes, which you can think of like painting palettes in which you arrange the various ‘colors’ — or, in this case, ’tiles’
3. This selector allows you to create brushes with different behaviors. You can add custom brushes that function differently to the default brush — one that paints custom prefab tiles with extra functionality, for example

Click Create New Palette and name it RoguelikeCave. Leave the grid and cell options as their defaults.

Click Create and, when prompted, choose to store the new palette in the project’s Assets\Palettes folder. Underneath this, create a new folder called RoguelikeCave.

You should now see the following folder structure in your project files:

In your Tile palette editor window, RoguelikeCave should be selected; at this point, you still won’t have any tiles:

How can an artist be expected to create masterpieces when there are no materials to paint with!

With the Tile Palette window still open, select the Sprites/roguelike-cave-pack project folder and then expand the roguelikeDungeon transparent.png asset. Next, highlight all the sprites in this spritesheet: select the first sprite, hold shift, and then select the last sprite.

Drag all the selected sprites into the RoguelikeCave Tile Palette window:

After you drop the sprites into the Tile Palette window, use the location prompt from Unity to select a location to store the tile assets.

Create a new folder called Tiles under Assets/Palettes/RoguelikeCave and choose this folder as the location:

Unity will generate a tile asset for every sprite you added from the spritesheet. Wait for this to complete, then resize your Tile Palette window and marvel at your shiny new tiles laid out neatly on the RoguelikeCave palette:

Repeat the above process of creating a tile palette using the Tile Palette window but, this time, name the new palette RoguelikeCustom.

Place the newly created palette in a new folder. Name the folder RoguelikeCustom and place it under the Assets/Palettes project folder.

This time, following the same steps as above, use the sprites from the Assets/Sprites/roguelike-custom/roguelike-normal-cutdown-sheet.png spritesheet to populate the tiles in your new palette. Create a folder called Tiles under your RoguelikeCustom palette folder and place your tile assets there:

Pat yourself on the back, as you are now knowledgeable in the fine art of tile palette creation!