The struggle with dynamic shadows – Dev Diary #8

As we have already mentioned many times, visual part of a game is very important to us. Even more so when it is essential to support a stealth gameplay mechanics. Hiding in shadow is one piece in Wobo’s repertoire on his escape. In order to keep things clear and obvious for players, while not compromising on quality of visuals, all shadows must be sharp and dark whereas the light must be bright red. The challenge here is a limited performance of mobile devices. In this test scene, I will point your attention only to the light & shadow on the metal footbridge.

Here is an example of a big spotlight in 4th level that can detect Wobo (which would mean a lots of problems!) when he is not hidden in a shadow. Players can intuitively distinguish the safe (shadows) and danger areas (red light). Sounds easy and obvious, right?

the_struggle_with_dynamic_shadows_spotlight_shadows_deferred

 

Well, it is on a PC, because you can use deferred rendering and real-time spotlight shadows. This comes right out of the box and all you need to do is to turn on this setting.

The situation on mobile platforms with only forward rendering available is not that straightforward. This is how it looks:

the_struggle_with_dynamic_shadows_spotlight_shadows_forward

Note that there are no lightmaps, but you should get the idea. There are no shadows at all. Light is simply casted on all objects in its range. From tech perspective, forward rendering is the simplest way to cast lights.

One of the workarounds we have found is a “shadows via projectors” approach. In our example scene it looks like this:

the_struggle_with_dynamic_shadows_spotlight_shadows_blobshadows

A bit of an improvement, but far from a clear solution. We have rejected it very soon, because shadows are poorly defined (not even when you carefully prepare shadow textures) and players could not correctly assume where they are hidden and where they’re not. Not to mention that shadowed objects look just awful. Moreover, this method is quite performance heavy. For comparison, on older mobile phones and tablets we were able to reach 5 – 7 FPS (before other optimization setting). A clear no go for a stealth-adventure game… or any other as well :)

Next thing we have tried was an approach where shadows are baked into lightmaps using white support light:

the_struggle_with_dynamic_shadows_spotlight_shadows_bakedshadows

As you can see, this looks a lot better. Shadows are always visible on the floor and players can see where they can hide. The problem is that the red spotlight shines everywhere, even inside of shadows, and that is very confusing. The distinction between a dark shadow and a red-lit area is almost nonexistent, especially on smaller screens of phones.

Few tough brainstorming sessions later, we have come up with a brilliant idea of using layers, culling, lightmapping, transparent materials and some manual editing via image editor. It is far from a fully automated solution, but in terms of visual quality and performance, it delivers. For comparison, using the same test devices, a 720p version with these “dynamic” shadows runs smoothly with 25 – 30 FPS. And the final result is below:

the_struggle_with_dynamic_shadows_spotlight_shadows_fakedshadows

(note: lower part of this scene has not been optimized so the shadows of barrels look corrupted) Compare the result with the first two images – PC version and a “default” version of shadows on mobile devices.

Now with a clear solution in our hands, we can make Wobo’s path to freedom even more interesting. Although this is not the only approach to stealth parts in the game (yes, there is more stealth than just hiding in shadows), but definitively one of the most impressive ones in terms of visuals.

To play this level for yourself, please join our Google Community – The Great Wobo Escape – Testing Group (Android) or contact us on info@gamifi.cc with your Apple ID so we can provide you access to the Beta version.