How Games Make VFX (Demonstrated in Godot 4)

Have you ever wondered how games can be so beautiful? I am making a game, so I tried to find out. Turns out, there are some easy tricks VFX artists use over and over. In this video, I show you how to create water with a shader in Godot Engine (works in other game engines, too!)
Get the Solaria tileset by Jamie Brownhill here: jamiebrownhill...
VFX videos we made: • Godot VFX Tutorials
Play the demo of Furcifer's Fungeon & wishlist: store.steampow...
Play in the browser: playwithfurcif...
Wishlist our other game, Super Kill-BOI 9000, and play the demo: store.steampow...
Join our discord server: / discord
Follow us on twitter to stay updated on Furcifer news and tutorials:
/ tweetfurcifer

[@Zuriki09]

Fun trivia, they're called UV because XYZ is already taken. UV also only denote the 2D texture positions, for 3D textures they're UVW... which are followed by XYZ in the alphabet!

[@RafaelBelvederese]

I came looking for this comment and wasn’t disappointed.

[@codesymphony]

thought it had something to do with ultraviolet haha

[@skibbl_dev]

ah yes! that explains alot! :)

[@bruhnah4life]

Woah thats make a lot of sense

[@daniridao]

I thought it had to do with Chroma as in YUV. Apparently not, so thanks, I learnt something new today :)

[@modiddymo]

I think you’ve touched on something that I haven’t seen in shader / VFX learning material before: the COMMON BUILDING BLOCKS of effects. If we can learn things like dissolve, distort, noise, gradients, textures, etc. we can get better at combining and layering them. Thank you for that. It’s a breakthrough in my understanding.

[@PlayWithFurcifer]

Thank you for this comment, this is exactly what i want to hear

[@styleisaweapon]

Its mix() and smoothstep() all the way down.

[@sebastiangudino9377]

@@styleisaweapon LOL it really is

[@muxecoid]

Wow, this has more content than many full hour talks. I will need to pause and play with the code for an hour to truly grasp it.

[@T3chedOut]

Wow, I love the editing and natural, conversation writing of this video! What a great way to explain this concept that so many of us are unfamiliar with 😅 in such a funny way!!

[@PlayWithFurcifer]

Thank you, im happy to hear that :)

[@wangledteb5671]

Me too, instant subscribe material for sure xD

[@MrMorvar]

Some notes for others 1. You actually need to create that noise within the material. Shader itself does not create it. 2. There's no more 'SCREEN_TEXTURE' available but you can add 'uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;' on the top and it does the job 3. Carefully read the whole code in the end. All changes small changes are not mentioned Thank you none the less :) works!

[@xc6013]

god bless you beautiful genius

[@asleeperj]

Pretty sure this is the part I'm stuck on, there is no NoiseTexture2D node.

[@PlayWithFurcifer]

We're back! Hope you like the video, let us know what you want to see next! Also check out our game's demo & wishlist! store.steampowered.com/app/1700930/Furcifers_Fungeon/

[@Hauntaa]

The editing was tight - no fluff - this was on the level and encouraging without being patronising. Thanks a lot, I know a lot of work went into this. Hello my baby, hello my darlin'!

[@PlayWithFurcifer]

Thank you so much :)

[@devihen]

Shaders are a fundamental tools to make videogames and cgi animation. Every bit of shared knowledge is very appreciated. Thank you.

[@PlayWithFurcifer]

glad you like it :)

[@ChannelOfJoris]

I remember trying to learn this in GameMaker, but they stopped supporting their own tutorials so I never got it to work. Godot is truly becoming the next engine for getting into game development

[@ryanpallesen3569]

This is surprisingly the first time I have heard VFX discussed in a simple, non-technical way that was easy to understand. I now know what a UV actually is. Well done.

[@ChePhan]

To my understanding, UV is used to distinguish between XYZ coordinates for the 3d mesh. VW is associated with a certain German car manufacturer and also a pain to pronounce. So UV was used. Why we're addressing UV.x and UV.y is still puzzling though.

[@RoyBeerZ]

To my understanding VW didn't have anything to do with that, but it's a nice story. It's more that W represents the Quaternion rotation, which you need to start using when you want to feel really dumb for a while.

[@iamcookie1170]

this video made me understand that i should stick to stealing code

[@melcooo]

You sparked a controversal topic 3:21

[@hidemat5141]

Show us 3D shaders please! I've been playing around with the visual shaders, it's a pretty good workflow, because if a node doesn't exist you can write an expression in shaders code and still use it in your visual shader.

[@PlayWithFurcifer]

