HOW-TO: Add light sources

Open

There are plenty of light sources in The Witcher 3. Here’s how to add some new ones!

Maybe a lava lamp or a glowing magic orb? Here’s how to do that! In this tutorial, we’re going to explore how to add new light sources and Entities that have some sort of Light Component in them.

Open

Types of lighting effects

Before we add anything, we should get familiar with the types of lights the Editor offers. There are two types of individual light components, which are:

Adding new light sources

The easier one is adding new, invisible light sources into the game, so we will start with that one.

1. Open the world in which you’d like to add a new light source, and find the place itself

2. and activate the layer in which you’d like to add your light

3. R.Click where you’d like to place your light, and select Graphics→ Point Light/Spot Light

4. Move, scale and rotate them until they are as you’d like them to be

5. Change its properties in the Properties panel on the right side of the main window (more on that in the next chapter)
   
   

There’s also another way, if you’d like to add a lot of the same light.

1. In the Asset Browser, go to engine→templates→Editor→spotlight / pointlight

2. Make a copy, open the copy’s template.

3. Make the changes you’d like to make (more on that in the next chapter).

4. Either drag and drop it from the Asset Browser, or with it selected in the Asset Browser, press “C” in the Main window of the REDKit, pointing with the cursor where you’d like to place the light.

Editing light sources

To edit a light source, either go to the Property panel in the Main window of the REDKit, or open its Entity template (in: engine→templates→Editor→spotlight / pointlight) (these are templates, so it might be worth it to copy these templates and change values within the Entity itself to your liking).
Depending on what type of light source it is, there are some differences, but a lot of similarities too. The differences are in the last part of the Node properties, named either as CPointLightComponent or CSpotLightComponent, all other parts of the Node properties tab are the same.

Light sources properties

This is what a basic point light type entity should look like:

The screenshot above shows the similar parts in node properties. A lot of properties are self-explanatory, but there are key points, and unintuitive properties too. All properties we’re going to be looking at are under CLightComponent.

Table of contents:

Point light set at brightness 500 and attenuation 0.

Point light set at brightness 500 and attenuation 1.

Point lights

Values that can be set for point lights only are under CPointLightComponent.

• cacheStaticShadows:

  • determines whether the light is caching shadows from static geometry.

  • Usually set to false.

• dynamicShadowsFaceMask:

  • determines in which directions the light is allowed to set dynamic shadows.

  • Usually all are set to true, so it can set dynamic shadows in all 6 directions. (All 3 dimensions, in front of (positive) and behind (negative) the point of origin.)
    
    

The 3 dimensions positive side.

Spotlights

Values that can be set for spotlights only are under CSpotLightComponent. The spotlight itself is not entirely cone-shaped, as it is basically a point light’s sphere with limitations set. Basically the sphere gets a chunk taken out from it, defined by the angles set.

What a spotlight looks like in REDkit:

• innerAngle:

  • the angle of one of the spotlight’s components, an inner cone.

  • The angle of the tip of this cone is specified here.

  • The light itself originates in this cone’s tip.

• outerAngle:

  • the angle of one of the spotlight’s components, an outer cone.

  • The angle of the tip of this cone is specified here.

  • This cone limits the light inside of it, the light cannot bleed outside of it.

  • If this angle is smaller than the inner cone’s angle, then the “outer” cone will not have any light inside it, and will behave like a point light outside of it.

What it looks like when the inner cone’s angle is bigger than the outer cone’s:

• softness:

  • how much difference there is between the light of the inner cone’s and outer cone’s in brightness.

  • The smaller the number, the less difference.

  • Can not be exactly 0.

Softness: 300

Softness: 1.

Adding a light component to an item

Adding light component into an entity is not only good for giving a reason for the light to exist, but also because when the same entity is used repeatedly, there might come a time when some changes need to be made to those entities (for example, adding another mesh into them, or changing the color of the lights).
Those changes can be done by making the change in the entity template, which will stream all of the changes into the entities that were put in the world.

