Setup a 2D Procedural Tilemap

Set up a 2D Procedural Game

You can access the full course here: Procedural 2D Dungeons

Tilemap Setup

In this lesson, we are going to start building our demo by creating a tilemap.

First, we have to download the sprites from the “assets” folder of our source material.

Project setup

Create an empty Unity 2D project and add the sprites you just downloaded. We’re going to use the “terrains” sprite to build the tilemap.

Sprite Assets folder in Unity

We need to do the following adjustments for this sprite:

  • Change pixels per unit to 40;
  • Set sprite mode to multiple.

Inspector in Unity for sprite map

In the sprite editor:

  1. Select the slice tab;
  2. Change type to “grid by cell size”;
  3. Put value “40” as pixel size for both x and y;
  4. Press the slice button on the bottom.

Unity Sprite Editor with Slice options open

Now, we are able to select each individual terrain:

Sprites in Unity with slice preview

We proceed to create a tilemap object from our modified “terrains” sprite as follows:

  • In the scenes folder, rename the scene to “Demo” by right-clicking on it and choosing the rename option:

Rename option from right-clicking Unity scene

  • Right-click the area below “Main Camera”, go to “2D object”, then click on the tilemap option:

Unity menu with 2D Object Tilemap selected

This will create a “Grid” object, with a “Tilemap” object inside it:

Unity scene with Hierarchy and Inspector highlighted

Creating a tile palette

We have just created our grid. Let’s populate our tilemap.

For that, we need to open the “Tile Palette”:

Unity Window menu with 2D > Tile Palette selected

Drag and drop the “Tile Palette” tab near the “Inspector” tab, and create a new palette called “Dungeon Palette”:

Unity Tile Palette tab

Save it in a new folder inside the “Assets” one.

Now, click on the “Sprites” folder in Unity (under the “Assets” folder), and drag and drop the “terrains” sprite to the “Dungeon Palette” tab. Save it in the folder you just created for the tile palettes.

Tiles added to Unity Tile Palette

Clicking on the brush tool (marked in red below) and choosing the brown terrain sprite we paint our tilemap. After that, we select the wall sprite to paint its borders around it, except for the space where the exit door is going to be. If we accidentally paint outside our tilemap frame we can erase it back to normal with the eraser tool (marked in blue):

Unity scene with tilemap painted

The next step is to make our walls collidable, so the player will not walk through the walls!

Selecting our tilemap object and the “Inspector” tab, we go to “Add Component”. We add a Tilemap Collider 2D from the drop-down options displayed:

Unity tilemap with 2D collider added

That just made all tiles collidable, but we do not want the floor to be collidable as well. The way to convert that is by going on the project window, selecting the folder with the palettes, clicking on the floor sprite, and setting its collider type to None:

Inspector in Unity for terrain collider

As an exercise, you can create your own tilemap. The only requirement is that the dungeon has to have at least one way out. For now, do not worry about the elements inside the room.

Player Setup

In this lesson, we do similar adjustments to the settings of our “player” sprite as those seen in the previous lesson.

In “Inspector”, set Spring mode to Multiple, and now set its Pixels Per Unit to 30. Then, in the Sprite Editor, set  X and Y to “30” in the Grid By Cell Size option as we’re only going to use one of the players drawn in the sprite:

Unity Sprite Editor with Player sprite slicing

Creating the player prefab

Click on the arrow beside the player prefab to see both of them.

Player prefab as seen in Unity

Drag and drop the first one to the tilemap to insert it in our dungeon. We now see a “player_0” element listed in our Demo. Rename it to “Player”:

Player sprite added to Unity scene

We can add a Box Collider 2D and a Rigidbody 2D to our player (in the Add Component menu):

Unity Search with Box Collider 2D selected

We freeze its rotation on the “z” axis so it will not rotate when colliding with anything, and we set its collider to be a little smaller than the player itself (this way the player will be able to move past the dungeon’s door):

Box Collider 2D settings in Unity

In case your player is not showing up on your tilemap, go to “Sprite renderer” (on the Inspector tab) and select Sorting Layer. Add a sorting layer called Player. Now go back and replace the layer of the player object from Default to Player. This way, the player will be in a different layer which is above the Default tilemap level.

Following, we add a “Player” tag to our sprite by selecting the Player option in the Tag’s drop-down:

Unity Player tag added to Player

Now we create a Prefabs folder:

Unity Prefabs folder selected

Then, we drag our player from the Demo to our new folder to create our prefab:

New Player prefab in Unity Prefabs folder

Before we actually proceed to how to move our player, we need to disable its gravity attribute. Otherwise, the player would just slide down as soon as our game starts running, and we do not want that. We click Edit -> Project Settings and set Y’s gravity to zero:

Unity Project Settings Physics 2D options

Moving the player

First, we create a new folder “Scripts”, just as we created the Prefabs folder above.

Inside it, we create a C# script called “PlayerMovement”:

PlayerMovement script in Unity Project window

We need the following code to move our player:

We have a field representing the speed of the player, and to update its Rigidbody we just multiply this speed by both the player’s horizontal and vertical axes.

The last thing we have to do is to add yet another component to our player (our movement script). We can search for PlayerMovement, add it, and test it with the speed we want:

Player Movement script added to Player object

We run it and check that the player is able to pass through the door (as expected):

Unity demo for 2D dungeon

In the next lesson, we are going to add a door prefab so that our player can move from one dungeon room to others.

Transcript Part 1

Hello everyone. Welcome to the Unity Procedural Dungeon Generation course. In this course you are going to learn how to use Unity to generate a procedural dungeon for your games.

We are going to do this by means of this demo with multiple rooms, obstacles, and enemies. In this course you are going to learn how to generate the level using Unity tile map features, so a level like this dungeon room here. How to procedurally generate a dungeon with multiple rooms, as you can see here, this room has doors to other rooms. Also, you’ll learn how to dynamically change tiles in the level to add obstacles in the dungeon such as those rocks here. And finally, how to randomly add other objects such as those enemies here, and a dungeon ghoul.

Now, let’s move to the first lesson, where we are going to start building our room.

Transcript Part 2

Hello everyone, in this lesson we are going to start building our demo by creating a tilemap.

You need to provide style map generation features, so we are going to use that. First, download the sprites for this tutorial which is this folder here. I already have my project. So, I have just created an empty Unity 2D project and I have added the sprites from the source code. And here, we are going to use this Terrain sprite here to build the tilemap.

So first, we need to do two things here. I have already done those things but I’m going to show what I did here. First, you need to change the Pixels Per Unit here to 40, so it to have the correct size in your game. And also we need to change the Sprite Mode here to Multiple and then open the Sprite Editor, click on the Slice, and slice the sprites here by the cell size using a size of 40 by 40. So this’ll slice the terrains exactly on their size here. So that’s what you need to do. Then you need to apply.

Now we can create a tilemap object from this sprite here, its Terrain sprite here. So let’s go here to our, I’m going to rename our scene to Demo and not SampleScene. And I’m going to create a new 2D object tilemap. This’ll create a grid and a tilemap object inside the grid. Now we need to populate this tilemap. So first, I’m going to open here the Window, 2D, Tile Palette. Let’s put it here. And here we are going to add the Terrain’s sprite to use for the tilemap.

So we need to create a new palette here. New Tile Palette called, for example, Dungeon Palette. Let’s create it. We need to save it in a folder. I’m going to create a folder here called Tile Palettes. And then here, it is the Dungeon Palette. Now we go to the, we drag and drop the terrains here so that you’re going to add the tiles of this sprite here in the palette. So again, we need to select the folder. Let’s save it in the same folder.

And it’s going to generate the tile objects for all the different tiles here in the spreadsheet. So here we have all the terrains for our game. Now we can start creating our tile map using this palette here. So we need to select the Brush Tool here and, for example, let’s select this tile here, and then we can put it in our map like this. And let’s put some walls here. So for example, want to put the walls around here, leaving an empty space here for the door. And then we save it.

The next step is making the walls here collidable because we don’t want the player to be able to walk through the walls. So, in order to do this, we need to select tilemap object here and we need to add a component called Tilemap Collider 2D. This will add colliders to all the tiles in the tilemap.

However, we don’t want the floor to be collidable as well. The only collidable tiles should be the walls. So the way we make the floors not collidable is going here, the tile palettes folder, select the floor tile, and changing the Collider Type here to None. Now, if you select the game, you can see that to have colliders, the colliders are those green squares here around the tile, and they are only on the walls. The floor doesn’t have any colliders on it. Now let’s try running the demo to see the map.

So, this is the tilemap. It don’t have anything special happening right now but soon we’re going to more stuff in our map. As an exercise, create your own tilemap. Feel free to use the tiles you prefer. The only requirement is that it must be a dungeon room with at least one way out. For example, the door I added in the bottom of the room. Don’t worry about the elements inside the room. For example, adding rocks and things like that.

We are going to procedural generate some obstacles later in the course. And that’s it for this lesson. In the next one, we are going to add a player to this map.

Transcript Part 3

Hello everyone. In this lesson we are going to add a player to our tile map. The player should be able to move through the dungeon and navigate to the rooms.

So let’s start by creating the player prefab. First, we are going to use this player sprite here from the sprites folder. So again, you need to change the pixels per unit to 30, I have already done this. And we need to change the sprite mode to multiple. And slice it into two sprites. We are only going to use one of them, but we need to slice otherwise we’re going to have two players walking in the game. So now we can select the first one here, drag and drop it to the scene. Change the name to player and this will be our player prefab. Now we need to add the components of it.

First let’s add a box collider 2D, and a rigid body 2D because we want to move the player. We don’t want the player to rotate and collide with things. So here in the rigid body we are going to open the constraints and check freeze rotation on Z. So this way it won’t rotate in the z axis when colliding with anything. Also we need to reduce the size of the collider so this green rectangle here is the collider, and we want the box to be a little bit smaller than the player. For example 0.7, this way we can make the player walk on the space of the exit. Otherwise it’ll be very hard to make the player fit here, because the box will be exactly the same size as the space.

Finally, we are going to assign the player tag to the player object, because we are going to use this tag later to identify the collisions between the door and the player. And in it we are going to create a prefabs folder and drag and drop the player here to create it’s prefab. So now it is officially a prefab.

Since this is a top-view game, we are seeing the game from the top, we don’t want any gravity force because we don’t want the player to fall in the screen like this, when we start playing. So we need to disable the gravity. We do this here in edit, project settings, physics 2D. And then here we have gravity x and gravity y. We are going to change gravity y to 0. This way the player won’t fall because there isn’t any gravity. Now let’s create the script to move the player.

So we’re going to create a new folder here called scripts. Let’s add a new C# script called player movement. And let’s open it. So you have the player movement script. This script you’ll need serializefield representing the speed of the player. So we are going to set the speed for the player. And the only method we need is the fixedupdate, which we’re going to use to update the player velocity.

The way we do this is by getting the horizontal and vertical input axis. So first put horizontal, and then we will do the same for the vertical. And then we access the rigid body 2D, setting it’s velocity to be a new vector2 where the x velocity is the value of the horizontal input, multiplied by the speed. And then the y is the vertical input multiplied by the speed. And that’s it, we just need this for the player movement.

To test it, we need to add the player movement here in the player prefab. And set a speed here, for example 5. Now let’s try playing and see if it’s working. So you have the player and we can move it with the arrow keys on the keyboard, so it’s working. And the player is colliding with the walls, as you can see. Also, we should be able to move the player here on the door because we reduced the box collider, otherwise it’ll be very hard to make the player fit on the space here. And that’s it for this lesson. In the next one we are going to add the door prefab to our demo. The door prefab will be here, and will be responsible to allow the player to leave the room.

Interested in continuing? Check out the full Procedural 2D Dungeons course, which is part of our RPG Academy.