i try to put a bit of 3d shaders in the videos, but they aren't really my strong suit (since we work on a 2d game)

[@CoolJosh3k]

Called UV(W) because those letters come before XYZ. Why is is called XYZ I don’t know, but I suspect they were rarely used symbols for maths.

[@pawebernaciak1581]

As someone who works around 10 years creating FX for movies, adverts and games after a while you just get this intuitive understanding how to fake any movement by splitting it into few layers that are simpler to archive. It sort of like with coding but divide and conquer works on more visual level.

[@picster]

This is the way. There is one more trick I think I would add: SDF 👍

[@PlayWithFurcifer]

Thank you very much! I should really play around with that

[@NoobieSnake]

Dude, you are so hilarious. Very entertaining to watch and I love the way you speak. Thumbs up and subscribed.

[@pastuh]

I would say its insane how fast computer calculates... In background it calculates windows evnvironment, applications, game engine and each pixel...

[@PlayWithFurcifer]

It really does go brrrrrr

[@IHavePockets]

Liked and Subscribed. This is amazing!

[@xtccy]

YES more! Teach us the way of the shader please! Your fun way that delivered this video was very pleasant to keep me focused on shaders for once in my life. It is the bane of the developer so help us!

[@PlayWithFurcifer]

Thank you, will do :)

[@TheFoxKnocks]

Here's to hoping this video performed well enough to your liking, because I recently swapped from Game Maker to Godot 4 and this stuff is crazy good. Also, cool game.

[@PlayWithFurcifer]

Thank you :) There will be more shader content for sure!

[@leetNightshade]

0:14 stock video of someone dancing in panties, interesting choice, lol.

[@vrojak7636]

"Ugly robot icon" bro you better stop disrespecting my boy icon.png

[@aleclanter2177]

OMG, this is the funnest USEFUL video I've seen in a long time. I love your delivery! :D

[@Knooblegooble]

I've been working in Unreal Engine for years, I just recently opened Godot for the first time and I feel like a baby again, thanks for making me feel less intimidated ♥

[@ivandamyanov]

What a great video! For some reason, I started feeling like I've been doing shaders for years tho I still have no clue how they are done and I haven't tried. The point is, now I got motivated to start and experiment with them cause they dont seem so scary anymore.

[@PlayWithFurcifer]

That is great to hear :D

[@Zurpanik]

Great video again thank you! I revisited this and was wondering -- is there a reason you cannot use the same shader for multiple sprites? If I wanted to create more than a single sprite to be used as a water distortion effect, everything gets messed up as soon as one or the other is placed at the very end of the tree stack or some other location (I'm not sure all the ways to reproduce the issue). For whatever reason, this is one-and-done, you can't apply the shader to more than 1 sprite or color/texturerect and arrange them over different "water spots" on your map. I have a feeling it has something to do with using SCREEN_TEXTURE as a hint_screen_texture, but how in the hells are you supposed to be able to use the same water effect shader on multiple game sprites? My idea is to place sprites with the water effect shader over various ponds and pools in my game world that are separated by different layers. UPDATE: Thankfully the solution is very simple! One needs to add a BackBufferCopy node to the scene tree and then set the shader node as a child of it. Do this for each instance of nodes which use the same distortion shader/material and their individual "background" pixels will be copied and applied to each. Thank you to @PlayWithFurcifer for confirming as well! UPDATE #2: If you're having trouble with BackBufferCopy's Rect copy mode, set the Copy Mode property in your BackBufferCopy node to "Viewport".

[@PlayWithFurcifer]

If you use distortion shaders on different layers you need to add backbuffer copies (there is a BackbufferCopy node) between them so the screenbuffer actually refreshes. It's a bit of a weird behavior and might explain the issue

[@Zurpanik]

@@PlayWithFurcifer Ah thank you my friend! I was just going to put an update in my comment that I discovered BackBufferCopy after referring to the Godot wiki's screen reading shader section... I cannot tell you how happy I am to hear you say the same thing! It confirms my couple hours of looking! Appreciate you and the team!

[@_mickmccarthy]

Awesome video, at the end I was thinking "Wow, I wish there was a playlist of this sort of stuff", and hey, you have a Godot VFX playlist! I know a lot of shader stuff is very general and GLSL is easily transferrable regardless of engines, but it's so nice to just have it all in one place when learning (especially when it comes to debugging something!) Thanks for your efforts!

[@PlayWithFurcifer]

:D

[@asleeperj]

Why don't I have noise in my inspector panel? Looking into it, seems as though there should be a NoiseTexture2D somewhere, but I can't find it at all.

[@toolworks]

Because Godot constantly makes backwards incompatible changes and all tutorials become deprecated after about 4 months. Really frustrating to learn Godot as a beginner. In the same boat as you.

[@asleeperj]

@@toolworks I ended up fixing the issue, but I don't remember how I did it.

[@patata-san5892]

This is really informative. Subscribed and bookmarked

[@sunderark]

I did VFX work for an Obsidian studio game for 2 years. I still have no idea how I did it.

[@PlayWithFurcifer]

That's reassuring! :D

[@Chiken_Chiken3011]

Hi! I really liked the ripple water effect. Can you make a video on how to create such an effect, or tell me how to do it?

[@PlayWithFurcifer]

The one in furcifer? Its just a round particle that increases in scale, when you place it below the water it gets distorted and looks cool

[@KennethFeur]

While watching the video I was thinking "wow this water effect looks similar to backpack battles potion effects, so that's how they did this", and then I searched for other videos in the channel and realized...

[@PlayWithFurcifer]

It's a large part of it, yeah :D

[@masasuzuki1762]

00:04 May I ask where is this from? pixel art that have lighting change in realtime?

[@PlayWithFurcifer]

It's from the Living Worlds demo by Mark Ferrari: www.effectgames.com/demos/worlds/

[@PlayWithFurcifer]

Also check out his GDC talk: kzbin.info/www/bejne/l37Ge2SAq9mYnJI

[@masasuzuki1762]

@@PlayWithFurcifer thank you!

[@RomanDallafior]

3:46 this section is incredibly complex for a beginner, it would be helpful if you went slower and fully explained it instead of skipping important information

[@PlayWithFurcifer]

Lemme get my time machine...! :)

