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