We have briefly gone through the types of light in Chapter 1, An Overview of Unreal Engine. Let us do a quick recap first. Directional Light emits beams of parallel lights. Point Light emits light like a light bulb (from a single point radially outward in all directions). Spot Light emits light in a conical shape outwards and Sky Light mimics light from the sky downwards on the objects in the level.
In this chapter, we will learn how to use these basic lights to illuminate an interior area. We have already placed a Point Light in Chapter 2, Creating Your First Level, and learned how to adjust its intensity to 1700. Here in this chapter, we will learn more about the parameters that we can adjust with each type of light to create the lighting that we want.
Let us first view a level that has been illuminated using these Unreal lights. Load Chapter4Level_Prebuilt.umap
, build and play the level to look around. Click on the lights that are placed in the level and you will notice that most of lights used are Point or Spot Light. These two forms of lights are quite commonly found in interior lighting.
The next section will guide you to extend the level on your own. Alternatively, you can use the Chapter4Level_Prebuilt
level to help you along in the creation of your own level since it does take a fair amount of time to create the entire level. If you wish to skip to the next section, feel free to simply use the prebuilt version of the map provided, and go through the other examples in this chapter using the prebuilt map as a reference. However, it will be a great opportunity to revise what you have learned in the previous chapters and extend the level on your own.
Before we embark on the optional exercise to extend the level, let us go through a few tutorial examples on how we can place and configure the different types of light.
Open Chapter4Level.umap
and rename it Chapter4Level_PointLight.umap
.
Go to Modes | Lights, drag and drop a Point Light into the level. As Point Light emits light equally in all directions from a single point, Attenuation Radius, Intensity, and Color are the three most common values that are configured for a Point Light.
The following screenshot shows when the Point Light has its default Attenuation Radius of 1000. The radius of the three blue circles is based on the attenuation radius of the Point Light and is used to show its area of effect on the environment.
The following screenshot shows when the attenuation radius is reduced to 500. In this situation, you probably cannot see any difference in the lighting since the radius is still larger than the room itself:
Now, let us take a look at what happens when we adjust the radius much smaller. The following screenshot shows the difference in light brightness when the radius changes. The image on the left is when the attenuation radius is set as 500 and the right when attenuation radius is set as 10.
Another setting for Point Light is Intensity. Intensity affects the brightness of the light. You can play around the Intensity value to adjust the brightness of the light. Before we determine what value to use for this field and how bright we want our light to be, you should be aware of another setting, Use Inverse Squared Falloff.
Point Lights and Spot Lights have physically based inverse squared falloff set on, as default. This setting is configurable as a checkbox found in the Light details under Advanced. The following screenshot shows where this property is found in the Details panel:
Inverse squared falloff is a physics law that describes how light intensity naturally fades over distance. When we have this setting, the units for intensity use the same units as the lights we have in the real world, in lumens. When inverse squared distance falloff is not used, intensity becomes just a value.
In the previous chapter where we have added our first Point Light, we have set intensity as 1700. This is equivalent to the brightness of a light bulb that has 1700 lumens because inverse squared distance falloff is used.
Open Chapter4Level.umap
and rename it Chapter4Level_SpotLight.umap
. Go to Modes | Lights, drag and drop a Spot Light into the level.
The brightness, visible influence radius, and color of a Spot Light can be configured in the same way as the Point Light through the value of Intensity, Attenuation Radius, and Color.
Since Point Light has light emitting in all directions and a Spot Light emits light from a single point outwards in a conical shape with a direction, the Spot Light has additional properties such as inner cone and outer cone angle, which are configurable.
The unit for the outer cone angle and inner cone angle is in degrees. The following screenshot shows the light radius that the spotlight has when the outer cone angle = 20 (on the left) and outer cone angle = 15 (on the right). The inner cone angle value did not produce much visible results in the screenshot, so very often the value is 0. However, the inner cone angle can be used to provide light in the center of the cone. This would be more visible for lights with a wider spread and certain IES Profiles.
Open Chapter4Level_PointLight.umap
and rename it Chapter4Level_IESProfile.umap
.
IES Light Profile is a file that contains information that describes how a light will look. This is created by light manufacturers and can be downloaded from the manufacturers' websites. These profiles could be used in architectural models to render scenes with realistic lighting. In the same way, the IES Profile information can be used in Unreal Engine 4 to render more realistic lights. IES Light Profiles can be applied to a Point Light or a Spot Light.
IES Light Profiles can be downloaded from light manufacturers' websites. Here's a few that you can use:
From Content Browser, click on Import, as shown in the following screenshot:
I prefer to have my files in a certain order, hence I have created a new folder called IESProfile
and created subfolders with the names of the manufacturers to better categorize all the light profiles that were imported.
Continuing from the previous example, select the right Spot Light which we have in the scene and make sure it is selected. Go to the Details panel and scroll down to show the Light Profile of the light.
Then go to Content Browser and go to the IESProfile
folder where we have imported the light profiles into. Click on one of the profiles that you want, drag and drop it on the IES Texture of the Spot Light. Alternatively, you can select the profile and go back to the Details panel of the Light and click on the arrow next to IES Texture to apply the profile on the Spot Light. In the following screenshot, I applied one of the profiles downloaded from the Panasonic website labeled 144907.
I reconfigured the Spot Light with Intensity = 1000, Attenuation Radius = 1000, Outer Cone Angle = 40, and Inner Cone Angle = 0.
Next, I deleted the other Spot Light and replaced it with a Point Light where I set Intensity = 1000 and Attenuation Radius = 1000. I also set the Rotation-Y = -90 and then applied the same IES Profile to it. The following screenshot shows the difference when the same light profile is applied to a Spot Light and a Point Light. Note that the spread of the light in the Spot Light is reduced. This reinforces the concept that a Spot Light provides a conical shaped light with a direction spreading from the point source outwards. The outer cone angle determines this spread. The point light emits light in all directions and equally out, so it did not attenuate the light profile settings allowing the full design of this light profile to be displayed on the screen. This is one thing to keep in mind while using the IES Light Profile and which types of light to use them on.
Open Chapter4Level.umap
and rename it Chapter4Level_DirectionalLight.umap
.
We have already added a Directional Light into our level in Chapter 2, Creating Your First Level, and it provides parallel beams of light into the level.
Directional Light can also be used to light the level by controlling the direction of the sun. The screenshot on the left shows the Directional Light when the Atmosphere Sun Light checkbox is unchecked. The screenshot on the right shows the Directional Light when the Atmosphere Sun Light checkbox is checked. When the Atmosphere Sun Light checkbox is checked, you can control the direction of the sunlight by adjusting the rotation of Directional Light.
The following screenshot shows how this looks when Rotation-Y = 0. This looks like an early sunset scene:
Open Chapter4Level_DirectionalLight.umap
and rename it Chapter4Level_Skylight.umap
.
In the previous example, we have added sunlight control in the Directional Light. Build and compile to see how the level now looks.
Now, let us add a Sky Light into the level by going to Modes | Lights and then clicking and dragging Sky Light into the level. When adding a Sky Light to the level, always remember to build and compile first in order to see the effect of the Sky Light.
What does a Sky Light do? Sky Light models the color/light from the sky and is used to light up the external areas of the level. So the external areas of the level look more realistic as the color/light is reflecting off the surfaces (instead of using simple white/colored light).
The following screenshot shows the effect of a Sky Light. The left image shows the Sky Light not in the level. The right one shows the Sky Light. Note that the walls now have a tinge of the color of the sky.
After learning how to place and configure the different lights, we need to consider what kind of lights we need in the level. If you are new to the concept of light, you might want to briefly go through the useful light terms section to help in your understanding.
The following screenshot shows the Details panel where you can change a light to be static, stationary, or movable.
Static and Stationary light sounds pretty much similar. What is the difference? When do you want to use a Static light and when do you want to use a Stationary light?
The common light/shadow definitions are as follows:
In a game, we always want to have the best performance, and Static Light will be an excellent option because a Static Light needs only to be precomputed once into a Light Map. So for a Static Light, we have the lowest performance cost but in exchange, we are unable to change how the light looks, move the light, and integrate the effect of this light with moving objects (which means it is unable to create a shadow for the moving object as it moves within the influence of the light) into the environment during gameplay. However, a Static Light can cast shadow on the existing stationary objects that are in the level within its influence of radius. The radius of influence is based on the source radius of the light. In return for low performance cost, a Static Light has quite a bit of limitation. Hence, Static Lights are commonly used in the creation of scenes targeted for devices with low computational power.
Stationary Light can be used in situations when we do not need to move, rotate, or change the influence radius of the light during gameplay, but allow the light the capacity to change color and brightness. Indirect Light and shadows are prebaked in Light Map in the same way as Static Light. Direct Light shadows are stored within Shadow Maps.
Stationary Light is medium in performance cost as it is able to create static shadow on static objects through the use of distance field shadow maps. Completely dynamic light and shadows is often more than 20 times more intensive.
Here are the steps that I have taken to extend the current Level4 to the prebuilt version of what we have right now. They are by no means the only way to do it. I have simply used a Geometry Brush to extend the level here for simplicity. The following screenshot shows one part of the extended level:
Group items in the same area together when possible and rename the entity to help you identify parts of the level more quickly. These simple extra steps can save time when using the editor to create a mock-up of a game level.
If you plan to extend the game level on your own, open and load Level4.umap
. Then save map as Level4_MyPreBuilt.umap
. You can also open a copy of the extended level to copy assets or use it as a quick reference.
We will start by extending the floor area of the level.
The short walkway was extended to form an L-shaped walkway. The dimensions of the extended portion are X1200 x Y340 x Z40.
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Ceiling |
1200 |
400 |
40 |
Floor |
1200 |
400 |
40 |
Left wall |
1570 |
30 |
280 |
Right wall |
1260 |
30 |
280 |
The walkway leads to a big room at the end, which is the main living and kitchen area.
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Ceiling |
2000 |
1600 |
40 |
Floor |
2000 |
1600 |
40 |
The left wall dividing the big room and walkway (the wall closest to you as you enter the big room from the walkway) |
30 |
600 |
340 |
The light wall dividing the big room and walkway (the wall closest to you as you enter the big room from the walkway) |
30 |
600 |
340 |
The left wall of the big room (where the kitchen area is) |
1200 |
30 |
340 |
The right wall of the big room (where the dining area is) |
2000 |
30 |
340 |
The left wall to the door (the wall across the room as you enter from the walkway, where the window seats are) |
30 |
350 |
340 |
The right wall to the door (the wall across the room as you enter from the walkway, where the long benches are) |
30 |
590 |
340 |
Door area (consists of brick walls, door frames, and door) | |||
Wall filler left |
30 |
130 |
340 |
Wall filler right |
30 |
126 |
340 |
Door x 2 |
20 |
116 |
250 |
Side door frame x 2 |
25 |
4 |
250 |
Horizontal door frame |
25 |
242 |
5 |
Side brick wall x 2 |
30 |
52 |
340 |
Horizontal brick wall |
30 |
242 |
74 |
Now that we are done with rooms, we can work on the doors and windows.
To create the windows, we use a subtractive Geometry Brush to create holes in the wall. First, create one of size X144 x Y30 x Z300 and place it right in the middle between the ceiling and ground. Duplicate this and convert it to an additive brush; adjust the size to X142 x Y4 x Z298.
Apply M_Metal_Copper for the frame and M_Glass to the addition brush, which was just created. Now, group them and duplicate both the brushes four times to create five windows. The screenshot of the dining area windows is shown as follows:
To create the window for the window seat area, create a subtractive geometry brush of size X50 x Y280 x Z220. For this window, we have a protruding ledge of X50 x Y280 x Z5 at the bottom of the window. Then for the glass, we duplicate the subtractive brush of size X4 x Y278 x Z216, convert it to additive brush and adjust it to fit.
Apply M_Metal_Brushed for the frame and M_Glass to the addition brush that was just created.
For the room windows, create a subtractive brush of size X144 x Y40 x Z94. This is to create a hollow in the wall for the prop frame: SM_WindowFrame. Duplicate the subtractive brush and prop to create two windows for the room.
For the main door area, we start by creating the doors and its frame, then the brick walls around the door and lastly, the remaining concrete plain wall.
We have two doors with frames then some brick wall to augment before going back to the usual smooth walls. Here are the dimensions for creating this door area:
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Actual door x 2 |
20 |
116 |
250 |
Side frame x 2 |
25 |
4 |
250 |
Top frame |
25 |
242 |
5 |
Here are the dimensions for creating the area around the door:
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Brick wall side x 2 |
30 |
52 |
340 |
Brick wall top |
30 |
242 |
74 |
Smooth wall left |
30 |
126 |
340 |
Smooth wall right |
30 |
130 |
360 |
Let us begin it part by part as follows.
For the dining table, we will be customizing a wooden table with a table top of size X480 x Y160 x Z12 and two legs each of size X20 x Y120 x Z70 placed 40 from the edge of the table. Material used to texture is M_Wood_Walnut.
Then arrange eight chairs around the table using SM_Chair from the Props
folder.
There are two low tables in the middle and one low long table at the wall. Place three SM_Couch from the Props
folder around the low tables. Here are the dimensions for the larger table:
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Square top |
140 |
140 |
8 |
Leg x 2 |
120 |
12 |
36 |
Here are the dimensions for the smaller table:
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Leg x 2 |
120 |
12 |
36 |
Here are the dimensions for a low long table at the wall:
BSPs needed |
X |
Y |
Z |
---|---|---|---|
Block |
100 |
550 |
100 |
Next to the open window, place a geometry box of size X120 x Y310 x Z100. This is to create a simplified seat by the window.
The Japanese square table with surface size X200 x Y200 x Z8 and 4 short legs, each of size X20 x Y20 x Z36) is placed close to the corner of the table.
To create a leg space under the table, I used a subtractive brush (X140 x Y140 x Z40) and placed it on the ground under the table. I used the corner of this subtractive brush as a guide as to where to place the short legs for the table.
This is a simplified block prototype for the kitchen cabinet area. The following are the dimensions for L-shaped area:
BSPs needed |
Material |
X |
Y |
Z |
---|---|---|---|---|
Shorter L: cabinet under tabletop |
M_Wood_Walnut |
140 |
450 |
100 |
Longer L: cabinet under tabletop |
M_Wood_Walnut |
890 |
140 |
100 |
Shorter L: tabletop |
M_Metal_Brushed_Nickel |
150 |
450 |
10 |
Longer L: tabletop |
M_Metal_Brushed_Nickel |
900 |
150 |
10 |
Shorter L: hanging cabinet |
M_Wood_Walnut |
100 |
500 |
100 |
Longer L: hanging cabinet |
M_Wood_Walnut |
900 |
100 |
100 |
The following are the dimensions for the island area (hood):
BSPs needed |
Material |
X |
Y |
Z |
---|---|---|---|---|
Hood (wooden area) |
M_Wood_Walnut |
400 |
75 |
60 |
Hood (metallic area) |
M_Metal_Chrome |
500 |
150 |
30 |
The following are the dimensions for the island area (table):
BSPs needed |
Material |
X |
Y |
Z |
---|---|---|---|---|
Cabinet under the table |
M_Wood_Walnut |
500 |
150 |
100 |
Tabletop |
M_Metal_Chrome |
550 |
180 |
10 |
Sink (use a subtractive brush) |
M_Metal_Chrome |
100 |
80 |
40 |
Stovetop |
M_Metal_Burnished_Steel |
140 |
100 |
5 |