[@RomanDallafior]

@@PlayWithFurcifer but dont get me wrong, it was really funny the video, i just got kinda lost... i watch a bunch of your other tutorials and they are all great.

[@charlesabju907]

4:02 you're wrong, I'm convinced! You're smelling something else, I think that water looks cool already XD.

[@thepurplbanana]

conventionally in mathematics, when talking about parametrizations of surfaces, one would usually use the names u and v for the arguments of the map from the plane to the surface, hence the name UV-map!

[@PlayWithFurcifer]

Fun thing is: I heard at least 3 quite different explainations for the UV thing in the comments :D

[@Aarimous]

Yes! More please :) My goal for 2023 is to work on my visual skills both art and VFX. Cheers!

[@PlayWithFurcifer]

For sure! Some fancy shaders would suit chess survivors really well :D

[@overratedprogrammer]

So this video makes having professional looking VFX EASY. Also I do not understand at all what was being done.. I need.. MORE

[@xsharklinx]

new sub!!! Thank you for that. It’s a breakthrough in my understanding.

[@PlayWithFurcifer]

Amazing to hear :D

[@claytonharting9899]

I love the chaos of this video. “To fool someone as smart as you we will need more than must one trick.” Oh ok yeah, you’re gonna need some magic or like 10 tricks right? “We will need two.” Oh.

[@SmeddyTooBestChannel]

what the FUCK is water

[@PlayWithFurcifer]

Come on! You know water!

[@fakiAZer]

is the thing that make 'gloo gloo" when you throw something at it or you try to take it

[@_gamma.]

(Apparently, I’m taking this from a reddit comment) they’re called UV because XYZ were already taken for the 3 axis

[@joao-pedro-braz]

UV is used because WXYZ are already used to represent spatial coordinates in 3D (W being the outlier which makes the whole thing 4D)

[@muxecoid]

I am surprised this works so well with X and Y distortion being the same value. Since distortion is roughly proportional to inverted normal (Snell's law, sinx=x for small x) I expected that conversion of noise to normal map will be required. Can someone explain why it worked well even without conversion to normal?

[@tin2001]

So I think I understood some of the video.... But then Tom Scott appeared and had a bucket of water thrown at him, and all I could think of is "why is Tom Scott in this video? Is that actually Tom Scott? Why is someone throwing water at him?" And then I went off to find out why and forgot everything in the video.... Thank goodness we can rewatch things on KZbin though.

[@thebrownfrog]

I love this vid

[@xTobsecretx]

I appreciate this sentiment but it has the same vibes as "coding is just googling until it works" which is nice to get someone into coding and breach that barrier. The problem comes when they inevitably fail and don't know what to do. Now they feel idiotic bc after all "coding is just googling", right? That's why I appreciate your emphasis on how artists learn all of these tricks and how a lot of fiddling is required.

[@Jesuisunknown]

So hard to do the tutorial

[@loleq2137]

Brilliant little production) Both enjoyable to watch, and quite informative! Looking forward to new videos on the subject. Also, I'm totally checking out your game as soon as I can)

