Shockwave in Unity - How to make a shockWave Shader (2D Renderer | Unity Tutorial)

In this 2D Unity tutorial, I'll show you how to create a shockwave shader, using shadergraph, that we can spawn into our scene for an AWESOME looking effect.

You'll understand how to implement screen distortion in shadergraph after completing this, plus you'll have 2 versions of the shader that will allow you to pulse a shockwave on just a singular sprite, as well as a full screen shockwave distortion effect that ripples outwards, with plenty of controls to get it looking how you want it to look.
This video was heavily inspired by this video from creator GameDevBill:
But modifies and expands on it to show you how to spawn this effect into your scene whenever you want.

Link to Download the FREE 2D Asset Pack seen in this tutorial:
---
---

Contents of This Video: ------------------------------------------

00:00 - Intro and What We're Creating
00:28 - Creating the Sprite Shockwave Shader
04:47 - Creating the FullScreen Shockwave Shader
08:54 - Coding How to Call the Shockwave Effect

Who We Are-------------------------------------

If you're new to our channel, we're Brandon & Nikki from Sasquatch B Studios. We sold our house to start our game studio, and work full time on building our business and making our game, Veil of Maia.

Wishlist our Games:

Don't forget to Subscribe for NEW game dev videos every Monday & Thursday!

Follow us on Twitter for regular updates!

#unitytutorial #unity2d #unity3d

[sasquatchbgames]

In case anyone missed the note in the video, I want to reiterate that when you create the CameraSortingLayerTexture property in Shadergraph, ensure you untick the box called "exposed" or this effect will NOT work. Tiny but super important detail.

Also, since I can only pin 1 comment:
6:12, In Foremost Sorting Layer, set it not by default BUT in the layer above CameraSortingLayer, which in his case is the default since he only have two layers and that should fix the issue of only showing black in the sprite renderer not the mirrored view of the actual scene.

Thanks @maelstrom8972 for pointing that out

[pocket-logic]

I haven't been able to find a single tutorial on YT that explains how to do this for the full screen effect using shader graph. This is the first one I've seen, so I'm glad you've made it much easier for people to learn how to do this in Unity. Thank you! On your way to a million subs, I'm tellin ya!

[phatluutrong]

i think to make the ring become a circle, we can just take the -(screen width/ screen height) and assign that value to XSizeRatio

[stanoref]

7:57 I dont know but, might be Create Node > Input > Scene > Screen it gives Width and Height.

[maelstrom]

6:12, In Foremost Sorting Layer, set it not by default BUT in the layer above CameraSortingLayer, which in his case is the default since he only have two layers and that should fix the issue of only showing black in the sprite renderer not the mirrored view of the actual scene.

[owencoopersfx]

Thanks for this! I had some minor issues I needed to work around to make this work but overall this is great. On your note about automatically setting the ratio based on screen aspect ratio, I tried out using a "Screen" node in the shader graph, then rather than passing in a XScreenRatio float, in the shader graph you instead just pass in Screen X / Screen Y. This should internally produce the same result. I'm not positive since I'm new to shader graph, but hopefully this means it'll adapt to whatever the current screen ratio is. Cheers!

[Chief-wxfj]

08:00 Create a "Screen" node, which has a width and heigh, both gets hooked to a "Divide" node A and B, the Out should now be the XScreenRatio (?) Let me know if I'm wrong

[learninggodot]

thanks for the inspiration, i did it in godot using a wave function:
offset_strength = exp(-pow(distance_to_center + (time-duration)/duration, 2.0)*1000.0);

and then a "fader" reducing the strength over time with:
offset_strength *= pow((duration-time)/duration, 2.0);

[duration] is how long the animation takes and [time] is the time since the start of the animation.
Note: (duration - time)/duration is essentially the partial time untill the end of the animation.

[_Chelik_]

I did everything as shown in the video, but the first part with applying distortion to the texture just doesn't work.

[iiropeltonen]

I like these Shader tips as I'm completely oblivious to Shader graph. If you Make a Shader graphs 101 video sometime I'd watch it. 😋

[waddlesmcsqueezy]

Please slow down, it is very hard to keep up when you are explaining things faster than I can write them down in the shader graph editor.

[douglasjordao]

I Don't know why it didn't work for me. I followed the exact same steps but when it's time to config that Renderer2D thing of the sorting layer the object stays gray. I did the global light thing, the not exposed variable thing, I'm using the URP, it simply doesn't wanna work. The sprite one does work, but the screen one doesn't

[桔梗qaq]

i think it is a not good way that use Sprire Lit Shader, and it wall make some light or cover quesition, it should use Unlit ----( i English not well)，thank your sharing!

[MegaGuanxi]

I followed along exactly but it's not showing ground layer, foreground layer. But it shows everything else. How can I fix this?

[GregoryMagid-nf]

Great tutorial, would it work for unlit as well ?.

[abroadwin]

Thank you so much for this amazing tutorial! Super helpful. Would it be possible to have multiple screen shockwaves at once from different coordinates?

[ranejeb]

Hi, great video! I have little hope I'll get an answer for such an old video, but do we really have to make a separate version of the shader and use expensive URP feature to make "FullScreen Shockware"? Can't we use fully transparent sprite sitting on top of our camera with the first version of the shader attached and achieve the same effect with less framerate loss? If we can't, why?

[fruitsodahmm]

Hello, thanks for the really informative tutorial!
Currently I'm stuck at 06:00, where I cannot gain access to the Camera Sorting Layer Texture option.
I'm using Unity 2020.3.14f1 and URP 10.5.1, and the outdated version seems to be the problem after searching for myself.
Is there any way around this option without upgrading my Project?

[JerryBBang]

I tried it, it worked, but when I try to change the global light intensity, the shockwave sprite becomes two times darker.. is thee any way that I can solve this?

[playanoapps]

This implementation contradicts your 2d water video that you uploaded a month ago. The water needed a water layer that had to be above the ground layer so that the ground would be displayed above the water. The CameraSortingLayer property was then set to the layer above the water (default). However, now the CameraSortingLayer layer must be the most bottom layer, and the CameraSortingLayer property must be set to the layer above it. So now the water is no longer displayed correctly because the CameraSortingLayer is set differently. And if I set the CameraSortingLayer back to one above the water layer, the water is displayed correctly, but the shock wave no longer works. Any ideas?