Godot 4 Shader Tutorial for Absolute Beginners

good morning afternoon or evening wherever and whenever you are my name is Ben and welcome to this gdau shaders tutorial for absolute beginners in this video I'm going to cover the basics of shaders in gdau actually just the very basics of a of a fragment Shader so we're going to have a new project here in gdo and drag over our gido icon here and I'm just going to set the transform to 0 in order to apply a Shader uh you're going to need some sort of canvas item in this case I'm going to use a Sprite that we can apply our Shader to now we'll save this scene as icon come over here to the right and we'll come to the material we'll do a new Shader material and then from here we'll do a new well we need to click on it actually and then from here we'll do a new Shader and it can be called icon GD Shader that's fine that's what GTO wants to call it and we can open up this script by double clicking on it the Shader script and that opens up this little Shader window now gdos shaders will automatically update to reflect what is going on so we can easily see how our Shader is working right here in the editor you can see right away we have the Shader type this is a canvas item Shader there's different types of shaders for lighting and such but this is the one that we'll use for our Sprite here and there's this one function inside of our Shader called fragment and what this does if you imagine in our Shader here every single Pixel on this texture can be modified inside of this fragment function so when the Shader is run what happens is the Shader coat the Shader program runs through each individual pixel of our image and applies this code to that pixel and that allows us to do a lot of fancy things uh so first let's get the color of the current pixel well let's just output a color so what we'll do is we'll say color and this is the output of this function we'll set it equal to VC 4 and then we'll just do one one one and one for our color and then put a semicolon at the end so GTO Shader language is uh a little bit more strict than GD script so we've got to have the semicolon here and what this does is it just says for every single Pixel output white and you can see it's updated and now our Shader is just completely white right here um but if we were to comment this out like this then it would go back to what it was before now let's say we wanted to make a Shader for a character that flashed white that's a pretty common uh problem in game development we could uh we would want our Shader to um output white but we wouldn't want it to always be fully visible we'd want to adjust the transparency based on the transparency of the Sprite you can see here in the corner if we apply our Shader here in the corner it doesn't account for that transparency see it just makes the whole thing white so what we need to be able to do is get the color of the pixel that we're on and we can do that like this we can say VC or input color and we'll set this equal to texture texture uppercase all like that and UV and so what that does is it take it grabs the color from this text texture right here at this position of the texture so the UV is like an XY coordinate position and so that gives us the input color for each individual pixel right then we can put a semicolon at the end here and once we have our input color um you could make a Shader that just output that input color so it just gets the input and then it outputs it right and we end up with the exact same Sprite we had to begin with because we're just going through every single Pixel we're getting the color of that pixel and then we're outputting that same color back out okay that makes sense hopefully now what we can do is we can take our white color here and instead of doing an alpha value of one we can actually get the alpha value of our input color so in order to do that we can pass in input color do a for Alpha now what happens is it outputs white but it takes into account the alpha value of whatever the pixels were existing and now we've made ourselves a Shader that flashes white we could mess with this Shader a little bit more say we wanted to Output some sort of kind of like a monochrome color we could pass in the red value so input color. red um into our output and now we're getting um what we're getting is a maxed out blue value a maxed out green value and then uh not very much red because our our our gdau logo doesn't actually have a lot of red in it right um there's very little red in this logo here it's mostly blues and greens and so that's why when that's why when we do this we don't get very much information here uh we do get the face though we could take so we've got our red green blue values right we could take our green value input color. green and now we're maxing out the blue value but we're passing in the red and the green value and this kind of gives us a monochrome tone here and we could we could do the opposite so we could output our red green blue and say we wanted our red color back we can max out our red at 1.0 and um leave the green and the blue values at what they actually are and we get kind of this reddish tone so you can already see we're able to manipulate the values of each individual pixel just by changing the output color um and using our input color as uh as some sort of a re starting point or reference and a lot of the time that's what shaders do so what they'll do is they'll they'll get the color that was there before they'll perform some operations on that color manipulate it in some way and then they'll spit back out an output color let's try to apply this with a very basic black and white color so now what we're going to do is we're going to take our input vectors our our input here which is our input color red green and blue and we're going to Output an average of those colors so we'll say um float color average equals input color. red plus input color. Green Plus input color. blue and then we'll divide them all by three and we'll need to use 3.0 here we can't just use the number three because G do is a little bit more strict then for all of these we can just pass in our color average like this okay so we're taking the average of all of the colors and then we're passing it in to our output color and we've made a very simple black and white Shader now this method for getting um black and white is not 100% accurate and part of that is because um blue for example tends to be a lot darker and so this doesn't really account for the different values of red green and blue how they each have different values but this is a very good starting point and again you can see how we can very quickly perform some operations on a basic on the input color that we get and then spit out a new output color and create some sort of Shader using that lastly I want to put a simple control statement in here um to show that you can do that so what we'll do is we'll create an output color here so we'll say VC for output put output color and we'll set this equal to this value that we were doing before and then we'll just do output color here output color and it's going to be exactly the same as it was before right but now what we're going to do is a simple if statement so we'll say if output color do let's see if output color. red is greater then uh 0.8 and output color do green red green red green blue I I forget the order let's see is greater than 0.8 and output color dot blue is greater than 0.8 I'm going put parentheses around this because I think you have to and then we also need brackets again this is different from GD script so keep that in mind as you're writing your Shader then we can say output color dot Alpha equals 0.0 so the ranges on our colors are going to be from one from 0.0 to 1 .0 1.0 being the maximum range right we'll put it um I'm going to wait to put the semicolon here because I want you to try and guess what this code is going to do we're going to get an output color that's going to be gray right it's going to be black and white and then we're going to do a check we're going to check the values of our colors and once that check is done we're going to alter the output color if those values are all greater than a certain amount so try and guess what is going to to happen when I actually apply this semicolon and if you can't figure it out that's okay but it's good to just try and then see how close you were okay so we're going to do it now we'll put the semicolon here and that is very strange so what happened is uh our our code here what it does is it checks to see if our color is greater if our color the red green and blue values on our color are greater than 8 and if they are it makes the color transparent and remember this is being applied to each individual pixel so when we make it transparent when we set the alpha to zero here it's only on the pixel where the colors are all greater than 0.8 which means white essentially so we've done is we've made our white values inside of this image transparent we could also do something like just make them red so we could say output color equals and then we'll just do VC for uh 1.0 0.0 0.0 and 1.0 and this is red right it's maxed in the red value so we changed all of the white values to red and we could adjust this these parameters here to make it more I so we could do seven right instead of uh eight and that allows us to grab more of those lighter values and there we go I mean that's that's the very basics of shaders I'm not going to go into any more but I was I had a student ask about shaders and how shaders work inside of gdau and I couldn't actually F they they wanted me to recommend a video I couldn't actually find a basic video that showed uh something like this like the very basics of using the fragment function inside of a canvas item Shader and explaining that out so I thought I'd make one hopefully this video is helpful to you thank you so much for watching it be sure to like And subscribe to the channel if you haven't already and I will see you all in the next video

Channel: Heartbeast

Views: 21,865

Keywords: Tutorial, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev, Godot Engine

Id: KeHKKLuygoY

Length: 13min 18sec (798 seconds)

Published: Thu Oct 26 2023