Unity Shader Graph - Shield Effect Tutorial

hey what's up guys welcome back to gabriella gabrod this time we are going to see this very cool effect that i always wanted to recreate with shadowgraph it's basically a shield with some ripples when it's hit by something and i think it's truly awesome it's a little bit complex this effect but i will try my best to show you every step i took to achieve something like this [Music] and as always this project is about my patreon page in case you are interested i left a link in description and you can get access to many effects and shaders for your games so with that being said let's see how we can do this [Music] alright so if we break these into parts this needs a shield which requires a nexagon pattern mesh an appropriate texture that fits the uv maps perfectly and then there's a special shader that has vertex offset fresnel and a few more things that we are going to see for the ripples we can reuse everything except the shader because it requires a sphere mask and i also needed to create a script that detects collisions on a sphere collider and then there's a few more particle systems to complement the ball effect so those are the main parts to create this shield now for the mesh i used blender and it was actually fairly easy to create a sphere with a hexagon pattern all i had to do is start with this ico sphere with a subdivision of 3. and the trick now is to turn on tissue in the addon settings and with this i was able to press this button and transform the ecosphere into this which was an enormous time saver as i unwrapped the mesh i end up with faces overlapping each other but i needed the hexagons and the pentagons to be independent so to separate them i selected all the pentagons which are fewer and moved them a little bit to the side ending with this uv map now i had to detach each face so i can move them separately with the vertex offset in the shader which led me to splitting the edges then separate everything by loose parts cool the mesh is done with the mesh being done i exported the uvs and moved on to create this simple texture in photoshop it will basically highlight the edges of each hexagon and pentagon next step was creating the basis of the effect basically a particle system attached to an empty gape object which allowed me to use the mesh i created in the particle system and assign a material as a placeholder for now now one of the most important parts is the shader and for the shader i used an unlead graph which i opened in shadow graph and made sure it was transparent i also moved on to set up the basics of the shader basically a color in hdr mode with white and full opacity as default and a main texture for the hexagons and the pentagons basically the texture is connected to a sample text to 2d that will be multiplied with the color this output will be multiplied with the vertex of set color in case i want to use color from the particle system another cool stuff i could easily add is a fresnel effect this will make the shield glow basically and it adds a really nice touch and i can also control the color and the brightness of the fresno with another color property with the basics of the shader being done i created the material and added to the shield particle system and it was looking like this nothing too fancy for now but once i adjusted the values of the main color the fresnel intensity i got this pretty cool effect and i noticed i had this dark color which made me realize i forgot to switch the blend mode from alpha to additive and now it looks much better and it's more appropriate for a shield effort now my next step required vertex offset so i could make all of the hexagons and pentagons move outwards like if the shield was breathing and for that i used the position note set to object which allowed me now to add modifications to these original positions of the vertex so i use the time node multiplied by some value that is going to manipulate the frequency of a sine wave next if i want this to move outwards i'm going to need the normal vector which is a perpendicular vector to each face and i can multiply this by the amount i want to extrapolate cool now all i needed to do was multiply the normal vector with the sine wave and add this motion to the current position of each vertex and after adjusting some of these values i got this bleeding shield which is really cool i could make it look a little bit bouncy if i wanted but breathing is exactly what i wanted so for now it was looking good and i was able to move on to the next step which was adding the ripples for when something hits the shield and this part required a bit more patience and try and fail to be fair but add this idea in mind that i used sphere collider to get the hit point and pass that position to a sphere mask in the shader i could get the effect that i wanted so that's where i started i added the sphere collide to the shader and the rigid body too then i duplicated the shader so i could run some tests without interfering with the original one so first i got rid of the fresno because it's not necessary for this but essentially this awesome effect only requires a sphere mask node and this node requires a coordinate system input basically what is the sphere space is it local or is it world position so i assigned the world position vector then i was able to control the sphere radius and the fade of the sphere or the hardness or the smoothness call it whatever you want and the most important part is this last parameter the sphere center for this i created a vector tree that i will control via script which means this allowed me to set the sphere center to the hit point which is awesome so i duplicated the shield made sure it did loop and it only leave it for one second for now and i also added the fade out in the color of lifetime then i added the material with the shader that contains the sphere mask and this is how it was looking basically if i move the center basically if i move the sphere center we can see the sphere mask in action which is really cool we can see that it fades and it has this really nice touch i was also able to decrease the sphere hardness and the sphere radius as well and gave it this orange color too really cool stuff actually for the next part i created the script to detect collisions on the sphere collider so i coded this very basic script that detects if something with a bullet tag hits the collider if so it spawns the ripples and this is the most important line it's the line that communicates with the shader and tells what is the sphere center but i needed to rename the sphere center property reference in shader graph so the script could detect it and to quickly test this out i created a sphere with a collider a rigid body and set the tag to bullet and at this point it was already looking pretty cool and it worked like a charm every time the sphere collides with the shield it will spawn the ripples basically and for the final touches all i had to do was add a few more particle systems so it becomes even more interesting for example like a flash of light a shock wave on the ground as well as another shock wave in the middle why not a few trails too the shield mesh with the shield texture with a basic additive shader a few circles on the ground as if the shield was emitting those little shock waves and these hexagon and pentagon particles too and a few more things in the end and if you want to learn more about particle systems and effects in unity i have a lot of tutorials on my channel and i also have a udemy course where i'll talk about this subject extensively and in an organized manner i left links in description and in comments as well in case you want to check that out and now for the shield to have this motion i used custom vertex streams and in case you want to learn about that too you can check out this blood tutorial that uses custom vertex streams as well as this slash effect in case you're interested but basically i'm controlling the vertex offset amount in the particle system with this curve and that's what gives this breathing feeling at the end i also added a noise texture to distort a little bit the motion of the vertex offset so it creates this glitchy thing in the beginning i think it adds a really nice touch and then i made a few more adjustments and this is how it's looking and honestly i think they're not pretty solid a very cool effect and i had a lot of fun creating this and by the way if you want to know how to shoot projectiles i also left a link in description for a tutorial that may help you so that's it guys here's another example of cool stuff that you can do with shell graph this project is a my patreon page as well as many other shaders and effects that i have done links in description in case you are interested and i want to thank every patron that supports me these videos will be a lot harder to make if i didn't have your support and i want to say a special thank you to the super mega patrons which are cj goblin black green fast data igor capkin james finlay rua mediola mark brittenham nicholas jave remyel warden studios ravier and guyan and yayoni and as always i'm very sorry if you pronounce any of your names wrong you guys are amazing and your sport means truly a lot and thanks everyone for watching this video i hope to see you in the next one [Music] you

Channel: Gabriel Aguiar Prod.

Views: 98,161

Keywords: Unity tutorial, unity effects, game effects, unity particle tutorial, unity game effect, unity vfx, unity shader graph tutorial, unity shader graph, shader graph, shader graph tutorial, unity shader tutorial, unity shader, unity particle effects, unity impact detection, unity shield, unity force field, shader graph shield, unity shader graph shield, unity glow shader, unity shield effect, shader graph sphere mask, unity shield shader, unity shield tutorial, shader, unity, fx

Id: hTJqo1HeEOs

Length: 13min 14sec (794 seconds)

Published: Thu Oct 03 2019