Adding a sky box and lighting

Sky boxes or sky domes are small pieces of every day magic in games. They're used to create a mood-setting backdrop for scenes and are excellent for making areas seem larger than they are.

Sky boxes consist of six textures, rendered on the inside of a cube, much like wallpapers. Perceived as enclosing the world, they actually don't need to be very big since they are rendered first in the queue. This means everything else will be drawn on top of them.

How to do it…

The recipe will consist of two sections, where the first section will create a sky box from six textures. After this, we will add sun-like light using Directional Light.

1. In the SceneExplorer window, right-click on your scene and select Add Spatial.. and then Skybox...
2. There are two options here: either we can load six independent textures or one texture with all the six textures prebaked. This particular recipe uses the six Lagoon textures from the test-data/Textures/Sky folder.
3. After this, we should now see a moody, watery scene surrounding the terrain.
4. The terrain and skybox don't blend together very well. First and foremost the lighting is wrong. The only light in the scene is a white light coming from the camera's origin. To get a more natural light in this outdoor scene, we can add Directional Light.
5. Again, right-click on the scene in the SceneExplorer window. Now, select Add Light.. and then select Directional Light. Things just got a lot brighter! It doesn't look better, however. We need to adjust the light to suit the scene.
6. We can see the DirectionalLight element in the SceneExplorer window. Select it and bring up the Properties window. There are just two settings: Color and Direction.
7. By clicking on the box next to the color values, we see several options to set the color. We can use an image editor and the colorpicker function near the sun to get a suitable color. Grab the RGB values and insert them in that tab. This way, we know that we get a color that matches the scene's sun.
8. Turning off the camera light (the light bulb in the top-left corner) will help us see the blue-tinted color from the light we just added.

   Tip

   It's often a good rule of thumb to have a little less tint than what might first seem like a suitable one. It usually feels more natural in the end. Show it to someone else and see if they think it's "too much". As a developer, your judgment can be "tainted", as you get used to a scene, and it's easy to overdo things like lighting.

9. There's one more thing to do to make the scene and sky box blend better together. The shadows on the terrain are at wrong places in relation to the sun in the scene. The default setting for Directional Light is to shine in from the southwest direction and about 45 degrees downwards. This particular sky box has the main source of light coming from the northeast direction. Flipping the minus sign on the x and z values in the Direction property seems to make the shadows look more natural.

   Tip

   What you see of a sky box can alter the perception of immersion, greatly. Generally, the player should not see anything below the horizon for it to look believable. You will notice this if you zoom in and out of the scene. As you're close to the ground, it will feel much more natural.

How it works...

The reason sky boxes work is because of how the rendering of the scenegraph happens. Objects can be sorted into different lists or buckets, to help the rendered in drawing. A sky box is sorted into the Bucket.Sky list, which is drawn first in every rendering cycle. This is why everything else (normally in the Bucket.Opaque list) appears to be in front of it. You can achieve the same effect for any object by calling Geometry.setQueueBucket (Bucket.Sky).

Tip

You can achieve the same effect on other objects by changing the QueueBucket renderers as follows:

Geometry.setQueueBucket(Bucket.Sky);

There's more…

If you look closely at Jaime (or any other object you added to the scene) with the camera light turned off, you will notice that the side not facing the light will be completely dark. Unless this is a place devoid of atmosphere, radiance, diffusion, and reflection of other surfaces, one should have given all sides some basic lighting. This is emulated in games by using ambient lighting. It lights all the faces evenly and is added by selecting the scene in the SceneExplorer window and choosing Add Light.

You can select the same color as Directional Light, but make it much darker to get something that will look natural. If you're really serious, and have a somewhat uniform ground color, you can try to blend in a little bit of the ground color, as well.