2D Ripple Distortion Effect Shader Graph - Unity Beginner Friendly Tutorial

who doesn't like the ripple effect that even one of the AAA titles cyberpunk 2077 has been criticized for not having that on release but then they fixed that later on version 1.5 in today's video we will show you how to create this 2D Ripple Distortion effect this effect is useful for many purposes for example creating just a ripple on your Sprite or maybe even moving a flag if you move the center of the Ripple to the left or even simulating the water movement or maybe the heat Haze or the explosion Distortion in your video game of course we will do this using unity's Shader graph so let's head to Unity and get started [Music] the little gift for you from three polygon Studios it's an asset that's currently being sold for 30 bucks on Unity as a store the moon glow Village but with the following coupon code you can get this asset for free during a limited time so grab the affiliate link down in the description then put the coupon code and you can get this asset for free I'm currently using Unity 2021.3.13 and used the 2D urp template to create the 2D Ripple project so I started with an empty scene and just Sprite random sprite from the internet I provided the link for that art down in the description then we need to create a new Shader graph so we go to create Shader graph urp Sprite unlit Shader graph and let's name it ripple effect open the Shader graph and now we need to start by creating the Ripple Center as a starting point so create a new property it's a vector 2 because we are in 2D Dimension and name it Ripple center it's a vector 2 as we said then we need to calculate the Ripple how far it is from the center so we create a distance node we link both the Ripple Center and the position of the game object to calculate the Ripple distance then to control the ripples count how many ripples that there are on the screen we multiply the distance with the number of the ripples which is a float that we need to create as a new property of course we can set the ripples count as a slider between 0 and 10 to facilitate changing this value from the inspector next we used the one minus node to invert the Ripple Direction because currently if you don't do that it will be like a Vertex that observing the ripples to the inside not to the outside let's organize the graph by grouping all the current node and name the group Ripple Center we need to move the Ripple so of course we need a Time node and we need to control the speed of the Ripple so we create a new float as a new property and name it Ripple speed then multiply the time with 0 speed the Ripple speed can be a slider between 0 and 5 for now so let's multiply the time with the Ripple speed but we're still not seeing anything because the time is an endless value and to strict that between 0 and 1 we create a fraction node which stricts the value between 0 and 1 0 is black and one is white so it repeats the loop each time we exceed one and it make it back to zero to get this nice transition between 0 and 1. let's put those nodes in a group named Ripple speed and rearrange the scene to make it more convenient and appropriate then we use an add node to add this nice pulse that we created over time to the Ripple Center and what's Happening Here is we converting all the vertic vertices to the Pure White which gives the feeling of a ripple happening so to see this more clearly we increase the Ripple count to a default value of 2 to transition from pure black to Pure White and as you can see the Ripple now goes from the center toward the edges of the circle and without the one minus node that we created early earlier this will be like a Vortex sucking the ripples inside instead of outside but we're still not getting that smooth endless Ripple moving on the screen and to fix this we need to multiply what we got with a constant and if we multiply it with pi which represents 180 degrees it will still have wave as you can see it repeats or stops suddenly and repeats without continuously looping to fix that we change the constant from PI to Tau which represents 360 degrees and also we can increase the Ripple count to 5. or maybe four is good enough so now we start to get this nice Ripple happening on the screen now the only node left is the sign magical node to create this nice ripples with it and as I explained before without the Tau constant the sign will not be able to complete a full radial Loop so you must carefully choose that Tau constant to get those nice endless Loops of ripples to control the Ripple strands which will control the Distortion strands we create a new float and name it Ripple threads then we multiply it with the results of the sine node and group all those nodes in a new group named creating the ripples using the sign node and controlling its strands now to convert those ripples into Distortion layer we use the normal from height node to create a normal map from those triples which we'll be using it on a tiling and offset node to offset the vertices of our Sprite based on the normal map so now you can say we finished the ripple effect but we need to apply it to our Sprite to do so we use a sample texture 2D node and we need to link the result to the UV of it and of course we need a new property a texture 2D and we should name it main text or at least a name the reference underscore main text so it automatically detects detects the Sprite linked to it and finally we link the rgba to the base color of the fragment and of course we don't forget to link the alpha to the alpha on the fragment to get the transparency of our Sprite let's save the Shader graph and go back to the scene so we apply it to the background to apply the Shader graph of course we need a material so let's create a new material then apply the Shader graph to it by dragging the Shader on the material then we can drag the material onto the Sprite to apply the Shader to it and as you can see immediately the Shader graph works perfectly and now it's just a matter of adjusting the parameters to reach the desired result so for example we can change the Ripple count to 0.5 to get these nice smooth ripples we can control the speed and also we can control how Trends or the threads of the Ripple that represents the trends of the distortion of course we can control also the Ripple Center to determine where the Ripple starts and we can move it around to reach different effects and now you can create endless types of materials that can be used to any Sprite on your video game so I use the same concept and applied this to this Spider-Man to create or test this ripple effect on him also I tested it on a flag and made it feels like a flag Movement by moving the center of the Ripple to the left of the flag and that's it for today's video if you found this useful don't forget to hit like subscribe and the notification Bell so you keep updated by the next videos we are deeply thankful to our supporters on patreon who keep encouraging us to publish those quality tutorials if you made it this far you deserve a discount code for our ultimate 2D and 3D Shadow graph course you can find that code down in the description and till next video see you soon

Channel: Binary Lunar

Views: 16,775

Keywords: unity shader graph, shader graph, unity tutorial, shader tutorial, shaders, shader graph tutorial, unity vfx, unity shader tutorial, unity, shader graph unity, urp, unity shader graph water, painting shader, unity shader graph tutorial, BinaryLunar, 2D ripple effect, 2D ripple shader graph, 2d ripple distortion, flag effect, unity tutorial for beginners, 2D Ripple Distortion Effect Shader Graph, Unity Beginner Friendly Tutorial

Id: ajbNS8mncRo

Length: 10min 4sec (604 seconds)

Published: Sun Dec 11 2022