Introduction to the New Unity 2D Tilemap System
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. In this tutorial, you’ll use a simple 2D tile-based game to learn more about tile maps in Unity. By Sean Duffy.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Introduction to the New Unity 2D Tilemap System
25 mins
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: