Categories
Advanced Tutorials

Advanced Level Design 3: Lighting, skydome, and fog

Preface

Your level is really starting to take shape now, and many people would call it done. But great levels take the game production even further, and implement granular levels of polish and detail. It may seem small, but tweaking and adding to your level is how you make a good game great.

Introduction

Once the level has been designed for gameplay and aesthetic it’s time to ramp up the mood of the level. By evoking a mood, you reinforce the narrative of the game and start to build an aesthetic experience which moves your players emotionally. 

This tutorial looks at how you can tweak the global settings of your game to extend the world even further. You will also explore the crucial role of lighting in adding aesthetic, and guiding players through a level by highlighting important tactical positions and moving their eye away from some of the “behind-the-scene” functionality that we don’t want them to notice. 

Open Your Game

Start by reopening the level you are working for for this series of tutorials. If you haven’t got one, it would be worth learning some of the Advanced Editor tools and techniques before starting this tutorial, so run through that tutorial before continuing with this one.

Opening The Global Settings

On the right hand side of the screen is the Hierarchy which you have been using as a way of navigating between different Entities in your game. Select the World tab to open the World Settings.

You should see the menu changes to this.

Using this menu we can make some drastic changes to the world that surrounds this level such as moving the position of the sun, changing the colour of the sky and setting the surrounding environment.

Background Scenery

Refer back to your research document from the first level design tutorial, or search online for imagery relating to the theme of the level you are creating. Focus on the background of the images, what kind of world surrounds your level? You can use the World Settings to change the surroundings of your level to be more appropriate, and meet the needs of your theme.

Select the dropdown box next to outerHorizon and select Mountains.

You should see that your game is now surrounded with mountains.

Woah! You can also select the innerHorizon to be Mountains, although we won’t necessarily see the innerHorizon in this scenario as we have a forest of trees surrounding our game level.

Press TAB to change to the Basic Editor Mode and to get a feel for how the new outerHorizon landscape affects the feeling of your level:

It’s subtle, but players will unconsciously grasp that there are mountains poking out above the trees, tricking their brain into believing in a world beyond this village, and reinforcing the immersion of your world.

Creative Control: ImmersionImmersing a player in your game world is the holy grail of game development. If a player is truly immersed, they are no longer playing your game as a player, they are experiencing your game world as if they were there. So how do you remove the obvious barriers between your physical player and the virtual world.
Designing a believable game world involves grappling with a variety of different disciplines, from architecture to botany, but the more detail you add to your game, the more believable it is, and the more immersive it is. Keep adding detail to your level, refer to your research document, and build the world as if people live there, and as if the same forces of nature that affect our physical world also affect this virtual one.

Shaping The Sky

If you look up in the game editor, you will see the sun, high in the sky.

The time in the World Settings stipulates it is 2pm, and the world feels very much like the early afternoon somewhere bright and sunny. This is an abandoned medieval village, where something bad is going down, so it’s time for you to make the world reflect that.

Creative Control: Pathetic FallacyWhen you have a theme, and a narrative, for your level, everything in your game should reflect that (as long as it remains believable). A technique used by writers, directors and game designers alike is Pathetic Fallacy, which is a term used to describe how the natural phenomena (eg. the weather) in your world reflect the story of the game. It’s great for building tension, and helping your player feel your game narrative.

Firstly let’s make the weather a bit more miserable. Select the dropdown box next to skydomeAsset and select Rainy.

You will notice some clouds roll in over the sky.

Now, amp it up by changing the time of day. The time of day affects the position of the sun, and that affects a few things:

  1. How much ambient light there is in the game world, and what colour the ambient light is. The change in ambient light can affect how easy it is for players to see things in shadows or in the distance
  2. Shadows – dawn and dusk have longer shadows, whilst midday only has a small shadow underneath the subject, and night has none
  3. The colour of the sky – in the real world the suns rays refract in the ozone differently depending on the time of day, that’s why sunsets are always teamed with pinks, oranges, purples and even greens 

For the theme of this level it would be ideal to have good lighting for the combat, long shadows for atmosphere, and a time of day that a fight might break out. Let’s make it dawn. 

Position the Camera so that you can see both the sky and the ground of your level.

Change the start time hour to 6 and then use the mouse to click and drag on the minutes until the shadows in your level are large, but don’t affect the Players ability to see clearly.

Make sure to check your game world from multiple angles:

To further emphasise the mood, you can change the colour of the sky, which also has an impact on the ambient light, and gives the world a slightly different hue. Different colours can have a subconscious impact on how your players are feeling. If you are interested in how the different colours can change your mood, increase your heart-rate and even make you hungry, research “Color psychology”. Click on the OverrideSkylight checkbox.

Here you can change the intensity of the skylight, and also the colour. Click the coloured square to bring up a colour picker.

