Tutorial: Working with Lighting through Components With a populated scene we can begin layering in light sources to add realism and…light to our level. For this we will

need to use an environmental probe to define the render area, the Time of Day Editor and light entities.

You will learn how to do the following:

Set up an Environmental Probe

Modify lighting with the Time of Day Editor

Set up lights using light components

Prerequisites This tutorial requires that you have successfully downloaded and installed the Lumberyard Editor. This tutorial also

requires you to use the getting started levels included with the Lumberyard download.

You must have the following before starting this tutorial:

Lumberyard Editor v1.5.0.0 or v1.6.0.0

It is recommended that you are familiar with the Lumberyard component system, and have been following along with

the Component basics series, you may want to complete these tutorial first.

Introduction to Components and Mesh Component.

Quick Start Guide: Lighting.

Step 1: Setting up the Environmental Probe with Components For this tutorial we will be working in a set level from the Getting Started levels in the editor. This is a pretty simple

process, you want to open the editor and open a level rather than making a new level.

To open the Level to work in follow these steps:

1. If you have been following along with the Getting Started Series, open your My_First_Level file and skip

ahead to Step 2. Otherwise, open your lumberyard editor, and click the Open Level button on the Welcome

Screen.

2. Next we will open the level, the level we want to open is called, start-section04-lighting located at

GettingStartedFiles> start-section04-lighting

And now you should see a scene similar to the image below.

The next step in the tutorial is to set up the Environmental Probe in order to define the area within the viewport we

wish to render lights and shadows. The probe also gives us control over cubemap resolution, shadow color and

many other options for controlling render settings.

To set up an Environmental Probe please follow these steps:

1. Right click in the Viewport and choose the option to Create Component Entity.

2. In the Entity Outliner your new Entity should be selected already, so we will now add a Rendering

Component to the entity. To do this click the Add Component button, in the Entity Inspector and navigate

to Rendering>Light.

3. Next we will want to play with the settings of the Light component in the Entity Inspector. The first thing to

do here is change the type to Environmental Probe.

4. In the light properties panel, set the Area X,Y,Z values to the size of the entire map. In this file, that should

be X=1024, Y=1024 and Z=250

Tip: if you have the helper on you should see the environmental probe area box at the edges of the

map like the image below.

5. Now that the probe's properties are set, it's time to create a Cubemap. To do this, we need to click on the

Create button in the Light Properties panel in the Entity Inspector, and wait for the Cubemap to generate.

It will take a couple of minutes.

Congratulations!!! You have now set up a basic environmental probe to render lighting, and you should notice the

shadows of the scene get a bit lights and much more realistic. Your scene should look something like this.

Step 2: Using the Time of Day Editor The Time of Day Editor gives us the ability to quickly change and even animate the global lighting cast by the sun

and moon. The Time of Day editor features a variety of tools to adjust and manage time of day settings. This tutorial

focuses only on changing the time of day.

To set the Time of Day please follow these steps:

1. Open the Time of Day Editor by selecting it through View -> Open View Pane or by clicking the Icon in the

Editor Toolbar.

2. The Time of Day Editor contains the following menus and settings:

1. Editor toolbar - Icon toolbar for most common functions: Undo, Redo, Import, Export.

2. HDR Settings - Settings to manage HDR lighting

3. Time of Day Tasks - Management of basic tasks within the time of day editor

4. Current Time - Display of times, start/end, and play speed

5. Update Tasks - Controls to update the play or stop of time of day, based on play speed setting

6. Timeline editor - Management of light settings along a 24-hour time cycle

7. Parameters - Lighting settings to adjust time of day conditions

3. In the Tasks area, choose Import from File. Navigate to SamplesProject -> Levels ->

GettingStartedFiles and open TimeOfDay.xml. This loads a set of time of day settings created for this

tutorial. Notice the changes in light, fog, and sky colors.

4. In the timeline, slide the time line marker (set at 12:00 by default) to 21:00. Your scene now shows night.

Experiment with changing the timeline marker to different times of day to see the lighting changes in your

scene. Observe how this time adjustment also changes the settings in the Parameters area.

Now that our scene is set to nighttime we are ready to add some light entities to our level.

Step 3: Setting up Light Components In this section we will begin adding some entities to our level and adding Light components to those entities.

To add entities with Light components to your scene please follow these steps:

1. First we will want to navigate our viewport so we are looking closely at the lamp posts. We will be attaching

our entities with light components to the lamps posts to make them look turned on.

2. Next right click in the Viewport and choose the Create Component Entity option.

3. Next with the entity selected in the Entity Outliner we will go to the Entity Inspector panel and click the

Add Component button. Then, navigate to Rendering>Light to attach the component to the new entity.

Tip: So we can see the light a bit better I am going to set the Time of Day to 10pm. If you need help working with

the Time of Day editor, here is a tutorial that goes through how to set this up. Time of Day tu20torial.

4. Position the newly created light entity just under one of the lamp posts. Because the light source is a lamp

post, it should be a Projector (rather than a point light). In the Entity Inspector window under Light, change

the Type to Projector.

5. The light is oriented sideways. Use the rotate tool to select and rotate the light entity so that the X Axis

points down toward the ground.

6. Next we need to add a texture for our light shape. To do this click the … button in the Light properties

panel of the Entity Inspector next to the Texture field open the directory

\SamplesProject\textures\lights\generic. Open spot_075.tif.

7. In the Light Properties Panel, you can modify a variety of settings to customize the light. For this tutorial,

use the following settings:

1. Color = 250,250,150 2. Diffuse Multiplier = 25 3. Max Distance = 20 4. AttenuationBulbSize = 6 5. FOV = 70

8. Experiment with these settings to get a feel for how the differences between bulb size, radius, and diffuse

multiplier change based on the input values you use. Copy the light and place one under each streetlight.

When finished your light should look something like this:

9. Next, lets add some fill lights to soften those dark areas in-between the streetlights. Right click in the

Viewport and choose the Create Component Entity option again. Next with the entity selected in the Entity

Outliner we will go to the Entity Inspector panel and click the Add Component button. Then, navigate to

Rendering>Light to attach the component to the new entity.

10. Position the newly created light entity in-between two streetlights and above the ground.

1. Color = 250,250,150 2. Diffuse Multiplier = 20 3. Max Distance = 20 4. AttenuationBulbSize = 2

11. Experiment with these settings to get a feel for how the differences between bulb size, radius, and diffuse

multiplier change based on the input values you use. Copy the light and place one under each streetlight.

When finished your light should look something like this:

Congratulations! You have successfully added entities with light components to your scene.

Related Tasks and Tutorials Now that you have a level with lights and shadows, let’s see what else you can add with components.

The Camera Component

Working with Physics and Collider Components

Want to learn more about Lumberyard? Visit the complete Lumberyard Tutorials Page.

We’d love to hear from you! Head to our Tutorial Discussion forum to share any feedback you have, including what

you do or don’t like about our tutorials or new content you’d like to see in the near future.