Integrating 3D elements into a 2D game

As you maybe have noticed, Without Escape is a 2D game. All its graphics are pre-rendered 2D images with 2D UI elements on top. However, when you get an item, you can see this nice rotation animation:

Since everything is pre-rendered, you might think that those item animations are some kind of pre-rendered video or something like that. Wrong! They are actually real-time 3D models with their own textures, materials, lighting and reflections.

Rotating items are a common thing in games in order to see in detail the shape of the item. You can see them in games series like Resident Evil and Silent Hill. So I thought it would be nice to have them in Without Escape too.

The problem #

I needed to solve two small problems in order have those 3D items nicely integrated into the 2D:

• The items appear inside a 2D window. That window has a moving and fading animation when it opens and closes. So the items need to move and fade along with the window. But it would be problematic because of perspective and some tricky things that happen when dealing with transparencies in real-time 3D graphics.
• I wanted the items to integrate with the environment, to be affected by their lights and the objects that surround it. It’s a subtle thing, but I wanted to increase the feeling that you are getting the item in that specific room.

The solution #

For the first problem, the best way to have that 3D object to behave correctly and without complications in a 2D window is to actually convert it into a 2D element. This can be easily done with render textures. A render texture is a special kind of texture that can be updated dynamically. They are used for a lot of things in video games and you can render whatever you want in real-time onto them.

In my case, I did a small lighting setup with the rotating item in the middle, a main orange light in the front, a secondary blue light in the back to have some backlighting, and a camera. All these elements are actually outside of the screen while you play, but you are never going to see them.

The lights obviously provide some nice lighting to the object. And the camera films all that. Everything that the camera sees is stored into a render texture. You can see that in the bottom right corner of the screenshot. And since that is a 2d texture, I can actually use it however I want, in my case as another 2D element in the 2D window that can fade and move along with it. As the item rotates, the camera will see that and will update the render texture in order for you to see a magnificent 60fps animation.

But what about the second problem? We already have two lights that light the item, but they are used to make the 3D model to pop out more. How do we make a 3D object to reflect the environment? It is a 2D background, so you can’t do proper reflections with that. So I pre-rendered a low resolution HDR 360º panorama of the room:

If you wrap around this texture around a sphere, you can create an effect like in Google Street View. You can rotate the camera and see the environment in 360 degrees.

So this is kind of 3D, right? In my case I used it as an environment map so I can generate real-time reflections of the environment! This is how the key would look if you could obtain it in a different environment:

And look! You can even see the bed reflected on the battery.

Conclusion #

So that’s it. Hopefully you find these small tricks interesting, maybe you can learn something from it, or maybe you can give me feedback if you see something wrong. Now, if you’ll excuse me, I’ll keep workig on Without Escape.

Have a nice day!