Introduction
In this tutorial, we will be going over some ways to create tiles for a faux 3D dungeon in the first-person perspective. This style is most recognizable from games like Eye of the Beholder, Wizardry, or Might and Magic.
Eye of the Beholder
These types of games utilized a simulated first-person perspective by having textures that were drawn to specific angles. This could be done using pre-rendered 3D graphics, pixel art, or even ray casting. This type of game is also referred to as a blobber, due to the way both the player and enemy parties move around the game world on a grid as singular units, or blobs. This is different from being able to control or move each character around the map individually. Minor details, but it helps to have an idea what we are talking about here.
Dungeon Layers
Before we begin, we need to break things down just a little bit. I would like to clarify some terminology I will be using throughout the tutorial. Keep in mind, if you begin with a 512×512 texture at the start of this tutorial, then our dungeon view size is also going to be 512×512.
When talking about blobbers or first-person dungeon crawlers, it is important to understand how the entire dungeon is laid out on a grid. Each individual grid square is referred to as a cell. The main dungeon view area is separated into multiple rows of cells called layers, which display the dungeon tiles at varying sizes to create the illusion of perspective. A cell is made up of several tiles, such as the ceiling, floor, or walls. The main difference between layers and cells is that each layer is made up of a certain number of cells used to display the dungeon to the player. Whereas cells only represent a single room, or a single space on the grid, and are made up of individual tiles.
- Tile – An individual wall, floor, or ceiling tile, used to compose Cells
- Cell – Made up of Tiles to form a single room or hall and takes up one grid square
- Layer – Made up of Cells to form a single depth-layer of the dungeon view area
In the example image below, you can see a single cell from each layer of a dungeon before they have been assembled into a hallway.
Left: Layer 1 / Middle: Layer 2 / Right: Layer 3
Each layer of the dungeon view is 1/2 the size and 1/2 the brightness of the layer above it. The brightness values I will be using are a personal preference, since you can use any brightness values you wish, but for the sake of this tutorial I will be following my own 1/2 brightness rule. As you can see in the above example, the leftmost image (or Layer 1) is the brightest and the largest layer of the dungeon. It is the same size as the dungeon view area, meaning it takes up a 512×512 area in the center of the screen. The center image (or Layer 2) has been scaled 50% smaller than Layer 1 and uses gradient shading that is 50% darker than Layer 1. The same is true of the rightmost image (or Layer 3) in that it is both 50% darker and 50% smaller than Layer 2.
It is this particular resizing and shading that gives a really nice illusion of depth, especially when you see how the layers are combined together to produce a hallway.
Hallway made with 3 layers
In the above animation, there are 3 layers, and each of the layers is displaying one cell from the grid. This can be more easily visualized if we take away the walls and leave just the floor. In the image below, you can see each cell represented with a blue outline and a corresponding number.
Numbered Cells Starting from Bottom Left
Layer 1 contains cells 1, 2, and 3. You’ll notice that Layer 2 actually contains five cells instead of three, numbered 4, 5, 6, 7, and 8. In the very back, Layer 3 contains nine cells and is actually difficult to see due to being squished by the perspective deformation, but you get the idea. In the above example animation, you are seeing cells 2, 6, and 13, a view straight down the center in front of the player. This division of floor cells actually allows for displaying more than just one single room in front of the player. It also allows for displaying hallways, side passages, and open spaces. Due to the way the illusion is created using a vanishing point perspective, there are certain cells that extend beyond the actual boundary of the viewable area. We will get more into that later when we discuss how to make these floor textures!
Each layer displaying one cell
As you can see in the above image, each cell is displayed on a different layer of the display grid. Layer 1 is closest to the player and is displaying cell 2, while Layer 2 is slightly further away and displaying cell 6. The very back layer, Layer 3 is the furthest from the player and is displaying cell 13 using the darkest shading to create the illusion of the light fading out the further the cell is from the player.
You can also visualize each layer by leaving only the Back Walls to show where each cell will be displayed. The following animation shows the positions of the Back Wall tiles for each cell on all three layers. You will notice that the further back in layers you go, the more cells that are required to display the layer correctly within the bounds of the dungeon view area.
Back Walls – Cells Indicated by Blue Lines
The actual setup for this type of dungeon crawler can seem a bit complicated at first, but once you break everything down piece by piece, you will start to see exactly what is going on. All you need is one single texture, and you can create all the walls in every necessary perspective to display your dungeon. The example animation below shows how every individual wall tile can also be displayed or hidden, in order to show side passages or further down the hall in front of the player.
Example Side Hallways / Cells Indicated by Blue Outlines
This tutorial has a lot of steps, but once you have gone through and converted a few textures into this type of tile, the process will speed up a lot. By no means is it required that you follow every single step in this tutorial, especially the ones involving shading or manual adjustments to the individual tiles. It is entirely possible to create the tiles without any shading effects so you can add your own lighting or post-processing effects in a game engine instead.
Perspective Transform
First, we should start with something basic, like how to assemble some tiles together to form a room, or cell. We only need five tiles to simulate the appearance of a hallway or a room! Take a look at the example below to get an idea of how the screen is split into separate sections.
Left: Basic Outline / Center: Index Mask / Right: Textured Hallway
The basic construction of a pseudo-3D room uses several skewed textures with varying degrees of shading to simulate depth. In the above example, the center image is a 5 colored indexing mask. I will be referring to the different tiles by specific names throughout this tutorial, as explained below:
- Green – Top Wall
- Blue – Back Wall
- Dark Grey – Left Wall
- Light Grey – Right Wall
- Red – Floor
Once again, we will be firing up our favorite free image editing software, GIMP. If you have followed any of my other tutorials, you will be familiar with this first step. We need to select a seamless texture that we would like to use. While it is not required that you use seamless textures, as you may not need to in every case, for the sake of this tutorial, I will be starting with a seamless brick texture from one of the Screaming Brain Studios Tiny Texture Packs. Also, for the sake of this tutorial, I am going to select a 512×512 texture to start with.
512×512 Brick Texture
You need to open two separate copies of the texture you would like to use. You can either copy and paste the texture to a new blank canvas or just open the texture twice, but the choice is up to you. We want to have one backup copy of our original texture and one canvas we can work in. Once you have two copies of the same texture open, select one of them as the workspace for this tutorial and leave the other one alone for now.
First, we are going to create the Back Wall. This tile is the simplest tile to make, since all we need to do is resize the texture to one half the size of the original. However, we don’t want to resize the entire image. Rather we just want to scale down the canvas layer, so we have some empty canvas space to work with. At the top menu bar, select Layer -> Scale Layer to bring up the settings window.
Scale Layer by 1/2 its Original Size
To create a Back Wall, we need to resize the texture so that it is 1/2 its original size. For a 512×512 texture, change the size to 256×256 and press Scale. You’ll see that instead of resizing the entire canvas, the texture has been resized at the very center of the canvas leaving some empty space around the edges.
Layer Scaled by 1/2
Switch over to the second copy of our texture, making sure the selection tool is active, and press Ctrl+A followed by Ctrl+C to select the entire image and copy it to the clipboard. We are simply going to paste a copy of the texture on top of our Back Wall. Switch back over to the Back Wall texture and press Ctrl+V to paste the larger texture. Right click on the layer to bring up a menu where you can select Paste to New Layer. It would also be helpful to rename this layer to Left Wall since we are going the make that next.
Now we need to make sure that Grid Snapping has been turned on and configured correctly, so that we can keep things nice and precise. At the top of the screen, select Image -> Configure Grid to bring up the grid settings. Change the values for the Horizontal and Vertical spacing to 8 and press OK
Grid Spacing Settings
Now in order to keep things aligned to this grid, we also need to enable grid snapping. In the menu bar at the top, click on View and make sure the X next to Grid Snapping is visible. This will make everything stay perfectly aligned to our grid when we move anything around.
To begin making our Left Wall, select the Left Wall layer to make it active. We are going to use a tool that comes with GIMP to apply some perspective skewing to our textures. With the Left Wall layer selected, go to the Tools menu at the top of the screen and select Transform Tools -> Perspective to create some knobs at the corners of our texture.
Perspective Tool Active
The diamonds that have appeared at the corners of the texture are used to resize and scale the layer. Starting with the upper right and lower right knobs, shift them over until they are 16 squares from the left edge of the canvas. This will line it up vertically with the left edge of the Back Wall like in the example below.
Texture Shifted to Left Side
Now all that needs to be done is bringing the same two corner knobs inwards towards the Back Wall by 16 grid squares. Move the bottom right knob up until it lines up with the bottom edge of the Back Wall, then move the top right knob down until it lines up with the top edge of the Back Wall. You could also use Photoshop‘s Free Transform feature to produce this effect, but I prefer using GIMP for this.
Skewed Left Wall
Press Enter to accept the changes. The Right Wall is made in exactly the same way, by pasting our original texture into a new layer and using the Perspective tool to instead stretch the texture to the right. Be sure to change the name of this new layer to Right Wall. Click and drag the upper left and lower left knobs and slide them until they are 16 squares away from the right edge this time.
Texture Shifted to Right Side
Once again, you need to drag the upper left knob down to meet the top right corner of the Back Wall, and the lower left knob up to meet the bottom right corner of the Back Wall. Now we almost have a whole room!
Skewed Right Wall
With the Right Wall in place, press OK to confirm the transformation operation. Unsurprisingly, the process for making the Top Wall and the Floor tiles is exactly the same. Instead of using the same gray brick texture as the walls, let’s pick another texture that would work well as a floor. Once you have chosen a texture, open and paste it into a new layer and rename the layer Floor. We will repeat the same process as above, only this time drag the upper left and upper right perspective knobs down until the texture lines up with the bottom edge of the Back Wall.
Floor Texture Stretched Towards the Bottom Edge
Just like with the Left and Right Walls, we also need to grab the upper left and upper right knobs and drag them 16 squares away from the edges of the image, so they line up with the left and right edges of the Back Wall. This particular floor texture is mostly a placeholder, as we will be covering how to properly make backgrounds to use with these types of tiles in a later section of the tutorial, and they replace the floor and ceiling tiles entirely. Once you have lined up the Floor texture, press Enter to confirm the perspective transform.
Skewed Floor Texture
By now, this process is getting a little bit repetitive, so I won’t repeat myself again for the Top Wall, but once you have selected a texture you like, perform all the steps from above (creating a new layer, skewing the texture, and confirming your changes) and you will have the basic layout of your first person dungeon crawler tiles.
Skewed Top Wall
This is a very basic setup for creating this type of artwork, and if you keep reading further into this tutorial, we will go over a better way to make floors and ceilings. Before we get to any of that, we are just going to create the tiles necessary to form one single cell. At the moment, things look a little bit flat. There are a few tricks you can use to add a bit of depth to the tiles, so everything has a bit more dimension.
Simple Shading
One thing we can do to give our scene a little bit more depth is to apply some brightness adjustments to our wall tiles. Since each tile is currently on its own unique layer, we can tweak each one separately. Start by selecting the Left Wall layer to make it active. Click on Colors in the toolbar and select Brightness-Contrast to bring up the settings window. Change the Brightness value to –50 to darken the Left Wall a bit and press OK.
Brightness Set to -50
Select the Right Wall layer next and repeat this same process. We want both the Left Wall and the Right Wall to have the same brightness value. Once you have changed the brightness on both walls, you should have something that resembles the image below.
Shaded Left and Right Walls
Again, the process for the Top Wall is exactly the same, only this time we want to darken it by -75 instead of -50. While not required, you could also increase the brightness of the Floor tile if you want, but it is best to keep the value between 25 and 50 so it doesn’t look too out of place. I’m just going to leave the Floor tile untouched since it looks fine as it is.
Final Shaded Walls
Now that we have our basic shading in place, it is starting to look nicer! We could stop here, but there are a few more things we can do to make it look a little bit better.
Gradient Shading
The very first thing we need to do is select our foreground and background colors. Click on the Foreground Color to bring up the color chooser window. For the Foreground Color, we want to use a light gray color, so set the R, B, and G sliders to 25, set the Hue and Saturation sliders to 0, and set the Value slider to 25.
Foreground Color Settings
Next, we want to set the background color to a lighter shade of gray. This particular shade of gray allows the original texture brightness to show through, while the darker foreground color will cause it to darken. It is up to you how dark you would like to set the foreground color, but I’m going to use the settings in the image below. To get the foreground color, I basically just divided the values of each slider used by the background color by 2.
Background Color Settings
Create a new layer just above the Left Wall layer and name it Left Wall Shading. This is where we are going to create our shading gradient. We need this layer to be the same size as the Left Wall layer, so right click on the Left Wall Shading layer and select Layer Boundary Size. The width of the Left and Right Wall tiles is equal to 1/4 the size of the entire canvas width. This means since our canvas is 512px wide, we want to set the width of our layer boundary to 128px.
Layer Boundary Settings
You won’t see anything in the preview area because we haven’t actually put anything on this layer yet. Press Resize to confirm the layer boundary size. With the gradient tool selected, make sure that the gradient Shape is set to Linear and draw a line a few ticks from the left edge of the canvas over to the right side of the Left Wall layer, as in the image below.
Left Wall Gradient
You can experiment with the amount of gradient you use, but I like to start about 16 to 32 pixels from the edge of the tile so the light gray color takes up a portion of the texture. This allows the original brightness of the texture to show, rather than being darkened or lightened by the gradient. Press Enter to confirm the creation of the gradient. Finally, we need to change the Blend Mode of the Left Wall Gradient layer to Grain Merge. Simply click the Mode drop down menu and select Grain Merge from the list. This is a very specific blending mode that I have trouble explaining properly, but it is my opinion that it gives the best results for this type of effect.
Blend Mode Set to Grain Merge
Lastly, right click on the Left Wall Gradient layer and select Merge Down to combine the shading layer with the original wall texture. We can repeat this same process for each wall to make it appear as if the light gets darker towards the back of the room.
Shaded Wall, Floor, and Ceiling Tiles
As you can see, the Back Wall is now far too bright. To fix this, create another new layer above the Back Wall layer. This time, instead of drawing the gradient across the center of the image, start from one of the edges of the canvas like we did with the Left and Right Wall layers. If you prefer, you can also use the Bucket Fill tool to simply fill the layer with the foreground color.
Shading the Back Wall
Change the blend mode of the gradient layer to Grain Merge to see the final shading effect on the Back Wall. Right click on the gradient layer and select Merge Down to combine it with the Back Wall.
Completed Dungeon Tiles
Now you can hide the individual layers and export each tile individually, or you can continue experimenting with different types of shading. Another trick is to apply the gradients to the textures before applying the Perspective Transform, but this is entirely up to you and your needs. I’ll go over more techniques in the next section of the tutorial.
You can easily convert any existing texture into this type of tile, but if you want to save some time, don’t forget you can already grab an entire pack of ready-made tiles from Screaming Brain Studios in the Old School Dungeon Crawler Pack!
*This tutorial is in the process of being expanded upon!