2D Sprite Overlay Effects

(Wasn't sure how to call this since it's not really lighting, so I went with overlay)

Hey all,

I started this setup after a discord member asked about simple 2D lighting, but then started playing with the effect a bit more for some weirder results.

I want to start sprinkling in some more 2D related tips so I dug out some old assets.

The idea is to use soft sprites in a separate layer to fake lighting. There are other ways to make nicer lighting, but this is a really simple setup so I wanted to share :)

^ The light texture I used

They are image effect shaders, so I *think* they'll work in URP, but I haven't tried!

Step by Step setup:

1. Add new Camera as a child of your Main Camera and reset the positions 

2. Make sure the new camera renders black

3. Create new layer to be rendered by the new camera, set your Light-Sprites to this layer 

4. Set Main camera to not render this layer, set Lighting Camera to only render this new layer 

5. Add Lighting Render Texture script to Main Camera
Script : PasteBin Link 

This script will create a render texture for the Lighting camera, send it to the shader, then draw a material over the Main Camera.

6. Import one of the shaders further in the article

7. Create a new Material from  the Shader, drag into the script, 

8. Drag the Lighting Camera into the other slot of the script


Basic Overlay Shader

Just taking the sprites and their tinting and overlaying it, no extra effects

This shader takes the render texture, the main camera output.
Then lerps the camera output with shadow color, and the normal output over the lights rendertexture.

Shader Code with comments: PasteBin Link 

Noise Border

A (moving) screenspace noise around the lights

This version creates a scrolling noise and adds it to the lights render texture, then a cutoff is created via smoothstep, so you can control the softness.

 Shader Code with comments: PasteBin Link  

Distortion

Distorts around the edges

This shader adds the noise as a distortion to the main UV.

By multiplying a smoothstep with an inversed smoothstep we can grab a ring around the lights to use as the distortion base.

Shader Code with comments : PasteBin Link 

Other effects

With this lighting border set up, you can of course use other effects. Maybe recolor the scenery outside of the lights, invert the colors, blur them.

Or set the effects inside of the circle by swapping the first two valuse of the lerp!


Have fun!

By becoming a patron, you'll instantly unlock access to 107 exclusive posts
205
Images
1
Poll
21
Writings
By becoming a patron, you'll instantly unlock access to 107 exclusive posts
205
Images
1
Poll
21
Writings
Tier Benefits
Recent Posts