This demo is interactive! Click the lock icon in the bottom right to enable orbit controls. Zoom with mousewheel or pinch. Rotate with click & drag, or touch & drag).
0. Setup
The first thing we did was attach a spotlight to the camera. Each game asset was added as a 2D texture applied to a flat plane.
1. Make objects face camera
Next we made these flat planes always rotate to face the camera. Some objects, like the eggs attached to the walls, do not rotate more than 30 degrees away from their original angle.
We also applied an opacity texture so they no longer look like images drawn on a flat plane.
2. Turn off ambient light
Next we turned off the ambient light by setting its color to black. This turns everything not directly in range of the spotlight completely black.
Try zooming in and out to bring the light closer or farther from the walls and objects.
3. Set camera clear color to black
Even with ambient light set to black, the scene still isn't pitch black everywhere outside of the light's range as expected. This is because the camera has a default clear color that isn't black. So any gaps/empty space will have this dark gray color.
To fix this, we just set the camera clear color to black.
4. Create custom material to fix "washed out" look
One big problem with the default lighting here is that everything looks washed out when the light hits it directly. This is most obvious when shining the light straight at a wall, or at the big monster.
This happens because we're using a physically based lighting model, but our materials are all these simple 2D images that only have a diffuse color.
The desired outcome is that these objects should always render using their original colors, regardless of how much light reaches them. This is usually done by creating an "unlit" material. But we also want them to NOT be visible if NO light reaches them.
To achieve this, we created a custom material that behaves just like a standard physically based material, but just interpolates between the original color and black based on the amount of light received. This removes any realistic lighting effects like reflection and specular that we don't want.
We elaborate more on how this was done later in the article.
5. Use emissive material to make objects glow in the dark
Next we applied an emissive texture to each object to define which areas should glow in the dark, such as lights on the walls or the eyes of the monsters.
This helps the player see a little bit even if their light is turned off, and it creates a very cool effect where you see just the eyes glowing in the dark before the full monster comes into view.
Try moving your light towards and away from the egg to see how it appears to glow in the dark.
The use of an emissive texture is significantly more efficient than adding lights to all these objects. The emissive areas will just behave as if they have more light reaching them, regardless of whether any light is reaching them.
This does create a problem where the player can see a glowing object even at the end of a very long dark hallway, which ruins the surprise.
6. Add fog to limit view distance
To fix this issue with emissive and limit how far the player can see glowing objects, we add fog.
The fog darkens the colors based on their distance to the camera, regardless of whether they are emissive or not.
It's important that the maximum range of the spotlight is shorter than the maximum range that the fog lets you see. This difference is what allows the glowing eyes to appear for a few moments before the full monsters comes into view when it is approaching you.
The fog is also critical for creating suspense. The player moves in the darkness not knowing what lies ahead, and it makes the levels feel bigger than they are.