[@PlayWithFurcifer]

Thank you :D

[@whynotanyting]

Watching shader artists work feels like watching a wizard play with dark arts which result with pretty pictures. Every time I try to learn shading, whether that be for 3D graphics or for games, so much of it goes over my head. Why are we dividing these vectors? What does that even mean? What part of this shader is making the result look like that? It's madness.

[@AlistreWinters]

How do you take a shader like that but use it in different rectangle or square shapes in a 2d side scroller? So you can make puzzles where the character could jump or dash from that water shader with velocity and gravity physics?

[@LazyRabbit-h7m]

Best tutorial ever!!! Thank you!(i m dont speak English, but i all understood)

[@anthonyrye4755]

I was wondering if you can cover some text manipulation tricks. I know there is a built in text effects using rich text, but unable to find information for effects like, movie or credits scroller, or something like a side scroll like a stock ticker. I would like to replicate cracktros like skid row cracktro "lemming final" link: kzbin.info/www/bejne/o5qcfmuea6-lh7c When i used to code on a c54 i learned so much about the machine by making my on intro then i ever did from doing a basic program from books that used basic lang as the example. for example creating a raster bar aka color bar was simple but had a really cool effect,. same with scrolling text. Im not sure if this is more advanced or maybe Im not searching correctly, Just need a place to start .

[@Darkyahweh]

Yeah but how do you make the body react to the physical movement of a player walking through the water.

[@PaintedSky]

I nearly spit out my coffee at the dancing robot icon guy. Well done lol :D

[@controllerfreak3596]

gets more confusing when you bring in vec4's because they are xyzw, which is the same as rgba. i say scale thrm all and let god swizzle them out.

[@Dr_Doctor_]

Nice 👍

[@Subtractive-et2nm]

Your game is nice, but not as nice as you both. Thanks for every clear explanation in all series. I hope you never divorce ;)

[@GPEART1]

UV coordinates comes from the fact that XYZ are already in use for the world, as far as I know, so UV is used for 2D texture coordinates.

[@asleeperj]

This worked perfectly: shader_type canvas_item; uniform sampler2D noise1: repeat_enable; uniform sampler2D noise2: repeat_enable; uniform vec2 scroll = vec2(0.05, 0.05); uniform vec2 scroll2 = vec2(0.05, 0.05); uniform float distortion : hint_range(-1,1) = 0.2; uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap; void vertex() { // Called for every vertex the material is visible on. } void fragment() { float depth = texture(noise1, UV + scroll * TIME).r * texture(noise2, UV + scroll2 * TIME).r; vec4 screen_col = texture(SCREEN_TEXTURE, SCREEN_UV + distortion * vec2(depth)); COLOR = screen_col; }

[@anchoredharbour711]

goodness, thank you so much for this

[@Marconius6]

It's called UV because they're coordinates and XYZ was already taken. So they went for UVW to create a second vector.

[@krisp422]

This was very informative, and I love your comedy style haha you got a new subscriber!

[@thetiphon]

3:40 i have gray rectangle 😐 i dont know what im doing wrong upd: gotta put something in the background. fool me

[@Gellogy]

having trouble when i put in "distortion_strength", says it is an unknown identifier. any idea how to fix this?

[@christopherjones7191]

U V coordinates are 2d used to map to X Y Z coordinates which are in 3d space, im pretty sure we use those because U V W X Y Z. We just went three letters back.

[@propov1802]

How were you able to create a NoiseTexture2D? I can't seem to find the option.

[@xX_dash_Xx]

thx for coding along with the vid instead of dumping a giant function that we can't decipher (looking at you sebastian lague)

[@nikbivation]

very nice and funny, thank you!

[@PlayWithFurcifer]

Aww, thank you :)

[@ry6554]

Basically just: "Random Bulls**t GO!"

[@ashannahensley3288]

The mix of comedy, education, and the fact your vid avatar is an AdoraToaster is pure gold. Feel bad that we're limited to only one upvote per video.

[@PlayWithFurcifer]

Thank you :)

[@ashannahensley3288]

@@PlayWithFurcifer You're welcome ^_^.

[@Marconius6]

"There's a keyword for that" is probably the worst part of writing shader code...

[@MinecraftRedsome]

Can someone explain me why my noise is black and blue and not white a n blue? even invert doesnt change smth.. Ny screen_col turns the material color form white to black? uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap; hwere do i need to put it excatly? is it maybe the issue?

