Easy Screen Overlay effects with Unity

When playing games, there are little things that go a long way with making the player feel immersed and helping the player to react. A great way to let players know that they’ve lost health or shields is by creating an effect that surrounds the edges of the camera view, utilizing gradients, and fading.

In this examples, I have used Adobe Photoshop CS6 to display a blood splatter effect. (There are also other online or free software options available to achieve this, this guide will still teach you the basic principles to achieve the effect).

It is important to note that you should check the target resolution of your game. In this example, my Unity project is using an aspect ratio of 16:9, which is the most popularly used aspect ratio for most monitors, TVs, and even YouTube.

To get started, I’ve created a new project in Photoshop with the dimensions of 1920 x 1080 and a resolution of 72. Depending on your game needs and quality goals, you can adjust these values to be higher/lower.

Next, let’s create a new layer to work on.

In the new layer, let’s select the Brush tool, and make sure you are using the default “Hard Round” brush.

Next, we will change our Brush Color to Red and simply click around the screen. Then lower the brush size, click around some more. We’ll repeat this a few times. You want to avoid blocking the middle of the player’s view area, so we’ll mainly click around the edges.

Let’s apply a Filter effect:

I chose these values, try adjusting them until you find something you like.

Right-Click your Layer and select Blending Options:

I added in a Bevel and Texture as for mine, you can adjust these values as you like. My Texture depth and scale are both 200%.

Make sure you set the default Background Layer to Invisible or simply delete it. This will allow our image to be transparent.

Let’s Save our image to our Unity Project folder now. Make sure you select Save for Web, this will save the file as an image rather than a photoshop file. I am saving mine as a PNG and I made sure that Transparency is selected.

Congratulations, you just created your own custom blood effect texture!
Let’s put this in Unity and try it out.

You can close Photoshop and open Unity.
In the Project tab, locate your image file that you just saved, click on it, and look in the Inspector. Change the Texture Type from Default to Sprite (2D and UI).

In the Hierarchy Tab, right-click and select UI > Image. This will create a UI Canvas and Image.

Select the new Image in the hierarchy. In the Inspector, locate the Image component, change the sprite to your image by selecting the button on the end or by dragging your image from the Project tab to the Source Image slot.

You should now see your image in the corner of the Game display window. Let’s adjust this to stretch across the entire screen. Select the square image that resembles a crosshair. Hold down Shift + Alt and click the bottom right option. This will stretch your image across the screen and automatically adjust your values correctly.

Alternatively, you can adjust the Anchor and Position values manually like below:

Now that your image is stretched across the game screen, you can now use the Animator and/or Code to adjust the Image Component’s Alpha Color region to suit your needs.

A, for Alpha, controls the fade / transparency of our image.

Now, let’s create a simple Animation for when the player takes damage.

1. Select the Canvas in the Hierarchy, Add in the Animator Component. Open the Animation window, select Create to create a new animation clip.
2. In the Animation window, click Record. Select the Image (child of Canvas) in the Hierarchy tab, change the Color’s Alpha to 0. You should see an animation key appear at 0 frames in the Animation window. (I have mine set to seconds, not frames in this example.)
3. Move the white line across to 0.10 seconds / 10 frames, then select the Color’s Alpha again, set it to a higher value, I chose 175.
4. Move the white line to 0.20 or 20 frames, set the Colors Alpha value back to 0.
5. Go into the Project tab, find the Animation clip you saved, set the Loop option to false in the Inspector.

How you Trigger this animation will be up to you and will depend on how you set your game up. Some examples could include; the animation being trigger when colliding with specific objects or enemy attacks, having the player take fall damage, or entering a Volumetric space. In this example, I will set up an empty animation clip, and manually trigger our Overlay animation below.

Now that you understand the basics in creating a screen overlay, you can make your own custom overlays to suit your game. You can even use these principles to create partial screen overlays to let the player know that he’s been hit from the left, right, or any other direction.

If you liked this article, please check out some of my others and subscribe to see future guides to make your Unity Development easier.