Aim for a colour like the one in the image above – morning light saturation, with just a hint of red. Red is exciting and can increase the feeling of conflict, but it is also not out of place at dawn. You should notice a subtle difference in the feeling of the level, and it should feel a bit more dramatic. Take a look at these before and after images below.

To add even more drama, you can move the direction of the sun to emphasise the shadows, and hide or show aspects of your level. Make sure to move around the level when you do this, and check your Players can still see each other. Click on the sunDirection slider, and move it left and right to choose a new angle.

You might find that moving the sun makes your sky colour more or less apparent (because the sun’s highlights will change), so feel free to tweak the two settings until the mood of your game feels just right.

Adding Fog

Fog is great for encouraging a feeling in your game, but it’s also a valuable tool for hiding the edges of the map.

Make sure your view is at ground level and click the OverrideFog checkbox in the World Settings menu.

There are several values you can change in the OverrideFog menu:

  • heightFogStartDistance – How far away from the player the fog will start.
  • heightFogFalloff – How high the fog reaches vertically.
  • heightFogDensity – How thick the fog is.
  • heightFogColor – The color of the fog.

The fog won’t appear until you have a heightFogDensity greater than zero (which is the default). Start by making the density something between 0 and 1, and then experiment with the heightFogStartDistance and heightFogFalloff to accentuate the mood in your level. It’s best to look at features in the distance of your level, to judge whether it’s improving the mood, or making the level feel unrealistic. As it’s dawn, you can experiment with relatively thick fog, and it should still feel quite believable.

Make sure that the start of the Fog is not noticeable. Here are some suggested values for the Fog in your level.

  • heightFogStartDistance: 3338.5
  • heightFogFalloff: 16.1
  • heightFogDensity: 0.3

Which looks believable and adds mood, especially around features such as rocks and buildings:

You can also change the colour of the Fog. Reduce the intensity of the white colour to help it feel a bit more subtle.

Continue to tweak until you are happy with the Fog. It looks good coming through the trees, so here are the values that I settled on:

Lighting Your Level

Now that you have added some mood to your level, you can step things up a notch by introducing Lights. Lights are really useful for ensuring that Players can see what they need to, whilst also invoking the mood that you are working hard to emphasise.

Open the Primitives tab in the Library and select Light.

When you move the mouse over the world, you should see that you can now place a Light.

Lights can be placed inside buildings to highlight them as places of shelter, and to ensure that it’s possible to see anyone taking advantage of the window cover. Move the view inside a building.

To make a Light believable, and feel like a part of your world, add some Props such as a table and a candle that will support the Light.

Add a Light to the candle.

To ensure that it doesn’t look like an incredibly bright halogen candle (which didn’t exist last time I checked), use the Entity Editor to change the intensity and colour of the light, so that it feels more natural, but still gives out plenty of light.

That’s better, but there’s still something odd about this candle. The light is passing through the bottom of the table, so underneath the table should be bathed in shadow. Click the shadows checkbox for the Light in the Entity Editor to turn on shadows.

Notice how this has created a much more dramatic interior to the building, and it feels more realistic.

Take a look from the outside.

The house now looks like somewhere that players can go and find cover, and it looks inviting. You can draw your players to different locations using lighting, but it’s a good idea to make sure that lights feel like they belong there, otherwise all your hard work when creating a believable level will be wasted due to unrealistic lighting.

You can add lights to your world in different ways, it’s a good opportunity to experiment and toe the line between realism and gameplay. Here are some possible suggestions.

Add a plank Prop to make a shelf on the wall to store candles and other artefacts.

Use man-made objects to light areas that supply good cover, and suggest alternative routes to the enemy base.

Use the lightspill from house windows to highlight areas or objects of interest.

Continue to explore lighting, and see what other effects you can find. Remember to playtest your game regularly, to ensure that your lights are having a positive impact on your gameplay.

Recap

Well done for completing Level Design Tutorial #3. In this tutorial you looked at invoking a mood in your level using some of the subtle effects available in the World Settings, and you explored lighting throughout your level to underpin your mood, but also guide the player and showcase elements of your level in a believable way.

Adding Polish

You can continue working with the techniques established in this tutorial by experimenting with the positioning of Lights throughout your level. 

Good lighting in games is an artform, and it only gets better with practice. Perhaps you could look at adding a variety of fires to your level, or add lights advertising the entrances to any inns or workshop buildings that you might have created in Level Design Tutorial #1.

Next up: Special effects and establishing a kingdom

Your game is oozing mood, thorough with detail and set within a beautifully dramatic landscape to boot. The last Level Design Tutorial will look at finishing touches to your level, including particle effects and building a narrative in the world beyond the edge of the level using an object called a Mesa, themed appropriately as a medieval castle.

Advanced Level Design #4: Particles and Optimisation