The Illusion of Depth

August 6, 2021

Key to making a 2D point-and-click game like Sleuthhounds: Cruise seem real – even though it is a cartoon – is to give the appearance at least that the game world has depth. That is, that characters can appear to move forwards and backwards in the scene. As the Sleuthhounds games fundamentally use flat, two dimensional images it should come as no surprise that any techniques to make them seem three dimensional ultimately have to be tricks of some sort.

To give the illusion of depth, most rooms in a Sleuthhounds game use four basic techniques:

• Perspective
• Scaling
• Depth Masking
• Render Order

Note how the perspective of the room has the lines of hallway all converging towards the entrance at the far end. At the same time, Ampson is drawn smaller in the frame than Homes.
Click to view larger.

Perspective

Perspective is an art technique used in two dimensional paintings and such, by which things that are farther away are drawn smaller. For example, if you were to stand on a sidewalk and look along it. The sides of the sidewalk would seem to converge in the distance even though you know they actually run parallel to each other. Perspective is simply the art of drawing lines such that they do converge on each other to match what we see in our three dimensional reality.

Scaling

Paired with perspective is the use of scaling when characters are drawn – or rendered – in the scene. Just as the distance between parallel lines is reduced the farther back in the scene they go, so too is the size of a character. Characters closer to the front of the screen are rendered at a larger size than those at the back of the scene.

Here we see part of Homes obscured by the operating table. At the same time Ampson renders in front of both Homes and the operating table.
Click to view larger.

Depth Masking

Within many of the rooms in the Sleuthhounds game, characters can seemingly walk behind some parts of a scene while at the same time still displaying over more distant parts of the scene. This is accomplished through the use of depth masking, wherein every pixel – the little dots that make up the display of your computer screen – is assigned a depth value. In my game engine, the farther away a part of the scene is, the greater that value is. When characters are rendered in the scene, they are also given a depth value. During the rendering process, if the character’s depth value is less than the depth value of a given pixel, then part of the character will be drawn there and if it is more than the depth value of a pixel, it won’t.

Render Order

A character’s depth value isn’t just compared to the depth values within a scene but with the depth values of all the other characters who are also rendered in that scene. Characters with a larger depth value – i.e. ones who are farther away in the scene – are rendered first. This means that pixels from characters with a smaller depth value – i.e. closer to the front of the scene – will be rendered overtop of the farther away characters.

Other Tricks

Sometimes the use of the common techniques for making a two dimensional room seem like it has depth aren’t enough. Sometimes more specific tricks need to be employed. One such moment came when I was having the Sleuthhounds sit down to eat breakfast in the dining room aboard the cruise ship.

Ampson eats at breakfast. Notice how her body is behind the table but her arm is in front in the second frame.
Click to view larger.

Here, Jane Ampson needed to be sitting at one of the dining tables. As we can see in the first and third frames above, Ampson sitting behind the table can be accomplished through the simple use of depth masking. The pixels for the table have a lower depth value than Ampson does and so the part of her body that occupies the same space as those pixels is not drawn.

But how does depth masking account for the second frame? Here we can see that Ampson’s arm is rendered in front of the table even though the rest of her body is still obscured. In this instance, I had to get creative, and as with most illusions the trick is actually quite simple.

Sometimes more ellaborate tricks are needed for the illusion of depth, such as breaking an animation frame into two pieces.

For the moment where Ampson’s arm needs to be drawn in front of the table, her arm becomes a separate image. Being separate, it can be assigned a different depth value. So the pixels of the table have a fixed depth value of 144. Her body has a depth value of 150, which causes her to render behind the table. And her arm has a depth value of 140, which causes it to render overtop both Ampson’s body and the table.

The Sleuthhounds games may be animated, cartoon adventures, but it’s still important to make them seem grounded in reality. By using a variety techniques, some common and some for special cases, it’s possible to give the 2D worlds the characters inhabit the much needed dimension of depth. This helps with the willing suspension of disbelief that players need to enter into the world of the Sleuthhounds rather than thinking it’s all just a game.

Previous:   |   Next: