Create 2D Lights with Unity’s Universal Render Pipeline

Create 2D Lights with Unity’s Universal Render Pipeline

Unity 2019.3 is packed to the brim with new features to help improve your game development process!  Along with the release of a new graphics rendering pipeline called Universal Render Pipeline (formerly LWRP), there are a lot of new 2D aspects added in Unity 2019.3+, including 2D Worldbuilding tools, 2D PSD Importer, 2D Pixel Perfect package, and 2D lighting.  With new features, comes new skills to learn though of course!

In this tutorial, we will specifically be looking at how to set up Unity using the Universal Render Pipeline (URP) and explore various properties of 2D lights in detail.  In so doing, we will also set up our own 2D scene with various lights so that we can see URP in action!  So, are you ready to learn how to light up your 2D game worlds?

Before we begin, please note that this tutorial is only applicable to Unity 2019.3 or later.  If you’re using an older version of Unity, you will need to install a newer version.

Projects Files

You can download the project files for this tutorial here.

To use them, please follow the steps below:

  1. Unzip and open ‘Assets/Scenes/ExampleStart.scene‘.
  2. Download Painted HQ 2D Forest Medieval Background: https://assetstore.unity.com/packages/2d/environments/painted-hq-2d-forest-medieval-background-97738
  3. Follow Project Set-up Guideline
  4. Add the images from Painted HQ 2D Forest Medieval Background to your Sprites folder.

Don't miss out! Offer ends in
  • Access all 400+ courses
  • New courses added monthly
  • Cancel anytime
  • Certificates of completion

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.

1. 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’.

Creating a project with urp 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.

packagemanager_urp

2. 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

how to create urp 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.

3. ASSIGNING THE URP 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.

Project settings-Graphics-Universal render pipeline

* 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.)

Update Project Materials

4. 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.

URP set 2d renderer 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.

5. GLOBAL LIGHT

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.

Add 2D Light component

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

Global Light On/Off comparison

  • 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.

6. PARAMETRIC LIGHT

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

Parametric light Moonlight

7. POINT LIGHT

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.

URP stage lights

8. 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’.

Applying normal map as a secondary texture

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

9. 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.

2D Freeform Light - Edit shape

10. 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.

URP 2D Create a pulsing starlight

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:

Synchronized

URP 2D - pulsing starlight

Randomized

URP 2D - Starlight randomized

That’s it for this tutorial! As you can see, 2D Lighting has never been easier with the new Universal Render Pipeline update in 2019.3.  Not only does it offer you immense customization in how you can light your scenes (and render your graphics in general), but it offers a user-friendly workflow for artists and non-artists alike.  Of course, you can extend your skills far beyond what is covered in this tutorial for your own game projects, so feel free to experiment with the project and test your understanding

I hope you enjoyed this tutorial, and please let your imagination run wild in your games using the new 2D lighting feature for Unity. See you in the next post!

URP 2D lighting - Final outcome

REFERENCE/LINKS

Download Example Project - Unity 2019.3 2D Lights

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