in this video we're going to look at
some of the more complex procedures we
can perform in shader graph
we're going to look at how we can use
noise and textures as an input
and how we can use them to perform and
influence different operations within
our shaders
this video is the third part in our
series on working with shaders and
getting started with shader graph in
unity
the first part in the series covered the
very basics of getting started
and our second video covered how we can
use operations in a shader to combine
inputs for different results
they're both linked in the description
below at this point
we have a pretty good understanding of
some of the ways we can manipulate
textures and properties in a shader
to achieve interesting results on our
materials in this video
we're going to go a step further and
look at how we can improve our current
understanding of uv's
textures and operations to create
animated effects on our sprites
and how we can use different noise
patterns to influence them
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
one of the most useful procedures we can
perform on a shader is to offset the uv
of a texture
we can use the tiling and offset node in
shader graph to do this
as the name suggests it allows us to
adjust the position and scale of how our
texture is rendered onto our surface
by controlling the offset and tiling of
a texture we can design effects in our
shader such as tile patterns
transitions and dynamic animations
let's explore how this works by creating
a new 2d shader
let's create a new tiling and offset
node and hook it up to our color output
let's then also create a vector2 called
tiling
and another vector2 called offset in our
blackboard
and assign them to the properties of our
tiling and offset node
then let's create a material from our
shader and assign it to a new sprite
now if we change the tiling or offset in
the inspector
you can see how we can adjust the
positioning of our uv mapping on the
surface
if we then assign this data to the uv
channel of a sample texture 2d node
and the main texture property on our
sprite
we can offset and scale the texture of
the sprite accordingly
this works well for changing how a tiled
sprite looks
let's take a look at how we can create a
simple effect by offsetting the uv of a
texture like this
i've created a little doorway with a
sprite mask and a gradient sprite as a
child
let's assign the offset material to the
sprite renderer so we can control its uv
if we adjust the y offset in the
inspector we can adjust how the gradient
interacts with the doorway
if we scale from zero to one we can
create the effect of a beam of light
moving along the doorway and if we
change the wrap mode on our gradient
sprite to something that repeats or
mirrors
we get this cool looking shield effect
just by moving the gradient
up and down if we wanted manual control
we could choose to animate the offset
property by code
however as it might be nice to move the
gradient offset continuously
it's cheaper and easier to perform this
animation inside the shader itself
the time node in shader graph allows us
to sample various points of time data
from unity
such as total time elapsed or time since
last frame
if we multiply our offset by time and
save our shader
we can now use this property to offset
our uv every second by a set amount
we can now choose to animate our
gradient gradually or rapidly over time
manipulating and animating textures by
scrolling the uv in this way
is a very simple procedure that forms
the basis of a lot of the effects
you see in games today often many games
will simply combine lots of scrolling
textures with simple procedures
to create more complex looking effects
for instance
many games will create their water
effect this way
another cool thing we can do to our
sprites is offset their position
in the world we can create a positional
offset as a property in our shader
and add it to the object's current
position to move it in the world
this can be perfect for sprites in the
background that we'd like to animate
such as these four clouds
we can gradually offset their position
over time by manipulating their vertex
position in the shader
we'll start by creating a new
sprite-like graph shader for the clouds
called cloud offset and a material that
uses it
we'll assign it to the clouds in shader
graph
we will add an exposed property called
underscore main text
and connect it to a sample texture 2d
node and the master color
let's create a new time node in shader
graph and multiply it by a vector3
property
we'll call direction
then let's add this value to the
object's position
if we set our direction to about 0.5 and
hit play
we can see that our clouds gradually
move across the sky until they
eventually disappear out of frame
this is because their vertex position is
continuously being
added to it would look a lot nicer to
have the clouds endlessly loop
to achieve this we first need to limit
the distance our clouds can travel
in our shader graph let's add a new node
called modulo
if you're unfamiliar with the modulo
operator it finds the remainder of one
number
after division by another number when a
number is divisible by the modular
number
the result is zero so we can use the
modulo operator to clamp our movement
distance
and make sure that the sprites never
move further than a specific distance
let's create a vector3 called distance
and assign it to our modulo
now as our direction vector increases
over time
the modulo operator will then return a
vector 3 with the remainder values from
our distance vector
if we change our distance value in the
inspector you can see that our object
will never be able to move further than
the distance vector
to create the seamless loop we simply
have to set the distance value to the
distance between each cloud sprite
each sprite is 15 units apart so we'll
set our distance value to 15.
now our clouds move automatically and
loop seamlessly
by combining a noise texture and a
scrolling uv offset
we can generate a moving noise texture
that we can use to procedurally
manipulate different parts of our shader
in the previous video we showed you how
you can use images as noise textures in
our shaders
but shader graph also has a number of
built-in nodes that generate noise
textures for us
let's create a shader graph and add a
simple noise texture node
then let's hook up a few nodes to allow
us to offset our uv position over time
if we hook this into the color property
of our shader
you can see that we now have the
scrolling cloud texture
now we can use this texture to
manipulate different parts of our shader
let's get the texture from our sprite
and set that as the color for our shader
then let's add the noise texture to the
position of our tree
as the noise texture moves it'll offset
the vertices of our sprite
and make the tree look like it's blowing
in the wind
noise textures are also a really common
starting point for a lot of more complex
shader work
often great looking shaders come from
combining the results
of a lot of different simple techniques
and hopefully you can see how easy it is
to create these basic effects on our
shaders
and what we can use as a starting point
to create something more complex
in the next video we'll take a look at
how we can combine everything we've
looked at in this video
to build a cool looking 2d water shader
that animates
and also reacts to lighting in the scene
for more information on shader graph
and to download the demo project and try
it for yourself follow the link in the
description below
thanks for watching
you