I never understood how games can have effects
like these. Ever since I was a little toaster, they have fascinated me.
Then I learned to program, and still did not have the slightest
clue. From the outside, you’d expect it to be this weird black magic fuckery no one
understands. Turns out, it's even weirder.
VFX are somehow exactly in the
middle between art and coding, so both artist and coders stay equally confused.
But you may have noticed our own game has a lot of visual effects. And by the way,
it is called Furcifer’s Fungeon, it is an autoscrolling kinda-bulletheaven
but mostly full-fledged RPG roguelike with stupendous amounts of build options.
It would be so great if you could check it out, you can play everything we have so far for free
in the browser and on Steam. And if you like it, please consider wishlisting it.
Anyway, this meant I had to learn this stuff. And as it turned out, most
of this is not exactly complicated, just very strange and full of tricks VFX artists
found by accident and now copy from each other.
Or all of them are just much
smarter than I am. Maybe both.
You see all these things here, they are
all made using the same easy trick.
How would you, for example,
go around and make water?
It seems incredibly incredibly
difficult to code.
But we do not need real water.
We also do not need a good simulation.
For most games, we just need
a good-looking surface.
So what games often do is just use a shader.
Basically, a little program that runs on the GPU, where it is massively massively
parallel instead of the CPU.
This makes it incredibly fast, but
also incredibly weird to work with.
Because when you do something in
a fragment shader, you do it for every pixel, if you want or not.
And whenever you mention shaders, people are coming with these really
specific takes and descriptions.
Uhm, actually it's not per
pixel, it's per fragment, it's important to distinguish even
if it has no consequence at all.
But do not let these guys fool you. It
is not that hard, and I will prove it.
We have this water in our game, and people
tend to go: “Man, that cool looking water, I wish I could make cool water like this”.
Guess what, you can, it's all just noise.
We will generate some noise and
mangle it until it looks good.
So in a cool engine like Godot, you can
simply generate noise on the fly, your cool engine of choice can likely do that as well.
Strangely enough, we do not care about the actual texture of this sprite at all, we will not use it
in any way, which is why we can use whatever we want, which is why we use this ugly robot icon.
We just need it so we have some measures and something to squeeze for
perspective effect if we need to.
We tell the shader that the noise texture exists
by writing something like uniform sampler2d.
It's called a uniform because it only
exists once and is shared between pixels, and also because everything in the
shader world needs its own weird name.
We can sample it and now we made an ugly smudge!
We can make it move by multiplying the time with a scroll variable and adding it to
the texture coordinates of the pixel.
The coordinates are called UV for some reason
I do not know, and they are between 0 and 1.
U is the x axis and V is the y axis.
TIME is just the time, it counts in seconds since the engine started running.
When we tell the texture to repeat, it repeats, so we can just push very
large values in there and don't care.
And smudge moves.
But how do we make it wet you ask?
If you have looked at water, you may have noticed
it is kinda transparent, but makes stuff behind it look funny. Come on, you know water.
We can do this in a shader by reading the screen.
This is everything behind the sprite with the shader, ordered by z layer.
Just sample the screen_texture instead of the smudge. We now read the screen texture at
the coordinates of the regular texture, which looks trippy but is useless.
We need to look at the screen texture's own coordinates instead, and
there is a keyword for that.
We can now slightly alter them to make
distortion, for example with our smudge!
And see, it waves.
But this does not look convincing.
I can smell that you feel
very unconvinced right now.
This is because you are not easily
fooled my friend, your eyes can see straight through my illusion.
To fool someone as smart as you, one trick is not enough.
We will need 2, or sometimes 3.
It is as simple as that, you will see.
We increase the complexity of this effect by sampling another noise texture and
making it scroll in a different way.
And now we just multiply them and have
something that looks like waves overlapping. Still remaining unfooled? Okay, we will layer on.
We can give this a nice tint by defining a uniform color and multiplying it to the pixel color.
We also define another color for the toplights, and only apply it to the top of the waves.
Honestly, the most important step now is to fiddle around until it looks good.
Trust me, it’s the way to do it. Play with the sliders until you like it.
For another layer of fooling you can add some wave particles when people
are underwater and you are good.
This trick is just everywhere. When you see
fire, there is a good chance someone scrolled some texture over each other and mapped it to
a gradient, just applied to a particle system.
Or this disgusting poison cloud
like this one, same technique.
This laser… it's all the same. I'm not saying
there is only this one trick, there are at least two more or something. But it is insane, how
much is made with the same few easy tricks that are just combined in a clever manner.
It is all just stuff like Dissolving. Distorting. Mangling Noise in
cool-looking shapes. Particles.
And if you guys want to hear more about this:
First of all, let us know by liking this video.
If it performs well, there will
be more. It's that simple.
Also, we already talk a lot about
visual effects so go check that out.