To add a light component inside of an entity, we first need to create the entity itself, using the following steps:

• Go to the Asset Browser, and into a folder you’d like to have the entity inside.

• R.Click on a free space, Create→Entity Template.

• Name, then open the Entity.

It should be a mostly empty template (like on the image below), so let’s populate it!

• Search for a mesh in the Asset Browser you’d like to have a light component. (This tutorial is done with “candle_med_a” mesh, that’s located in environment→decorations→light_sources→candles.)

• Drag and drop the mesh into the dark grey area in the Entity Editor as a static mesh.

• You should see a node in the dark grey area with the name of the mesh you just added.

• Save it, and the node’s letters should become a bright blue.

We have a mesh, that is just existing right now, so let’s make it a little more interesting!

• R.Click in the dark grey area→Select Component.

• A new window should pop up. In this window, go to CSpriteComponent → CLightComponent → CPointLightComponent.

• This node adds the light itself into the entity, but it has an invisible point of origin.

• The new node that appears should be grey, but once the entity template is saved, it will turn light brown.

• The properties of the node (which is accessed by clicking on it) are the same as in the above sections.

• In the left panel of the window (=the preview panel, which shows the entity as it would be when placed into the world), drag the light until it is slightly above the item, so it illuminates it well (right around where the tip of the flame would be).

If the player should be able to light/extinguish the entity, then we need to add a GameplayComponent.

• Go to select a component → CInteractionComponent → CGameplayLightComponent, add that.

• Save.

• If the CPointLightComponent’s CLightComponent isEnabled property is set to true, then the CGameplayLightComponent’s CInteractionComponent’s acionName property should be set to Extinguish.

  • If set to Extinguish, then the CGameplayLightComponent isLightOn property should be set to true.

• If the CPointLightComponent’s CLightComponent isEnabled property is set to false, then the CGameplayLightComponent’s CInteractionComponent’s acionName property should be set to Ignite.

  • If set to Ignite, then the CGameplayLightComponent isLightOn property should be left on false.

One of the hand-in-hand property pairs next to each other:

And the other pair of properties:

The third component that is almost always inside light source entities is CScriptedAneimEventsListenerComponent.

• Go to select a component → CScriptedComponent → CScriptedAnimEventsListenerComponent.

• Save.

This component helps in communicating between the entity template and the animation asset that can trigger some events, like spawning an effect. The effect in question is the candle being lit.

Adding an effect into an entity

Next up, let’s add that effect! This can be done in two ways: you could copy an effect from another entity (all candles have the same effect), or you could hand-make it.

Copy-pasting an existing effect

We’ll take a look at how to copy an effect first.

1. Go to an entity that has the effect you’d like to copy. In this example, we’ll copy an effect from another candle, more specifically “candle_tall_a“ from environment→decorations→light_sources→candles in the Asset Browser.

2. Go to the effects tab.

3. Select the effect you’d like to copy.

4. Click the “copy effect” button.
   
   

5. Go to your entity’s effects tab.

6. Press the “paste effect” button.
   
   

7. And that’s it! Now you have a functional effect inside of your entity.

Creating the effect ourselves

Here’s how we could make this effect by ourselves.

Go to the effects tab, and click the big plus sign, and name the effect. In this example, we will name it “fire”.

With the effect selected, click the “Edit effect” button.

The following should appear on-screen: a new tab opened, named Effect [fire], with a timeline.

R.Click on the left dark grey panel, and click “Insert track group”. Give it a name that says the group’s function, in this case, we’ll name it “mat_candle”, mat for material.

After that, R.Click on the track group, and click on Append track. This gives an actual track to the track group. Name it in accordance to what its function is, in this case we’ll call it “fx”.

R.Click in the track’s timeline and click on Add track item → CFXTrackItemMaterialOverride.

A small box should appear. Follow these steps:

