Transcripts
1. Introduction: On these lessons, let's
see how to create a great impact
effect in unity with VFX Graph and you are going
to learn how to create a quick SmokeFlipbook and a
simple explosion Flipbook, as well as how to use ***** too. Hi, I'm Gabriel Aguiar, founder of the Gabriel
Aguiar Prod YouTube Channel, where we teach visual
effects for games in Unity in Drill and in GoTo. And we also have one of
the biggest libraries of visual effects assets
ready to be used in games. I'm also the founder
of Golden Bug Studios, where we are developing
rabbit stale. So without further ado,
let's get on with it.
2. Triangles, Particles, ImpactBeam and Shockwave: First things first, let's begin by creating a visual
effect graph. Right click Visual effect
graph. There we go. We can begin with a
minimal template, and we can rename this to V
effects Graph underscore hit, double click to open it up. And our first system is
going to be for triangles, which I swear they are going
to look like an impact. Let's just say the bound mode is manual with a size of 100, so it's visible, even if the camera is not looking
directly at the impact. From there, we want
to spound something. We can use a single
burst for that. One part clear enough. We can control how much
time it leaves with a set lifetime and
can be random. Something super quick,
zero dot two, zero at 35. Let's try and drop our VFX Graph to the scene so we can
see what's happening. Zeta transform, so it goes
to the center of the scene. Yeah, it's right there.
There's not much visible, but one thing is for sure, it's not facing the camera, and we want to make sure it's visible from anywhere we look. So let's use an orient block and set it to face
camera position. Can also control how big these
triangles are going to be, right with the set size. Let's say it's random too. 3-5, we will see. But what's missing is
the triangle, right? But out pore, it's super
easy to create one. We have material maker, but you can get it for free. It's a super tool
to create textures. And once you have it, you can open it up and with right click, you want to search for shape. It's going to be a polygon,
but only with three sides. We can decrease its size
to 05 more or less. And that's it. We want a
transparent background. So let's use a colorized
node so we can say the Be as an Alpha
value of zero. This way, it becomes
transparent. To export it, we can go
ahead and click right here, call it triangle,
select the destination, and make sure it's
a PNG image PNG. So it preserves
transparent background. Imported to your project, and then we can add
it right here to the output main text
and we have a triangle. Great. So let's modify this in a way that
looks like an impact. We can use soft particles, every time it touches
the ground or any other geometry,
it blends in. Feel free to test
additive or alpha on a blend mode and you'll
notice the difference. And leave it additive. But the trick here happens
when we use a set scale. We want to stretch
this triangle. As a matter of fact, we
first say it's random and then shrink it on the X zero
at two and zero at four. But then we stretch
it on the y axis, and at five, here we go, and we have this cool triangle. With this, we can do
a bunch of things. For example, if we say it's a random rotation with a set
angle only on the Z axis, since it's facing the camera, it will always rotate properly. Random 0-360, and
this is what we get. Now, if we say there's
five of these, we are beginning to
see a pattern here. Since our triangle is
not at the center, it doesn't match the
center of the Vfx graph. They overlap with each
other, which is fine, but the bottom of triangle
should be at the center. The way we fix that is
with the set Pivot. We can push the
text a little bit up and down or to
left or to the right. With our set Pivot, we want
to push it up a value of zero or two on the y axis,
and as soon as we do it, the bottom of triangles
are all at the center, and we get this cool impact
or close to an impact, but it's getting there. Now, what's really missing here is also the motion of this. Fortunately we have the
set size over life, where we have this graph and we can control throughout
its lifetime, how the size is affected. We can create a curve where
it grows in the beginning really quickly and then it
shrinks down really fast. Something similar to this,
and we will get this effect. Oh, yeah, the size has
changed because set size over life is overriding
its previous value. We need to make sure in
composition we set it to multiply so it doesn't override the set size we
have used up there. And this is going to be our
base for a cool impact. For the color, let's use
a set color down here. If you want to change it later
without opening VFX Graph, you can create a color
property right here. Open this and we already have the values for a cool color,
and it's a bright blue. Feel free to test different
colors, obviously, but connect it down here
to set color. Here we go. This way, if you want to
change the color later on, you don't need to
open VFX Graph. Awesome. Looking very impactful. If you want to spice these
up with some particles, let's duplicate this
triangle system. Control C, Control V, rename it to particles. And the first thing we want
to change is its lifetime. Some are going to leave less, some are going to leave more. 02 and one. We want a little
bit of randomness here. And we want to make sure
they move outwards, right? So first, we say they spaw
in a set position, shape. The shape is going
to be a sphere, a sphere with a smaller radius, zero at one, and then we use the set velocity from
direction and speed, where we can immediately say
the speed mode is random, and the minimum is going
to be zero at one, but the maximum is
going to be three, four, five, depends
how fast you want. Obviously we want a couple
more particles here, so let's increase this to
30 on the single burst. This time we don't need
to mess around with the Pivot since the text
is going to be different. So let's remove it as well as the angle and the set scale. As for the text if you go
back to material maker, we're going to create the
simplest texter ever with a shaped nodule set to circle. We can increase its size to 08 and increase the feather to
zero at seven more or less. And then with a Gaussian
blur we can blur it. We just need to change
the grid size to 1024 by 1024 and then connect
these to a colorize, where the black key has
an Alpha value of zero, so it's transparent background. And then you can
export this as a PNG. And in your project, you
can assign it right here. Here we go. Just like that, it already looks all right. Not that bad, right? But we want particles like some sparks, like a quick impact, right? So the set size is
going to be smaller, zero at one and zero at five. And for the scale,
it's going to be straightforward
from big to small. And this is what we
get, as you can see, looking good, looks
clean, very inviting. Alright, let's have
more particles. We can reuse these until the initialized
particle, Control C, Control V. They
are going to live longer because we want them to spread away a
little bit further. Zoot four, one dot two, and the minimum of the
speed is going to be one. We can increase their size, we actually need a set
scale for these ones, so we can shrink them on the X. As you can see, they
are all vertical, all stretch vertically, right? But we want them to be aligned
with the velocity vect. Fortunately, that's super easy because on the orient block, you can say along
velocity. Here we go. And the cool thing is that they will align with their velocity. If you want, just in case, create a new color property, and it can be
purple, for example, and connect right here to set color looking very good already, as you can see how we can create a very quick impact and
still make it interesting. Let's make sure we fade them
out with a set color of life where it's completely visible at the beginning,
and then it fades out. You can leave this
gradent just like that. Here we go. Oh, yeah, it's overriding the previous values. So let's make sure we set
the composition to multiply. Here we go. Super bright, and then it fades, looking good. Now, let's add a crazy random
movement with turbulence. It's basically noise. We can add it on the
update particles, so it continuously updates the particles with
these turbines. You can set the drag to ten. And the frequency to two, drag will slow them
throughout their lifetime, and frequency is of frequent
the turbines happens. Now, where the magic happens
is on the intensity that can be controlled by a curve if you connect and multiply and
then a sample curve. To animate the sample curve, we can use age over lifetime. For the curve itself, we can select this preset and
then it did the first key, and let's push it forward
in terms of time. So it lasts for a little
while the turbulence, and then it fades out the
intensity of the turbulence. You can also control
these handles right here. So it isn't so linear. And it doesn't move that much. So for this B option
of the multiplier, we can use a random value 1-15. This way, we get a really beautiful movement
from these particles, and then they stop,
as you can see. But we can have a
little more detail. It would be cool
to have a glow at the center, impact beam. So let's copy these triangles, call it the impact beam. It's going to have
only one particle. Set lifetime is going to
be constant, not random. 02 for lifetime. Yes, it's going to be
really quick, like a flash. And for the main text
of the beam we created. Let's just disable the
triangles for a second. This is what's happening
with our flash. We can remove the Pivot, the set angle, and
the set scale. Here we go. And the size
can be constant like seven, for example. Let's
enable everything. Yeah, something
more or less like this as a bright
glow at the center. This weight blends
with the triangles, and it's a quick way to
create this kind of impact. We can keep on
adding a few things. For example, Shockwave. Let's copy this impact
beam, called Shockwave. It's going to live
longer, so we can see it spread zero dot six. As for the text, we
need something new. But fortunately we have
material maker, and it's easy. We are basically going to use two circles and substract
one from the other. So let's begin with
a shape, a circle. So lot eight more or
less for the size, zero for the feather. And let's kind of
create a duplicate of this by using a transform. We are going to scale
it down to zero t 75. But then we are going to use a math node subtract original one from this one
that is from transform, this way we get a ring. Now, if we have a ring,
we can use a blur, for example, fast
blur, and there we go. We have a Shockwave
looking good. All we need is to remove
this black background. Let's use a colorized node and set the black key as
an alpha of zero, so the background
becomes transparent. With this last node selected, let's make sure we export this, called the Shockwave
as a PNG to Unity, and we can assign it right here. It's probably huge. Yeah,
it's huge right now, and it's too persistent. It attracts too much attention. We actually want something
a little bit more discreet. So let's cut down on the size, and let's make sure it grows
over time with a curve similar to this here we go. That's kind of motion, something a bit more like that. Let's actually switch colors. Let's make sure we fade it out with a set color of a life. Let's remove all of the keys, leave only the black
one at the end, which is transparent one. So it fades out at the end. And since it's too
persistent, the first key, it's going to have a low value on the Alpha,
something like this. And we can make
sure it fades out to black, the color itself. We just need to set the
composition to multiply. Otherwise, it overrides
the set color. And yeah, look at
this. Much better. It's smooth, creates a nice
Shockwave. It's discrete. Really adds a nice touch. So that's it for
this first part. On the second part, let's
see how to create the smoke, the explosion, flip book, and how to use vehicles as well.
3. Smoke, Flipbook and Decals: On this lesson, let's see
how to create the smoke, the explosion, and the deckle. Let's first copy this
Shockwave. Call it smoke. In here, the lifetime
is going to be like 1 second and a half. For the text with
material maker, we can create a
smoke, a ship smoke. Nonetheless, it's
going to be useful. For example, we can use let's search for FBM and use
this node right here, the three D text or FBM. If we select is the
preview we have, and we can adjust
the scale to four. Let's cut F but with a
lot more iterations, so it's a little bit more
detailed, like eight. From here, we can apply
this text basically. And we are essentially going to animate the eighth by using a math node where it's going to keep on adding time
this velocity. We can use the
dollar sign, time, multiply it by zero at one, and it will animate the
text, as you can see. You can make it
slower or faster. It's up to from here, we can begin to shape this, for example, with a circum, essentially by connecting
these directly to the edge map and increasing
the value to two dot seven, so it's smoother, and that's it. We could leave it as it
is. It would look good. We could connect to
a colorized node and clamp some values. But we can take this
a step further. If you connect this
to a power node, which is inside a math node and create this very
opaque filling, and then with another math node, we could animate
this on the B value. Little bit faster this time
and then connect a line from here to a text three D apply and connect the
result to the eighth math. What this will do is distort the smoke animate the
smoke even further. And then all we need is to connect this to a
shape, one, one, multiply these two together with a math node and then
use the colorized node. You could directly jump
to the colorized node before using the power node, and it will look good as well. Now, let's begin
clamping some values. For example, dark values,
we could clamp them, and then we could
make the white values even more pronounced by
pushing this key to the left. Let's just make
sure that black E has an Alpha value of zero, so it's transparent and
that's it looking good. The way we export
this is up there on this button instead of
image is animation. And in here, we can
select the resolution. 1024 by ten th four is enough, and we can select
where it begins, the frame it begins
and where it ends. As a matter of fact,
it's the second, two, and 3 seconds. And then on many images we want to output, in this case, 16, so it will be four by four
as a PNG. Here we go. We have each sprite
individually, and to put them together as a flipbook, we can use glue it. You can literally search
Google for glue it, and then download it. It's free. And once you open it up, you
can press the ad button, navigate to your smoke
images and add them all. Number of columns is four. You can press the glut button. Here we go. Now, save it we can call it SmokeFlipbook and
the score four by four. So you know the columns and the rows are simply
SmokeFlipbook 01. You probably should
decrease the resolution because it's huge
flipbook, by the way. But for the purpose
of this tutorial, we can assign it right here and we can say the mode
is a flip book. We can tell which size it
is. It's four by four. We can blend frames, just enable this
option right here. Pretty useful. And the blend
mode is going to be Alpha, so we can render dark values. So let's remove this and
say the set color is dark. Let's also disable this
multiply over life, and we have black smoke. As you can see, it's only one
frame. It's not animated. To do so we can use
a set text index, and we can animate it
with a sample curve where for the time we can
use the age over lifetime, which is basically the
lifetime of the particle. And for the curve itself, the last key, we need to say
how much frames there are. Since it begins
counting at zero, you can say it's 15 frames, even though we have 16. And here we go, it's animated. As for the size, we
can say it's random. 6-8, that should be enough. Here we go. We have smoke, and it doesn't look that bad. As a matter of fact, we can go down here to color of life, increase this first key to 100, so it's visible all
the way to up here. The color is going to
be black down here. And then we can turn it on, so it fades out at the
end, as you can see, so it becomes smoother,
the way it disappears. Right, looking good. We can increase a little
bit count, maybe three. It could have random
rotation so they don't overlap exactly in the same position, but
that should do it. Let's enable everything,
and here we go. That's the final result, and we have a beautiful impact. Let's just make sure we
rename this output to smoke and the other ones with our
respective name so we can reorder them because we want
to make sure that the smoke renders first and then it
renders everything else on top, here we go, exactly like this. When you look at that, we have a beautiful impact
with smoke and aloft. We can still improve this, and I think it's a good learning exercise on how to create a flipbook without
painting frame by frame. We're going to show
you a little trick. First, let's actually copy this smoke system since it's already using
a Flipbook, right? We can rename it to
Flipbook only one for the count lifetime off of
what we have more or less. And for example, we
could actually expose this text that we are
going to use Flipbook. If we create a text two D here on the properties
and call it the Flipbook texter and then connect it right here
to the main texter, this will allow us to switch between flipbooks
which is quite useful. If you want to test different flipbooks and how they look. Now as for the text itself, we have material maker,
which is excellent. But there is this very
interesting website. You can search for
EffectTextureMaker, where, for example, you
can choose the resolution. Let's increase it to 2048, and we have a bunch
of effects here. We have sun explosion, clouds, pearl noise.
There's a lot. And if you select energy
and press animate, it becomes
automatically animated, and then you can tweak
these values right here, for example, for the
thickness, can be zero dt two. As for the color,
completely white, for example, and then we
have other parameters. For example, we want
to enable tune, increase the dark and play
with the light values, so you don't get too much
white on this flipbook. And then you can
even adjust shadows, mid tones and highlights. Shadows can be minus one. Min tones can be minus
zero at seven on the RGB, and then we can
crank up a little bit highlights to zero dot one. Basically, we are trying to only get a few flicks here and there. And then as for the
spreadsheet or the flip hook, the dimension can be six, a second and a half for
the time length of one, and for the time step, 0.03. And if we save this spreadsheet,
this is what we get. It's six by six,
that's the size, and it recorded for F. Maybe
that initial part doesn't really matter up there because it's too much white
and it's repetitive. But once you save that
and impart to Unity, you can then assign it right
here to the flipbook text. And as you can see,
it doesn't fit. It's like a huge square, and that's essentially
because our flipbook size, it doesn't match. You can also expose this
value with a vector two. This way you can choose
the flipbook and the flip book size without
opening VFX Graph, for example, once you
set it six by six, which is what we exported, you can then adjust this curve. Six by six usually is 36, but since we start
counting at zero, we are going to set it to 35. And this curve can
also be exposed. So in case you want
to switch flipbooks, you can control it on the inspected without opening
the effect graph. Once you have done
it, this is what we get pretty cool effect,
as you can see. You can then expose flow to
control the flipbook size, for example, like four. We can disable random. And connect to flip
book size. Here we go. That's another thing you can
control in this spector. You can basically expose
anything you want. We can even reuse this
color parameter 01. So anytime you change
it on the inspector, we'll update the color
of the Flipbook too. As for the multiply
color of life. We can use a curve where it's visible at beginning and then it quickly fades away with
this is in and this is out. This is the type
of effect we get. Very interesting now you
know about that website, EffectTextureMaker,
which is quite interesting for visual
effects artists as well. Another cool detail we
can add is deckles. For example, bullet
impact on a wall. In this case, let's
see something much simpler like torched
ground, basically. And we have added terrain below, so you can see that the
dickel adapts to the ground. You can actually begin by
copying this flip book system. Rename it to decklesOly one
for the count, yes, indeed. But it's going to live much
longer like 3 seconds. Now, as for this entire output, we can remove it because we
are going to replace it with an output part called
URP it dicklT one. It will make a huge difference. It only works with this output. We can rename it to Dickle dark. We are going to have a
dark one and a bright one, decrease the smoothness to zero, and assign the beam we have created just to show
you how this works. We can increase the size to six and set the call
to completely black. And if you play it, nothing much happens because we are still
missing a little detail. You need to go over
to your renderer and add a render
feature right here, which is the decal one. You can set the technique
to screen space. And after doing so, we
are going to orient it with a minus one on the
Y and a zero on the Z. And then down here,
it's going to be zero, zero on the X and Y, and minus one on the Z. And now we can finally
see the decal happening. As you can see, it
disappears out of nowhere, so we can take care of that
with the color of life. Don't forget to set composition
to multiply of the color. And then up here we
have the Alpha keys, where we can say it's visible at start more or less around
here, let's remove this key. It fades away. Here we go. That's much better looking nice. We can obviously improve this. We are using the Bam text, which is a very basic one, but we can also use
it as a bright flare. Let's copy this
entire system from initialized particle
update to output. And rename it to decal Bright. In here, we can say it
leaves of the decal dark, and it also as a smaller
set size like four, and we can switch the color to the color 01, for
example, why not? And if you don't see it,
it's because you need to get closer to the
ground to see it. But essentially, on
the color of a life, we can switch it to
curve and then say the first key as a value of two and the last key
has a value of zero. And more or less
around here, we can add another key and
push it all the way down so it fades away quicker because it's very
bright at the beginning. That's why we are doing
this. And then it slowly fades away like this. This veil is a little bit
smoother, as you can see, and if you want this to
look a little bit better, you can enable
emissive use emissive. And then for the color mode, emissive, so it becomes
a smoother color. And as you can see,
if we move it around, it adapts to the ground
below, and that's fantastic. So that's it, folks. We have a working impact
effect looking good, and you have learned a bunch from how to set
up the particles, the impact itself, how to
create a quick SmokeFlipbook, and explosion flipbook, how to use perems and
visual effect graph, and how to use Dickls. So we hope you
guys have enjoyed. There's plenty more of these
lessons coming up here, so make sure to
check our profile. Thank you very much, and I hope to see you on the next one.
Gabriel Aguiar Prod, Game Development
