Add Emission Shaders

In the previous tutorial, you learned how to add light using Unity’s Light 2D component. However, another way to create the appearance of light is by using shaders. Shaders control how 3D objects and 2D images are rendered, manipulating aspects like lighting, shadows, and textures to produce certain visual effects. In this case, you’ll use an emissive shader, which works by taking in a color and multiplying it by an intensity value, making it appear brighter.

Shaders can be complex to understand and develop, which is why Unity has its own shader tool, Shader Graph, which makes creating shaders much more approachable. If you’d like to dive deeper into shaders, check out our course Creative Core: Shaders and Materials.

Note: You can check whether Shader Graph is installed in your project by opening the Package Manager. If you’re using the Universal 2D template, Shader Graph comes pre-installed by default.

The default Shader used in Universal 2D is called Sprite-Lit-Default, and it’s the one used for the Witch, Block, or Mineral GameObjects in the scene. This default Shader supports various graphical features such as Light 2D. However, it does not support Emission. That’s why you’ll need to create a Custom Shader.

For this tutorial, we’ve already prepared a custom shader named Sprite-Lit-Emission, built with Shader Graph. To open it:

1. In the Project window, inside the Assets > 2D_Pixel_light > Art > Shaders folder, locate the Sprite-Lit-Emission asset.

2. Double-click the Sprite-Lit-Emission asset to open it in the Shader Graph window.

This Emission Shader might seem a bit complex at first if you’re not familiar with how Shader Graph works. First, let’s define the key variables that are being used:

• Emission Map: This texture defines the specific areas of your sprite that will emit light. Think of it as a filter—white areas will glow, while black areas will remain unaffected.
• Emission Color: This property controls both the color and intensity of the glow. For example, setting it to a bright blue will make the emission areas from the map glow blue. Increasing its intensity will make the glow stronger.
• Normal Map: This texture defines how light interacts with your sprite, giving the illusion of depth and detail. For example, in the witch hat, you can see light hitting the top while the sides remain darker.

The Emission Shader works in the following way: it takes the Emission Map of the GameObject and multiplies it by the Emission Color to determine which areas should glow and with what intensity. That result is then added on top of the GameObject’s Normal Map, which already defines how light interacts with its surface.

What this means is that your sprite will not only react to 2D lights in the scene but also appear to glow on its own in the areas defined by the Emission Map.

A Shader needs to be applied to a Material, which is then applied to a GameObject. In this project, two materials with the emissive shader have already been prepared for you. To explore how they work, follow these instructions:

1. In the Project window, go to Assets > Art > Materials.

2. Find and apply the Mineral-Glow material to the Mineral GameObject and the Witch-Glow material to the Witch GameObject.

After applying the materials, you’ll notice that the Mineral GameObject now displays a glowing outline around the crystal, while the Witch GameObject has a glow effect on the crystal orb of the magic wand.

3. Select the Mineral-Glow material in the Project window.

In the Inspector window, you’ll see four texture properties left empty, along with an EmissionColor property already set to a value. This color is HDR, meaning it includes the standard RGBA values plus an Intensity property that controls the brightness.

4. Select the EmissionColor property swatch and experiment with the Intensity property by changing the RGBA values and moving the Intensity property slider or by selecting the -2, -1, +1, and +2 buttons.

As mentioned in the first step, the Emission Map defines where the Shader will emit light. To set it up, you need to assign it to the Base Sprite. Unity makes this possible through a feature called Secondary Textures, which lets you link additional textures to a sprite and provide extra data—such as emission, masks, or detail maps.

For a more detailed walkthrough, check out the video below:

The Emission Map for the Mineral sprite has already been set, so let’s take a look at how it’s applied:

1. In the Hierarchy window, select the Mineral GameObject.

2. In The Inspector window, in the Sprite Renderer component, select the Open Sprite Editor button.

3. In the upper-left corner of the Sprite Editor window, select the Sprite Editor dropdown and choose Secondary Textures.

You’ll see that a sprite called Mineral_Emission has already been added to the Texture property and assigned the name _EmissionMap. You can add multiple textures to the same sprite by selecting the Add (+) button. And you’re free to choose any name you like, but keep in mind that these names can be referenced elsewhere—such as in the Shader Graph—so they must match exactly for everything to work correctly.

Usually, when you animate a 2D pixel GameObject, you create a sprite sheet that contains multiple frames of the character’s movement; this follows the same principle as traditional animation (often called cell animation).

In the Witch GameObject, the base sprite is set up as a sprite sheet. In addition to this base sprite, the Witch GameObject uses Secondary Textures. A Secondary Texture isn’t a single sprite—it’s a sprite atlas, which is a larger texture that combines all the frames into one file so Unity can access them more efficiently.

This project includes three different Secondary Textures for the Witch: an EmissionMap, a NormalMap and MaskTex atlases. These atlases hold the extra data needed for each frame, helping to bring out the Witch sprite’s full visual effect.

Congratulations!

You’ve learned another way to bring brightness to your scene using Emission Shaders. In real life, light also creates another important effect: shadows. In the next tutorial, you’ll learn how to add a special component, the Shadow Caster 2D, that can simulate the shadows of an object.