Creating Water with Shader Graph in Unity! | 2D Shader Basics (Tutorial)

in this video we're going to look at how we can use the new 2d shader graph tools and 2d lights in unity to create a stylized water shader we're going to use a combination of scrolling uv textures and noise patterns on a sprite to create our water effect we will also look at how we can use normal maps to allow for our sprites to react to lighting in our scene this video is part of our series on working with shaders and getting started with shader graph the previous parts in this series cover the very basics of getting started designing shaders in the previous video we explored how we can offset the uv of our textures over time to create animated effects inside of our shaders we also looked into how we can use noise patterns generated by shader graph to further manipulate the properties of our shaders the techniques covered in this video rely on what we've previously explored in this series so if you haven't seen either of the previous videos check those out in this video we're going to combine multiple techniques we've learned in our water effect i've put together a small environment here using assets from the lost crypt made by unity these assets are available for you to use for free and are included in the demo project linked in the description below the scene is a simple crypt area with some of the new 2d lights placed around inside we also have a very soft global light tinted to the color of our background to add some extra detail currently our water is just a sprite with a linear gradient and it doesn't look very interesting let's create a new 2d lit shader graph so that we can make our water look more dynamic and cool the first thing we can do is make it look like there's some motion in our water let's offset the y position slightly over time instead of using standard time which would cause our other offset to continually increase over time we can use sine or cosine time to gradually move our value back and forth on the y-axis next let's have our water react more to the lighting one of the cool things we can do with our 2d lights is to have them interact with normal maps on our sprites the scene is looking a bit flat at the moment and normal maps are a great way to add extra depth to our scene if we select our lights and enable the use normal map toggle on them our lights will use the normal map data in our sprite material to create and give them shadows and an appearance of depth now we can add a normal map to our water to give it some depth let's create a sample texture 2d node and assign it as a normal map let's also add a texture property and set the normal map texture in our inspector now our water is casting some shadows man looks a bit more uneven but it's still quite static let's offset our normal map slowly over time let's also add a control for the strength of the normal map by multiplying our texture value by a vector one now our water already looks better than before it's interacting with the scene more and reacting to the lighting with some shadows you could also try two different normal maps moving in different directions and average out the results to make it a bit more chaotic it's worth experimenting to get the results that look good for your project another great way we could bring water to life is by simulating caustics and refraction by combining our color data with a few different scrolling noise textures we can make it look like the light is being bounced around inside the water let's start by creating a gradient noise node and offsetting the uv gradually along the x-axis over time this creates an interesting streaking effect along our sprite that makes it look like the water is slowly moving through our tomb let's multiply this noise by our main gradient texture so that it gradually cuts off at the bottom if we wanted to create a spooky mist moving along our scene and interacting with our lights this would be perfect the problem is we're currently losing the rest of our water to the dark areas of our noise so we should add the current result to our original texture to retain the original gradient another useful thing we could do is tint our noise slightly let's create a new color property called noise color and multiply it by our gradient noise before combining it with our main texture if we adjust the noise color it looks more like light is passing through more areas of our water and creating some contrast on the surface this looks pretty good but we can add some more noise details to really make the water shine and flicker in the light the final touch is to add some really detailed noise and have it move gradually in a different direction let's create a simple noise node and gradually move it in a diagonal direction we want to be able to contrast this noise with our watercolor and our other noise color so let's create a new color property called second noise color and multiply it with our simple noise if we take a look at the output from this node we now have a layer of more distinct moving lines if we color the lines blue they look a lot like the surface of our water all we need to do now is combine this with our other two textures let's multiply this by our main texture so we can get that fade off again then we just need to add the result to our other combined textures now if we look at our lit scene we've got a wavy distorted effect across our water making it look like the light is hitting the surface and bouncing around one final thing we can do is add an intensity multiplier to our second noise so we can have a bit more control over it adjusting this multiplier allows us to really fine tune just how distorted the water looks finally let's bring the alpha down on our main sprite to blend it better with the scene it's worth playing around with some of the material properties such as intensities and colors to get the best results for your scene by combining just a couple of different textures and offsetting their values over time we've managed to create a cool looking 2d water shader hopefully at this point you can see the kinds of shaders we can create when we combine lots of simple operations together and get creative with our textures shader graph makes it incredibly easy to experiment and preview the results and with the new 2d lit sprite shaders you can bring the power of shader graph into your 2d games too it's also worth noting that there is another water shader example in the main lost crypt project which is available for download for free via the unity asset store for more information on shader graph and to download the demo project shown and to try creating shaders for yourself follow the link in the description below thanks for watching

Channel: Unity

Views: 77,057

Keywords: Unity3d, Unity, Unity Technologies, Games, Game Development, Game Dev, Game Engine, unity 2019, unity shader graph, unity 2019 shader graph, unity shader graph tutorial, unity shader graph toon, unity shader graph outline, unity effect, unity effects, unity hwo to, making a game in unity, make a game unity, shadergraph, water in shadergraph, water shader unity, water in unity, 2d water, 2d water shader, water shader graph, unity water shader tutorial, how to water unity

Id: eD7LmXShYcs

Length: 7min 30sec (450 seconds)

Published: Tue Oct 06 2020