Dungeon Crawler

In this tutorial you will learn how to make a 2D Dungeon Crawler game.

Dungeon Template

In this tutorial we're going to make a 2D, top down game in which the player explores a dungeon, fights enemies, and collects gems.

To get started, download and unzip the template file: DungeonTemplate.zip

Once you've unzipped and opened the game try and play it. Right now the player may move around a room with the w a s and d keys and shoot using the arrow keys.

Creating a Dungeon

Let's start by expanding the map. This map is made using Tilemaps. Tilemaps are grids that are made up of rectangular tiles where you can place 2D sprites. Unity has a built in Tilemap system where you can create Tiles in a Tile Palette, and essentially paint them onto the tilemap grid. Therefore we can create background tiles, wall tiles, floor tiles and so forth, and paint them into the scene to create a 2D world.

For this tutorial, the tiles and grids have already been made for you. All we have to do is paint them onto the map how we like.

In the Hierarchy window, click the arrow next to Grid to view the Background and Walls tilemaps. Select the Walls tilemap and go to the Tile Palette tab above the scene view and select the eraser tool. Return to the scene tab and erase a section of the gray tiles to make a space for the player to move through.

Go back to the Tile Palette, select the brush tool, and click on the blue square to select the background texture. In the Hierarchy window select the Background tilemap to start working on the tiles the player may move over. Back in the scene tab, paint where you want your floors to go. If you make a mistake, you can use the eraser tool like you did before.

Keep in mind that the player character is 1 square wide and 2 squares tall. Make sure you paint in enough room for them to move in.

Once you've painted where your floors will go, return to the Tile Palette. With the brush selected, click on the grey tile and go back to the scene tab. Select the Walls tilemap again and paint in walls around the edges of your floor tiles.

If you want to change the colors of the tiles, click on the Environment folder in the Project tab. There are two small, square sprites named Background and Wall. To change the color, just click on the sprite and select the color tab in the Inspector window.

Now we have a map that is much more interesting. But there's not a lot to do in it, so let's add something for the player to collect.

Adding Collectibles

Open the Prefabs folder and find the prefab called Diamond. Click and drag the prefab onto the scene. You can do this as many times as you want, so hide them in various places around your map. When you play the game, you will be able to pick up the diamonds you placed in the level.

Let's add a way we can track how many Diamonds the player has collected.

Tracking Collectibles

Right click in the Hierarchy window and add a UI > Canvas to the scene. Right click on the Canvas and add a UI > Panel, then rename it to HUD. To see the entire Panel, double-click on it in the Hierarchy window.

We want the HUD to be transparent, click on the color block in the Inspector window and set the alpha (or A) value to 0.

Next, right click on the HUD and add a UI > Text to it. Rename it "Gem Text". Increase the size of the font and set the font style to bold. In the Rect Transform tab set its anchor to the upper right corner by clicking the icon that looks like a target, then ALT + Click on the icon in the row called right and the column called top. Next, change the color of the text to something more visible. You can use the eyedropper tool to select a color that you already have.

Open the Scripts folder and find the HUDController script. Drag and drop it onto the HUD object we created. In the Inspector window there is a new section titled HUD Controller (Script) with Gems Text and Health Text tabs. Drag Gem Text from the Hierarchy window to the Gem Text tab in the Inspector window. Now when you play your game, the number of diamonds you collect will appear.

This is better than just wandering around a dungeon, but it's not challenging. Let's add some enemies to the game next.

Adding Enemies

Before we add enemies, we need to make sure that when they are implemented they can move around the map. In the Hierarchy window, select the A_ object. Then in the Inspector window scroll down to the bottom and click scan. This will scan the map you've made and make a map that the enemies will follow when they move around.

You may view this map by toggling the Show Graphs box just above the scan button. If your map becomes quite large, you may notice it exceeds the boundaries of the graph. To fix this, simply increase the size of the Width and Depth nodes. Make sure your map fits within the grid. It is also best to use even numbers when deciding on a grid size.

Any time you make a new map or make modifications to a map you will need to do a new scan. If you don't, your enemies will be using an old map and not be able to navigate your new one.

Open the prefabs folder in the Project window and find the Red Knight prefab. Drag and drop it into the scene. In the Inspector window scroll down to find the AI Destination Setter (Script). It has a variable labeled Target. Drag the Player object from the Hierarchy window into this field. Then play your game.

When the player gets close enough to the enemy, the enemy will start to follow the player and attack them. The player may also fight back by shooting with the arrow keys.

Right now the player can be attacked and even killed, but we can't tell when because we can't see how much health the player has. Next let's add a way to track player health.

Tracking Health

Under the Canvas object in the Hierarchy window, right click on HUD and add a UI > Text. Set it up just like you did for the Gem Text object, except in this case we'll name it Health Text, give it a red color, and move it to the upper left of the screen.

Now select the HUD in the Hierarchy window and, under the HUD Controller (Script), add Health Text to the Health Text tab.

Now play your game. When the player is hit by an enemy, the Health amount goes down.

This is a much better game! Now that we've got the basics worked out, let's make some more levels.

Creating New Levels

In the Project window, find the Scenes folder. Left click on Level 1 and use CTRL D to duplicate the level. It will automatically name the new scene Level 2. Double click on Level 2 to open it, making sure to save your changes in level 1 when prompted.

Use the tools you learned earlier in this lesson to create another level for your game. Change the map, hide more gems, and add more enemies. Once you're happy with how your new level looks, save what you have and go back to Level 1.

To create a game with multiple levels, you will need to tell Unity which order those levels should play in. Go to File > Build Settings, and then drag the scenes to the build settings window in the correct order.

After you've updated the build settings for the project with the proper level order, open the prefabs folder and find the exit prefab. Click and drag this into your scene where you want your player to be able to move on to the next level. You may resize the exit as you please, but the player must be able to touch it to move onto the next level.

Our game is looking great! Keep adding new levels, trying to make each level progressively harder for the player to complete.

What's Next?

Consider a Dungeon Crawler for your final project.

If your team decides to create a Dungeon Crawler for your final project:

The game programmers could:
• Add different types of enemies and collectibles
• Add more complex enemies
• Add power-ups for the player to collect
• Let the player exit only when they've collected a certain number of gems
• Add limited ammo for the player

The artists could:
• Create custom 2D sprites for the dungeon and characters
• Create sprite-based animations for characters and collectibles
• Create start and game over screens