Adding 3D to a 2D Game

July 29, 2016

I’ve long been an advocate of story/design driving the technology used in a game rather than the other way around. This makes the design process easy (well, easier) as when I’m designing a game I generally don’t worry about how I’m actually going to implement the game. It allows for more creative freedom during the initial design process. The challenge comes at implementation time when I reach a part of the design to which programmer me says to designer me, “and just how exactly did you expect me to do that?” Such has been the case for the Halloween Sleuthhounds adventure game I’ve been working on.

Even though the Sleuthhounds games are light comic fair, I do take them seriously when writing them. This involves doing actual research for the games so that they have a grounding in reality that I can then take and embellish to fit the Sleuthhounds world. When I started designing the Halloween adventure, I first began by researching Halloween itself. The game takes place at a Halloween costume party, so In particular I was looking for traditional Halloween activities that could serve as inspiration for elements to include in such a venue. One such activity I found was bobbing for apples.

A Jane Ampson timeline scene.

All of the Sleuthhounds games are, at their core, 2D animated point-n-click adventure games. However, I’ve always tried to mix up the traditional “character walking around in a room” scenes with a variety of other scenes that pose different challenges. These typically take the form of a close up view where the player has to directly manipulate objects within that view. A couple of examples include the Pureluck Homes deduction scenes where you have to observe various clues related to a given subject and then combine those clues to solve the deduction, or the Jane Ampson timelines where you have to determine the order of a series of events that led to the crime.

For the apple bobbing challenge, I thought it would be interesting and fun for the player to do the actual bobbing for apples as a Halloween party contest. In such a contest, a barrel filled with water is brought out and apples are dumped in. Without using their hands, a contestant must lunge into the water with their teeth trying to catch the bobbing apples. Now, that’s easy to write into a design for a 2D game, but it’s rather tricky to deal with when it comes time to implement it.

There are a couple of difficulties with implementing apple bobbing in a 2D game. First, you need to have apples actually bobbing, meaning that apples can rise up and lower down through a layer of water. To do that strictly in 2D animation would require drawing multiple images for one bobbing apple. You might need an image of an apple a quarter submerged, half submerged, three quarters submerged, and fully submerged, for example. And the smoother you want that submersion to look in game the more images you’d need to draw.

The second challenge was that I didn’t just want the apples to bob up and down, I wanted them to slowly revolve as well. So now not only do you need images for the bobbing, but those images need to be drawn at different angles so it looks like an apple is also spinning. And that’s just for one apple. Unless you wanted all the apples to bob and spin in exactly the same way, you’d need to draw all those images oriented slightly differently to give variety to the apples.

All of that seemed like a lot of work.

Fortunately, by the time I got around to implementing the apple bobbing in the Sleuthhounds game I had already done a fair amount of work on my other currently in development game, Robyn HUD. Robyn HUD is a fully 3D game and it provided the opportunity to add 3D support to the same basic game engine I’ve developed for creating the Sleuthhounds games.

The thing about using a 3D object – an apple, for example – is that it’s very straightforward to bob that object up and down and have it revolve at the same time. The tricky thing here is to get those 3D apples integrated into an otherwise hand drawn 2D scene without looking out of place.

A wireframe view of the apple showing it’s triangles.

3D models are made up of a bunch of triangles, with the points of the triangles floating in 3D space. Triangles obviously aren’t round. Apples are. It takes a fair number of triangles to make objects really look round. So the first step was to create an apple with a sufficient number of triangles so as to look as round as the hand drawn characters in the game.

Cel shaded apples bobbing in a 2D scene.

The next step was to then make the colouring of the apples look similar to how I colour the hand drawn artwork in the game. This was achieved through a process known as cel shading. With normal, realistic looking shading, shadows usually have a soft gradient, transitioning smoothly from lit areas to darker areas. With cel shading these shadows are “flattened” so that you end up with a light color, a half dark color, and a very dark color with no transitioning in between. I won’t go into the technical details here, but in order to keep the system requirements for the game as low as possible, I used an old school technique for cel shading. Pretty well any graphics card made in at least the last fifteen years should have no problem with the apples.

Lest fans of classic 2D point-n-click fare think this is the thin edge of the wedge for the Sleuthhounds games going full 3D, let me wrap up today by saying this: I love drawing the Sleuthhounds characters. By hand. I love the stylized look they have, a style that would be hard to capture perfectly in 3D (they’re different mediums after all). So, yes, the Halloween game uses 3D to solve the technical challenges in this one scene. But, no, Sleuthhounds in general is not going 3D. It’s a flat world after all.

Previous:   |   Next: