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” linkj 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.
- This row of icons are your basic tile manipulation, painting and erasing tools
- 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’
- 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!
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
Tilemapcomponent is used by the Unity engine to store sprites in a layout marked with aGridcomponent — 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 Rendererassigns 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?
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.
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).
It’s a Trap!
No, you won’t be introducing Admiral Ackbar as a playable character. Instead, you’ll be creating a trap prefab tile brush that you can use to paint down spinning blade-firing traps!
Create a new empty GameObject in the Hierarchy and name it ShootingTrap. Create an empty child GameObject underneath ShootingTrap. Name it Sprite:
Select Sprite and add a Sprite Renderer component to it. Set the Sorting Layer to Player and the Order in Layer to 1 to ensure it renders above the other layers. Select the Sprite field, and choose roguelikeDungeon_transparent_180 as the sprite.
Now, rotate the Transform of the Sprite GameObject by -90 on the Z axis:
Next, switch back to the ShootingTrap GameObject and add a new component using the Inspector. In the search, look for Shooting Trap and attach that script.
This script is included with the project files you downloaded; essentially, it fires off a Coroutine every 2 seconds that instantiates a spinning saw blade prefab (or any prefab for that matter) at the trap’s current position.
Set the Item to Shoot Prefab on the Shooting Trap component to Projectile (a prefab found under /Assets/Prefabs):
Start the game again in the editor, and use the Scene view to locate your trap. It works!
Drag a copy of ShootingTrap from the Hierarchy into the /Assets/Prefabs project folder to create a prefab. Delete ShootingTrap from the Hierarchy.
You’ll use another custom tile brush script called PrefabBrush to create a brush that can paint down prefabs to your Tilemap layers.
Right-click the /Assets/Prefabs project folder and click Create -> Prefab Brush. Name the object PrefabBrush.
Use the Inspector to set the Prefabs Size to 1 on the PrefabBrush, and set Element 0 to ShootingTrap.
Create a new Tilemap layer called Traps under Grid and open the Tile Palette window.
Select the normal tile brush (B) and, at the bottom of the Tile Palette window, use the dropdown to select PrefabBrush. Make sure your Active Tilemap layer is set to Traps and use the Scene view to paint down a few custom trap prefabs along the left edge of your ornate hallway room.
Expand the Traps GameObject in the Hierarchy and play around with the Shoot Start Delay value on each ShootingTrap Gameobject using the Shooting Trap script in the Inspector for each one. Add an extra 0.25 to the value for every trap, e.g.:
- 1st ShootingTrap -> Shoot Start Delay = 0.1
- 2nd ShootingTrap -> Shoot Start Delay = 0.35
- 3rd ShootingTrap -> Shoot Start Delay = 0.6
- And so on…
Start the game and run the gauntlet if you dare…
The End Goal
The goal of this mini dungeon run is a pile of gold. Fame and fortune await those who can reach it before being chopped to pieces by the shooting saw blades.
Create a new Tilemap layer called Goal under the Grid GameObject. Select Goal and change the Tilemap Renderer Order in Layer to 2:
With the Tile Palette window still open, ensure the PrefabBrush is still selected. Change Element 0 to reference the Goal prefab under the /Assets/Prefabs project folder.
This is a prefab with a simple pile of gold as the sprite, a Box Collider 2D with Is Trigger mode enabled, an audio source (the goal sound effect), and a simple Goal.cs script that plays the goal audio and restarts the level when you enter the trigger area.
Use the standard tile brush to paint down a single goal prefab tile at the top of the ornate hallway room, after the spinning disc traps:
Run the game again and try to reach the goal. Once you run into this tile, the OnTriggerEnter2D() logic in Goal.cs will run, playing the goal sound effect and restarting the level.
Bet you can’t reach the goal on your first attempt without getting chopped up into lots of dwarf pieces!
Finishing Touches
This dungeon is a little too light and airy. You can add mood to it by switching your sprites to use a 2D sprite material that is able to be affected by lights.
Select the Player, the Goal, and all the ShootingTrap Sprite GameObjects and change their Sprite Renderer Material to use SpriteLightingMaterial:
This is a material with a Sprite/Diffuse shader attached. It allows sprites to be affected by lights in the scene.
Under the Grid GameObject, select the BaseLayer, DungeonFloorDecoration, Collideable, and Goal GameObjects, and use the Inspector to change their Tilemap Renderer Material to also use SpriteLightingMaterial.
Next, select Directional light under the Lights GameObject and change the Light Intensity down to 0.3.
Much moodier!
You’ll also now notice the Player is carrying a Point light — I mean, a Lantern around with him.
Now that the sprites in the game are using an appropriate material, Unity lights have an effect on the sprites around them.
Drag two copies of the FlickerLight prefab from the /Assets/Prefabs project folder into the Scene and place them under the Lights GameObject.
Set the first prefab’s position to (X:-11.25, Y:4, Z:-1.35), and the second prefab’s position to (X:2.75, Y:4, Z:-1.35).
Create a new Tilemap layer called WallsAndObjects and set the Tilemap Renderer Order in Layer to 15 using the Inspector. Don’t forget to also set the Material to use the SpriteLightingMaterial material.
Switch your tile palette brush back to Default Brush and the Active Tilemap to WallsAndObjects.
Use the brush tool (B) to paint down two ‘lantern light’ tiles underneath each new FlickerLight you positioned in the corners of the starting area:
Challenge Time
See if you can spruce up the dungeon a little more. Use the WallsAndObjects Tilemap layer to create some bookshelves at the top of the dungeon hallway, using the other tile palette you created called RoguelikeCustom. Place down a piece of cracked wall or two, too.
Switch back over to the DungeonFloorDecoration Tilemap layer and add a few more bits and pieces to the marble hallway, like cracks on a few random tiles:
Congrats on finishing your mini dungeon gauntlet treasure run level! You should now have something that looks kind of like this:
Where to Go From Here?
If you missed a step, you can take a look at the final result of this tutorial by opening the Rayzor-final Unity project from the “Download Materials” link at the top and bottom of this tutorial.
In this tutorial, you’ve learned:
- 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.
You covered a ton of ground in this tutorial but, as with everything, there’s always more to learn!
There are interesting custom tile brush scripts available that were not covered in this tutorial. Go read up on them and see if you can find a use case.
You can also take a look at creating animated tiles: here.
Otherwise, hop on to the forum below and tell us what you’re thinking of creating with the 2D Tilemap tools in Unity!
The post Introduction to the New Unity 2D Tilemap System appeared first on Ray Wenderlich.
Introduction to the New Unity 2D Tilemap System published first on https://medium.com/@koresol
Iyar 