[@chriscuplife0255]

Screen texture is not a thing anymore so add this uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

[@ElementalTJ]

Subscribed, thank you for the video.

[@PlayWithFurcifer]

Thank you :)

[@ElementalTJ]

@@PlayWithFurcifer I finally made my first game Godot and circled around to your video again just now! Cheers!

[@PlayWithFurcifer]

@@ElementalTJNice!

[@bunkerhillstudios3382]

I mostly use vj software and have a very shallow understanding of shaders (I can convert some older ones to work in macos quartz). This was incredibly helpful for both of those

[@Light1c3]

I tried recreating the level using the tilemap you linked to, but I'm not sure how you got that working :( I don't see the tile you used so the lower levels were visible

[@Breaking_Beard]

"How do we make it wet?" Wow I'm learning more from this video than any I've seen

[@jordentacoztm]

More please this was very good. I always feel overwelmed pretty fast with shaders... I just need someone to explain it simply

[@PlayWithFurcifer]

Thank you! This will not be our last shader video for sure :)

[@The_Soup_Wizard]

Liking this video purely for the little toaster reference. Family.

[@ZimaZino]

every video is a journey into knowledge, thanks for guiding us!

[@lebasson]

Loving the humor and the tutorial as well. More please!

[@PlayWithFurcifer]

Thank you! ok :)

[@sleve_mcdichael]

Nice humour lol, and great video!

[@PlayWithFurcifer]

Thank you!

[@sleve_mcdichael]

@@PlayWithFurcifer Hey I was wondering, what's the game at 0:04?

[@CrunchyBuncher]

thumbnail: "ITS ALL ONE TRICK" 5:13 "I'm not saying it's only this one trick"😥

[@PlayWithFurcifer]

Was it an exaggeration? Was it a bamboozle? A joke? Or masterful misdirection? We may never know.

[@godofdream9112]

More shader tutorial... you are the only one who teaches godot shader... you are the masaya of godot shader..

[@xc6013]

if you were to do this for a large body of water in a game, would it cause problems with performance issues?

[@jesse-got-dolphins-into-heaven]

nice i have an idea for a simple mobile game. i have zero coding exp. can you recommend some place to start?

[@AnnaGlin]

wow it really *isn't* that complicated! thanks for breaking it down!

[@PlayWithFurcifer]

Glad it was helpful :D

[@ChippyPippy]

Same, I was so intimidated by VFX back in the day. Until I started trying it out and realized I was just doing the same things over and over.

[@PlayWithFurcifer]

Same for me, it has this scary aura around it somehow :D

[@anthonyrye4755]

Love you tutorials

[@PlayWithFurcifer]

Thanks!

[@wistyroamlands7495]

Around the 4 minute mark it went off the deep end (I'm an artist) and I basically went 'Yep, sticking to playmaker and bolt, one day I'll hire programmers for real I swear'

[@wistyroamlands7495]

..And for anything else, there's the asset store. If it aint broke.

[@jiku2090]

Im not sure if you will see this but when i tried to do this code my icon is just blank and no movement is being showed at all.

[@NightpireVideos]

That was both hilarious and informative. Good job

[@PlayWithFurcifer]

Thank you! :D

[@ianhall7513]

"...There are at least..." "2" had me rolling X'D

[@dayw81]

I love your tutorials. Hoping to see a second and - do I dare - third trick everything else is based on.

[@PlayWithFurcifer]

Even a third one? Dream big i guess Thank you very much :) we will see what we can do

[@thygrrr]

Looking forward to seeing the second trick of VFX in your next tutorial!

[@jena_thornwyrd]

Do you know that feeling when you play a game on Itchio and you like it a lot, you find another one that you like as well, then you look for tutorials to improve your own game, and you find a cool channel, then you realize that all were made by the same persons?………………

[@PlayWithFurcifer]

That's crazy :D

[@alexander-the-great-v1u]

there's nothing more to say than "subscribed"

[@sephreed1938]

What I wouldn't give to see this tutorial with a single screenshot of what you actually did. It's like doing archeology trying to make this shader from the video.

[@PlayWithFurcifer]

We show everything you need to do in a video. If you wanted a still image, you should not have clicked on a video. How dare we actually explain the shader and not just give you something to copypaste.

[@whtiequillBj]

It's called UV essentially because it's texture space and not geometry space which is XYZ.

[@PlayWithFurcifer]

It's so fun to get all these different guesses :D

[@VeryCoolGuyMike]

I loved this video. I understood none of it. But I loved it all the same.