Lights

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.

Configuring a Point Light with more settings

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.

Attenuation Radius

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.

Attenuation Radius

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:

Attenuation Radius

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.

Attenuation Radius

Intensity

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.

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:

Use Inverse Squared Falloff

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.

Color

To adjust the color of Point Light, go to Light | Color. The following screenshot shows how the color of the light can be adjusted by specifying the RGB values or using the color picker to select the desired color:

Color

Adding and configuring a Spot Light

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.

Inner cone and outer cone angle

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.

Inner cone and outer cone angle

Using the IES Profile

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.

Downloading IES Light Profiles

IES Light Profiles can be downloaded from light manufacturers' websites. Here's a few that you can use:

Importing IES Profiles into the Unreal Engine Editor

From Content Browser, click on Import, as shown in the following screenshot:

Importing IES Profiles into the Unreal Engine Editor

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.

Using IES Profiles

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.

Using IES Profiles

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.

Using IES Profiles

Adding and configuring a Directional Light

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.

Adding and configuring a Directional Light

The following screenshot shows how this looks when Rotation-Y = 0. This looks like an early sunset scene:

Adding and configuring a Directional Light

Example – adding and configuring a Sky light

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.

Example – adding and configuring a Sky light

Static, stationary, or movable lights

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, stationary, or movable lights

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?

Common light/shadow definitions

The common light/shadow definitions are as follows:

  • Direct Light: This is the light that is present in the scene directly due to a light source.
  • Indirect Light: This is the light in the scene that is not directly from a light source. It is reflected light bouncing around and it comes from all sides.
  • Light Map: This is a data structure that stores the light/brightness information about an object. This makes the rendering of the object much quicker because we already know its color/brightness information in advance and it is not necessary to compute this during runtime.
  • Shadow Map: This is a process created to make dynamic shadows. It is fundamentally made up of two passes to create shadows. More passes can be added to render nicer shadows.

Static Light

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

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.

Movable Light

Movable Light is used to cast dynamic light and shadows for the scene. This should be used sparingly in the level, unless absolutely necessary.

Exercise – extending your game level (optional)

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:

Exercise – extending your game level (optional)

Useful tips

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.

Guidelines

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.

Area expansion

We will start by extending the floor area of the level.

Part 1 – lengthening the current walkway

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

Part 2 – creating a big room (living and kitchen area)

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

Part 3 – creating a small room along the walkway

To create the walkway to the small room, duplicate the same doorframe that we have created in the first room.

BSPs needed

X

Y

Z

Ceiling

800

600

40

Floor

800

600

40

Side wall x 2

30

570

340

Opposite wall (wall with the windows)

740

30

340

Part 4 – Creating a den area in the big room

BSPs needed

X

Y

Z

Sidewall x 2

30

620

340

Wall with shelves

740

30

340

Creating windows and doors

Now that we are done with rooms, we can work on the doors and windows.

Part 1 – creating large glass windows for the dining area

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:

Part 1 – creating large glass windows for the dining area
Part 2 – creating an open window for the window seat

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.

Part 2 – creating an open window for the window seat
Part 3 – creating windows for the room

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.

Part 4 – creating the main door area

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

Creating basic furniture

Let us begin it part by part as follows.

Part 1 – creating a dining table and placing chairs

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.

Part 2 – decorating the sitting area

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

Part 3 – creating the window seat area

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.

Part 4 – creating the Japanese seating area

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.

Part 5 – creating the kitchen cabinet area

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

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset