Creating 2D lights using the Universal Render Pipeline (URP)

 There are a lot of new 2D features added in Unity 2019.3 along with the release of Universal Render Pipeline (formerly LWRP) including 2D sprite Editor, 2D Animation, 2D lighting, etc.

 In this tutorial, we will be looking at how to set up URP to create 2D lights and shadows.

Download

Unzip and open ‘Assets/Scenes/ExampleStart.scene‘.

Table Of Contents

=========================================================

Project set-up

• Installing a Universal Render Pipeline
• Creating a Universal Render Pipeline Asset
• Assigning the URP Asset in the Graphics settings
• Creating and assigning a 2D Renderer data to the URP Asset

2D lights and shadows

• Adding a 2D light component
• Light types and properties
• Normal Map for detailed shadows
• Animating the 2D light components

Reference/Links

====================================================

Project set-up

The set-up process is not required if you’re using the example project. You can skip this section if you already know how to set up a universal render pipeline.

a. Installing a Universal Render Pipeline

To create a new project that uses Universal Render Pipeline, open up the latest version of Unity Hub. 

Go to Create > New Unity project > Choose ‘Universal RP Template’.

 If you wish to add the Universal Render Pipeline to an existing project instead, you will need to install it from the package manager.

 To do this, go to Package Manager > All Packages > Universal RP and make sure it is installed and up to date.

b. Creating a Universal Render Pipeline Asset

 Once you have installed the Universal Render Pipeline to your project, you can create a URP asset that is used to configure the pipeline.

To do this, right-click in the Project window. Select Create > Rendering > Universal Render Pipeline > Pipeline Asset

This asset can be used to control various graphical features and quality settings.  When you click on ‘Pipeline Asset’, you will see that two asset files are automatically created:

• UniversalRenderPipelineAsset.asset
• UniversalRenderPipelineAsset_Renderer.asset

Note that the second asset (‘_Renderer’) is not needed as it will be replaced with a newly created 2D renderer after the next step.

c. Assigning the Universal Render Pipeline Asset in the Graphics settings

Creating a pipeline asset alone will not make our project use the URP straight away. We need to change the graphics settings by navigating to Edit > Project Settings > Graphics.

Within Graphics settings, you can drag and drop the UniversalRenderPipelineAsset into the Scriptable Render Pipeline Settings field.

* Potential Issue *

 After changing the graphics settings, some of the objects in your scene might turn pink. This is because some of the built-in shaders are not renderable by UniversalRP Materials. 

To fix this issue, simply go to Edit > Render Pipeline > Universal Render Pipeline > Upgrade Project Materials to UniversalRP Materials.

(Note: This may take a while as Unity will attempt to update every single material in the Assets folder. Alternatively, you can manually select materials and upgrade the selected materials.)

d. Creating and assigning a 2D Renderer Data to the URP Asset

Now the project is ready to use the Universal Render Pipeline, but we need to set up the URP asset first so that 2D lights can properly illuminate our scene. This can be done by creating a 2D Renderer Data by the same method we created the URP asset.

You can do so by right-clicking Project view and Create > Rendering > Universal Render Pipeline > 2D Renderer Data.

Once that is created, click on the UniversalRenderPipelineAsset that you created earlier. You can drag and drop the 2D Renderer Data into Renderer List in the Inspector, and set it to Default.

2D lights and shadows

Congratulations! Now your project is all set up and ready to use 2D lightings. In this section, we will be looking at the various applications of 2D lights.

a. 2D Global Light and its properties

Your scene may have turned completely dark after the previous step. This is because the default (3D) light cannot illuminate our scene anymore.

We can light up the scene again by adding a 2D light to the scene. Click on any GameObject in the scene view, and go to ‘Add Component’ > Search ‘Light’ > Select ‘Light 2D (Experimental)‘.

Or alternatively, you can navigate to GameObject > Light >  2D.

Note that 3D lights are not usable at this stage. Once you add a global light, your scene objects will be visible again.

• Light Type (= Global light affects all rendered Sprites on all target sorting layers.)
• Light Order (= Lower values are rendered first.)
• Blend Style (= Determines the way light interacts with sprites.)
• Color (= Use the color picker to change the color of light.)
• Intensity (= Determines the brightness.)
• Target Sorting Layers (= Determines which object can be affected by this light.)

We will leave most of these properties as a default state, but feel free to adjust the color and intensity to suit your taste.

Moonlight

Every object in the scene is faintly visible by the dim global light. Let’s create a Parametric light at the centre and make it look like moonlight by setting the properties as followings:

• Sides: 5 → 48
• Falloff: 0.5 → 6

Stage lights

Now, let’s add another light component on the bottom left of the screen. This time we will create a Point light and move it to the left bottom of the screen.

We will change the light properties as such:

• Inner Angle: 15
• Outer Ange: 90
• Outer Radius: 22
• Falloff Intensity: 0.8
• Intensity: 6

The light has now become brighter and cone-shaped. We can copy and paste (Ctrl+C, Ctrl+V) this gameObject as many times as we want, assign an identical colour to each and arrange its position like a stage.

Normal Map

Normal Map is a texture that contains depth information of a surface. It can be used to create a more detailed shadow when lights reflect on the surface.

In this example project, we will apply a normal map to the mountain sprite.

You can create a normal map using a painting tool such as Photoshop, or using Normal Map Online. Link – https://cpetry.github.io/NormalMap-Online/

1. Select the mountain sprite (Assets > Sprites)
2. Click on ‘Sprite Editor’ (If the button is disabled, check if you have installed ‘2D Sprite Editor’ from Package Manager.)
3. Expand ‘Sprite Editor’ menu.
4. Click on ‘Secondary Textures’.
5. Drag and drop the corresponding normal map (Assets > Texture) to ‘Texture’.

Now, let’s hit ‘Apply’ in the Sprite Editor and see how it changed our mountain.

2D Freeform Light

To see our normal maps in effect, we need to create a light that recognizes Normal Map.

Create a 2D light component, change its Light Type to Freeform, and tick the box next to Use Normal Map.

You can edit the shape of this light type in the scene view. Click on ‘Edit Shape’ button, and move the dot’s position with your mouse.

To add a dot, hover your mouse over a line of the shape and left-click. To remove a dot, select the dot and press ‘Delete’ on your keyboard.

We can clearly notice the difference between before and after using the normal map.

Animating the 2D lights

The real beauty of lighting is when we start animating all these lights and change the static environment to a living world.

2D light and its properties can also be keyframed for animation as with any 2D sprites.

For example, we can create pulsing starlights in the sky simply by keyframing the intensity.

Copy and paste the star gameObject across the sky, change sizing and hit Play.

You will notice that all starlights are pulsing at the same time. You can randomize the starting point of each star’s animation, by attaching this script to each star gameObject:

public class StarScript : MonoBehaviour
{
    void Start()
    {
        GetComponent<Animator>().enabled = false;
        StartCoroutine(StarLightAnimation());
    }

    IEnumerator StarLightAnimation()
    {
        float random = Random.Range(0, 4);
        yield return new WaitForSeconds(random);
        GetComponent<Animator>().enabled = true;
    }
}

Synchronized >

Randomized >

That’s it for this tutorial. Feel free to experiment with the project and test your understanding.

2D Lighting has never been easier with the new Universal Render Pipeline update in 2019.3.

I hope you can let your imagination run wild in your own games using the new 2D lighting feature. See you in the next post!

Reference/Links

Painted HQ 2D Forest Medieval Background by Super Brutal Assets – https://assetstore.unity.com/packages/2d/environments/painted-hq-2d-forest-medieval-background-97738

Space Shooter Redux by Kenneys – https://www.kenney.nl/assets/space-shooter-redux

For further information about today’s contents, visit Unity’s Documentation page:

• Universal Render Pipeline – https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@7.1/manual/index.html
• 2D Lights Properties – https://docs.unity3d.com/Packages/com.unity.render-pipelines.lightweight@6.7/manual/2DLightProperties.html