Adding dynamism to static backgrounds

Introduction #

Let’s talk a little bit about one of the tricks I’ve used in Without Escape to add some dynamism to its static backgrounds.

As you’ve probably have seen, the game relies on interacting with pre-rendered backgrounds. That makes everything a little bit too static. It’s always nice to have something moving, even if it is a subtle light flickering, that helps to provide a specific mood to that particular room. But yeah, pre-rendered backgrounds makes things a little bit difficult. Of course I could render looping videos instead of static images as backgrounds, but it would take too much render time given my CPU, render engine and quality of the backgrounds. So I’ve been working on some real time effects in order to spice up a little bit some of the rooms. Besides, real time effects have the benefit of being able to run at 60fps or whatever framerate without having to render more animation frames.

The process #

Let’s take into consideration this room:

As you can see, it is a room filled with lava. So it should be pretty hot in there, right? Those hanging bodies must be sweating like crazy inside those body bags! So what can I do in order to make the player feel that heat better? Let’s add some heat waves! But there are some properties that are hard to recreate with static 2D backgrounds. For example, heat waves should be more visible the larger the distance from the point of view is. But there’s not depth or distance information in a 2D background. We’ll see how we handle that.

For now, let’s create the heat waves distortion. I’ve done this with a simple shader that, based on a noise texture, it distorts the background. Without being too specific (because it would be quite a long post), I created the following texture:

And inside a shader, I read the colors of this texture, and based on that pattern, I apply a distortion to the background. And if apply some movement to the noise texture, that distortion on the background will also move, like this:

Nice, the heat waves are there! But they can be seen with the same intensity through all the background. The closest parts to the point of view should not have distortion. As I said before, I don’t have any kind of depth information in that 2D background. So one thing that can be done is to render from the 3D application another background containing a depth map. It’s easy and quick to do. That depth map looks like this:

This gray scale image represents depth. The larger the distance from the point of view, the lighter the color is, so I used this information to know where the heat waves effect should be more or less intense (white = intense effect, black = no effect). I also painted a black gradient at the top of the image so the effect is more intense at the bottom of the room (where the lava is) and more subtle at the top (the heat waves start to fade). When I apply it to the distortion, this is the final result!

Conclusion #

So this is one of the tricks I’ve used in some of the backgrounds from Without Escape. I’ve also used it to animate blood in one of them.

Hopefully you find this interesting. Have a nice day!