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

I've had a lot of questions about how I set up this Shockwave effect for my game so let's recreate this effect these instructions are for the universal render pipeline specifically for those of you using a 2d renderer and a 2d renderer is what allows you to use 2D lights in your scene so if that's you then let's get right to it we're actually going to create two different versions of this Shader the first one can be applied directly on top of a Sprite so that the shock wave only happens on that particular Sprite and the second one is just going to be a slight modification that allows us to do it for the full screen let's go let's start with the Sprite version to act as our base create a new Sprite lit Shader graph and we're going to need our main text sampled out into our base color since this will be applied to a Sprite now let's go over here and try to figure out how to make this ring shape that we're looking for and so to do this Distortion type of effect we're basically trying to raise the UVS in the shape of a ring and expand that outwards so let's start with a UV node and let's create an exposed Vector 2 called ring spawn position and we'll default this to 0.5 on the X and Y because we're working with UV coordinates which range from zero to one so 0.5 is the center and we're going to subtract the UV from ring spawn position to basically reorient the UVS so that the ring spawn position acts like the origin now let's drag that into a length node you can think of length like magnitude but you can see if we move the ring spawn position around it moves that circle around so far so good next create an exposed size float which we'll use to control the size of the influence that the ring has give it a default of 0.05 and make it a slider between 0 and 5. now we're going to drag this out into an ADD and a subtract node and by combining those back into a smooth step node with the length node as our input this gives us the basis for our ring it's kind of hard to visualize that right now though so just temporarily let's add a time node so that we can see this in action so if we plug our time node into a fraction node that's going to smoothly transition this from 0 to 1 or or black to white and then snap it back to zero and then keep on repeating that Shader graph becomes a little bit easier to understand at least for me once I'm able to understand that really under the hood this is just numbers so this node which is just transitioning from zero to one will hook into our add and subtract nodes it's not quite a ring yet because we need to First invert this smooth step by plugging it into a one minus node and then multiplying that with the original smooth step awesome so we finally have our ring now if we add another UV node and add that with our ring here you can see we're almost getting what we want in fact let's plug this into our UV input on the sample node and test this out create a new Sprite and I'm going to use whatever sure the background here is fine then I'll create a new material that uses this Shader and apply it to the Sprite foreign and you can see we're kinda getting what we want it's warping in some way but it's not really raising the way that we want to fix that go back into our Shader and go back to our subtract node at the start here where we said that this is basically acting with the origin well we want to normalize that and this is a good place to add strength controls as well so let's create an exposed float called Shock Wave strength and default it to minus 0.1 if you want it to look raised it has to be negative and let's make this a slider between -5 and 5. now let's multiply our strength by our normalize let's break the add connection to the sample node here as well as this multiply to add connection here because we're going to multiply these two nodes together and now plug that into this add node which will add these results on top of our UV and plug that into our UV input over here now that is looking much better since we don't need to visualize this within Shader graph so much anymore and we don't want this to repeat by itself over and over let's get rid of these two nodes instead we're going to create one more exposed float called wave distance from Center make it a slider ranging from minus point one to one and let's give it a default of 0.5 we need this to start at minus 0.1 because of the difference in size here we're defaulting this to 0.05 and since we plug it into an add and subtract node we get a difference of 0.1 between the two which means at a value of zero this will still show a slight distortion on the screen which you'll see in just a second go ahead and plug that into our add and subtract node and save now we can control the shock wave ourselves with this slider but you can see as we discussed if we zoom in and we leave this at zero there's still a slight Distortion there that's why we range this down to minus 0.1 if you change your size your flat value of the wave distance from Center is also going to change now let's handle the full screen shock wave so go ahead and duplicate this Shader as well as this test Sprite here so first we're going to add an exposed texture 2D called camera sorting layer texture and it has to be spelled like this exactly this works kind of like main text in the sense that there are some built-in functionalities in unity that look for specific references exactly so the spelling is really important you can remove the main text texture over here and replace it with that camera sorting layer texture so if we go back and create a new material for this Shader and apply it to our new full screen Shockwave Sprite here it turns it gray so in order to make use of that new exposed texture that we just created in our Shader we first need to create a new sorting layer let's call it camera sorting layer and make sure that no matter how many layers you might have in your game that this one is at the bottom which essentially means that it will be rendered on top of everything else now go ahead and actually change the Sorting layer on this Sprite and you can see that still changes nothing foreign something in our 2D renderer settings if you go to edit project settings we can click here to find our Universal render pipeline asset click on that and you can see our 2D renderer data here and click on that to select it now you're going to see a camera sorting layer texture option here and it's usually set to disabled by default well let's change that to default and immediately after doing that you should see that our Sprite now shows some stuff from our scene but this isn't quite what we want either you can see if I drag this around in the scene it's basically just a snapshot of our scene put on top of a Sprite and if I play we get some pretty weird results what we basically want is for this Sprite to show whatever the heck our screen position currently is so go back to the Shader and replace this UV node here with a screen position node now even when we drag it around it's acting like it's almost like a transparent Sprite but it's not it's a second copy of everything that's behind it with our Shockwave effect overlaid onto the Sprite as well so basically this is rendering everything twice now there's one final problem here and that's that this is not a perfect circle and that's because of our screen dimension I'm playing this at 1920x1080 which if you divide those into each other gives us 1.777 so our X is being stretched by that amount so to correct that let's break the connection here and let's first split these coordinates this is in color data but actually the r will act as our X position and the g will act as our y position so create a new exposed float called X size ratio and default it to 1.77 and let's multiply that float with the r or as we said the X from the split node and let's add a combined node so we can put the X and Y back together again and I love Shader graph if you leave this as is you actually you get this cool vertical pattern that goes away from each other it's just it's a lot of fun to play around in Shader graph anyways to get our ring back you can just plug the g into the G in our combined node here now that should appear as a perfect circle if you were using 1920x1080 as your screen ratio if any of you out there know how to do this automatically without having to plug in an exposed screen ratio let us know down in the comments because I would love to know how to do this in a more automatic and automated way now to make sure that we size this properly let's make sure that our game view is actually full high definition down here because free aspects shows a lot more on the width now you can see that resized my camera view window here so let's make this full screen Sprite just a little bit bigger than that to make this easy for this tutorial I'm going to make this a child object of my camera now if you want this Shockwave to emanate from a certain position in your world then instead you can turn this into a prefab and spawn it in when you need it at that position and and so long as you have the ring spawn position set to 0.5 it will expand from the center of that point wherever you spawn it in now if you do it that way make sure you disable or destroy it after the Shockwave effect is done to save resources but I want to wrap this up so I'm just going to show you how to control this with code really quick let's create a Shockwave manager script and attach it to our full screen Sprite object first let's create a float for however long we want it to take this shock wave to expand outwards we're going to control this with a co-routine so add a variable for that as well as a material since we'll need that to manipulate our Shader values and finally let's cache the actual Shader property that we want to change which is wave distance from Center because calling this over and over again every frame is more expensive so first I'm going to grab a reference to the material on our Sprite renderer I'm going to set up a method that calls our Co routine which this is just my personal way that I like calling code routines and for the actual Shockwave expansion let's create the actual Co routine first we're going to reset our wave distance from Center and we'll set up two floats create a while loop using our Shockwave time iterate our elapsed time and set the lurped amount variable to be equal to a lerp function that goes from our start position to our end position and now set the actual float value on our material to be equal to that lurped amount I'm just going to call this co-routine whenever we press the E key on our keyboard to make this easy and there you go very cool so again you wouldn't just want to have this sitting there being active all of the time because it's rendering everything twice if you do want it sitting on your camera you're going to want to add functionality to actually disable and enable it when you need it but this is just a simple example I hope you enjoyed guys if you found this video helpful give it a like share subscribe comment all those things to let YouTube know that this is a video worth sharing with more people I hope you have an amazing day I want to give a very special thank you to our Hall of Fame patrons Jacob yondak Xander Kessler Darren perine throbbing wind Fontaine weight and couch as well as our Early Access patrons xioma and Ken Wade if you choose to support us on patreon you can get early access to all our videos monthly Alpha builds and more

Channel: Sasquatch B Studios

Views: 13,442

Keywords: shockwave, unity, unity2d, tutorial, unity tutorial, sasquatch b, sasquatch b studios, shadergraph tutorial, shockwave shader graph, shockwave shadergraph, shock wave shadergraph, shockwave urp, shockwave 2d renderer, shock wave urp, shockwave unity, shockwave shader unity, 2d shockwave shader, 2d shockwave effect, shockwave effect, screen distortion shader, distortion shader unity, screen distortion shadergraph, screen distortion shader graph, unity beginner tutorial

Id: -spc1GJAtLY

Length: 10min 44sec (644 seconds)

Published: Thu Mar 30 2023