Uplifting: Combining 2D and 3D

Augsut 5, 2022

Previously, I showed the more moodily lit backstage area of the ship in Sleuthhounds: Cruise. Situated directly below that is another more interestingly lit room, the undercroft. This is where the ship’s theatre troupe can prepare for play performances. Apart from the lighting, the undercroft is also one of those rare locations that combines both 2D and 3D graphics in the game.

Most of the undercroft is represented by 2D graphics.
Click to view larger.

The vast majority of rooms in the game are made up entirely of 2D graphics. They’re drawn so as to look like they have depth and perspective, but really they’re represented by a flat image kind of like a photograph. That’s true for most of this scene as well, including the the doors, the stairway, and the changing booths at the back of the room.

Things get more interesting on the middle right of the room. Here, an elevator allows stagehands to raise and lower heavy props, pieces of set, and the occasional actor. The tricky thing with this room is that when the elevator moves it needs to cross the vanishing point.

Imagine yourself standing on a sidewalk and looking in the direction that it leads. Even though the sidewalk is straight and its sides parallel, from your point of view it appears as if the two sides of the sidewalk angle in towards one another. The point in the distance where the two sides meet is the vanishing point. In 2D art, drawing lines so that they converge in the same way is one of the ways to make a scene seem like it has depth.

In the undercroft, the vanishing point if roughly in the middle right of the room, more or less behind the elevator. If we look at the right hand wall of the room, we can see that the line representing the join between the wall and the ceiling angles down and to the left as it heads toward the vanishing point. We can also see that the line where that wall and the floor meets angles up and to the left.

The 3D elevator crosses the vanishing point.
Click to view larger.

Just as the room has a ceiling and floor that need these angled lines to provide depth, the elevator platform similarly has a top and a bottom and its left and right sides need to be angled to give it depth. However, since the elevator can cross the vanishing point, it can’t have statically angled sides. The sides need to angle down and in when the elevator is above the vanishing point and up and in when it’s below the vanishing point. Furthermore, the visible surface of the elevator needs to become less and less the closer to the vanishing point it gets.

With these dynamic considerations in mind, the easiest way to handle the elevator was to create it as a 3D model. Such a model has true depth in the computer and can be moved and oriented any which way. For my purposes, all I needed was to be able to raise it up and down. It took a little finagling to get it to line up properly and fit in with the 2D background image, but the result is a room where the elevator can move vertically and seemlessly transition across the vanishing point.

Previous:   |   Next: