(Part of the Automatic Game Art project)
Part 1 ended with little more than basic square tiles. We need to do a lot more for it to start looking nice. The next step, something that makes a huge difference between games that look old and amateurish to modern games, is a 3D depth effect – making tiles look like cubes rather than squares, so that you can actually see the floor characters walk on.
Turning a square into a cube is quite simple – Pick three adjacent vertices, from each of them draw a line in a direction away from the square, so that all three lines are parallel and of equal length, then connect the lines. To keep things simple, we fill the surface of each face with a copy of the original tile face.
Now we have a simple, initial 3D effect to make our tiles more realistic. This will open up some options in the future, when we want to design interesting-looking floors for our characters to walk on. Since it’s all automatically generated, we can still make all the sizes variable, so we can instantly shift the angle to be different, showing more floor or more side.
There is one thing we need to think about – This effect requires some thought about our rendering process. If our tiles have depth, then we start having cases where they block each other, which means we need to think about the order in which we draw them. Consider two tiles places right next to each other – If we draw the left one before the right one, we get a different result than if we draw the right one first:
Since we chose to make the 3D effect as viewed from the bottom left, we need to draw the tiles from bottom left to top right, and this problem will be solved.
Now, having some depth also gives us another advantage – It’s now easier to have background tiles, that won’t be confused for foreground. If our foreground tiles extrude out towards the player’s view, then we can place tiles in the background as well without a 3D effect, remembering to draw them before drawing the foreground to make sure it stays in the back, and it would be easy to see which tile is background and which is foreground. Here is the result, in our test game engine:
Next time, we’ll try to put some decorations on those tiles.