• Drag it to where you’d like it to begin

• Size it to your liking (either by dragging the right side of the box, or by writing a time duration into the properties of the track item). In this example, we’ll set it at 0.01 and for a duration of 2.23.

• Then, go to the Asset Browser, and search for candle_emissive_mat in fx→ light_sources→ candles.

• With that selected in the Asset Browser, click in the green arrow in the material” property line.

• Add the tag mat into the exclusionTag property line

• Set the drawOriginal property to true.

Add a new track group and track just like previously, naming them “fire“ and “fx“ accordingly. Add a track item like before, but now add the one named CFXTrackItemParticles.

Next:

• Go to the track item’s properties, set the “timeBegin“ to 0, and the “timeDuration“ to about 0.954.

• In the Asset Browser, find “candle_flame_fx2“ in the same place the material was, and click on the green arrow in the “particleSystem”'s line.

• Then, go back to the Main tab, into “Slots”, and click the “Add slots” button.

  • Name it “fire”, because this slot is where the fire effect should spawn.

  • Where its position should be depends on the mesh used, in this example, we’ll set “Position Z” to around 0.15.

Here’s how the slots and their properties should look like once you’re done:

• Go back to the “Effect [fire]” tab, into the last particle track item’s properties

• Click the upside down triangle in the “spawner” track’s line.

• Choose “CFXSpawnerComponent“.

• Set “componentName“ to “fire“ (or whatever you set the slot’s name to be)

• Set “attach“ to true, all other properties should remain default.

Append another track (in this example, we’ll name it “smoke end“) from the “fire“ track group, and add “CFXTrackItemParticles”.

Do the following steps in the track item’s properties:

• Set the beginning time to 0.69, the duration to 7.19

• Add “candle_smoke_fx4“ to the “particleSystem“'s line using the green arrow (should be in the same folder as the others in the Asset browser).

• Set “componentName“ to “fire“ (or whatever you set the slot’s name to be)

• Set “attach“ to true, all other properties should remain default.

Properties of the last track should look like this:

Then, append another track (in this example, we’ll name it “sparks end“) from the “fire“ track group, and add “CFXTrackItemParticles”.

Do the following steps in the track item’s properties:

• Set the beginning time to 0.74, the duration to 1.38

• Add “candle_sparks_fx1“ to the “particleSystem“'s line using the green arrow (should be in the same folder as the others in the Asset browser).

• Set “componentName“ to “fire“ (or whatever you set the slot’s name to be)

• Set “attach“ to true, all other properties should remain default.

Add another track group, named “flare“. Append a track from it, named “flare“ (for simplicity’s sake I guess).

Do the following steps in the track item’s properties:

• Set the beginning of it at 0.002, the duration 3.6.

• In the select “[CMaterialInstance]” for the material property, but set nothing else in that section.

• Moving on to the “parameters” property section:

  • set:

    • “occlusionExtent“ to 0.1

    • “flareradius“ to 0.25

    • “fadeInMaxSpeed“ to 1

    • “fadeInAccel“ to 12

  • leave all else in this section default.

• Next up is setting “spawner”.

  • Set “spawner“ to “CFXSimpleSpawner“ using the upside-down triangle in its line

  • Open its section up.

  • Add a new “slotNames” element using the green plus sign in its line while selected, and set the “slotName” element to “fire“ (or whatever you named your slot)
    
    

    • Set the Z vector of “relativePos“ to 0.07

    • Leave all else default.

Alright, that should be all the effects done! Now, let’s add some finishing touches.

• Click on the background of the timeline, and different properties should appear under “CFXDefinition“

• Set:

  • length to 8

  • “loopStart“ at 0.36

  • “loopEnd“ at 0.64

  • “showDistance” to 20

  • “isLooped“ to true

• Leave the remaining two properties untouched.

Now, test your effect by clicking the play button on top of the timeline. You can add little tweaks to your liking, but your entity is pretty much done!