Adding dynamism to static backgrounds (Part 2)

If you want to check the first post of this series of posts, check this link

As mentioned in the previous article, my game is all made with static pre-rendered backgrounds. So I wanted to apply some tricks and effects in order to provide some animation to them. Here’s another trick I’ve used in order to have flickering lights. I’ll talk about this room with candles:

The process #

I wanted to add some subtle flickering to those candles. The easiest way would be to change the brightness of the image. The problem with that is that I would get an unrealistic change of intensity in the whole image. The ideal thing would be to be able to apply different animations to each light source and try to affect realistically to the lighting and shadows of the room. Since the whole room is one static image, I need more information to know how each light affects to the room. And that information comes in form of this image I rendered:

Cool! But wait, what is the purpose of those multicolored lights? This actually isn’t an image with colored lights. These are actually three grayscale images packed into one. Let me explain:

A color image is composed by three channels: red, green and blue. The combination of different amounts of these three primary colors is what forms any possible color and generates a full color image. In games, you sometimes need several grayscale textures to store whatever. If you have three of them, they would take some space and the game would have to load those three textures. BUT, what if we store those three images inside the red, green and blue channels of a single texture? We would have only one texture to load and it would take in total 1/3 of disk space compared to having three separate textures!

This is a very common technique called channel packing (maybe it has other names too). So as I said, in the previous color image I actually store three different grayscale images in order to optimize and save space and loading times. In a shader, I can separate those three images again and do whatever I want with each one:

Each image contains the whole room being lit only by different groups of lights. This lets me know how each group of lights affects to the room. So knowing that information, I basically apply different animations to each group of lights by changing their brightness of each image and then overlay that on top of the static background image. And this is the final result! (Note: the effect has been exaggerated in order to be more easily perceived. In the game it is actually more subtle).

Conclusion #

This tricks are helping to provide more dynamism to Without Escape, making the environments feel more real and “alive”. Some other day I’ll write another part of this series of blog posts with the best trick of all!

Stay tuned!