How to Use SHADERS in Godot 4 (everything to know)

hello so today we will be covering everything there is to know about shaders in gdau how to use them when to use them why to use them and well this tutorial is split into three main sections from the very basics in example one to a step-by-step tutorial on how to create a Shader to enhance the look of our game in example two and in example three using the player input to change how the Shader displays on the screen and my goal today is to explain everything there is to know so you are able to go off and create your own specific shaders to really improve your own good old games so just quickly before we get started it would mean the world if you could subscribe and drop a like to help YouTube push this tutorial on shaders to more aspiring game developers who are looking to create their own good old games as well thanks and now let's begin okay so example one we are in an empty game empty world we have a node 2D up here called World example one and what we're going to do inside of here is we're going to drag in our goodto icon in the basics we're going to go over some basic things how shaders work how to add them what they are you know what we can even do like so first how do we make a Shader well let's say we want to add a Shader to our icon we can only add shaders to Canvas items an icon a Sprite 2D is part of a canvas item right so Color reck stuff like that right things that are part of canvas items a character body 2D is a c canvas item it has a canvas item it's part of that subass right so things like this you can add a Shader on if it's not something like that then you cannot add a Shader onto it and you would have to add a Shader onto each thing specifically right you can't have a parent that has all the shaders that's going to give a Shader to to all its children because that's just not how it works you have to go over here to the canvas item material now you can load the Shader onto other materials because every Shader is going to be its own script and we're going to go over that right now when we create a Shader so if we go over here we can click on a material and we can e either say new canvas item material new Shader material or we can load in a material right so if we click on a new Shader material we click on this little ball here you're going to see the Shader comes up if we go down here and we click on this Arrow we can create a new Shader or we can load in an existing Shader which we can save right because we're going to create a script so if we click on new Shader if we click on new Shader it's going to let us come up and make a Shader we're just going to name this world example one and hopefully save that into the example one scene down here right but if we click on it it's going to open up a script this is a Shader script now this is not GD script this is a Shader script and inside this scpt we can remove all this because we are not going to use any of this but we are going to use the fragment function now what is the fragment function well this is going to be called for every single Pixel within this image every pixel inside of this image is going to run through this function so with that being said how do we get that pixel how do we make a variable for that pixel well to do that we can say a four and we can say pixel color this is going to be each individual pixel pixel we can say texture which is going to be a function and we can call it texture and then the UV which is kind of the coordinates for that pixel within our image now this is going to be a variable for that pixel now we can go and we can make changes to this pixel color here and then we can end up changing our color down below right so if we say color we want the color to equal pixel color like this what's going to happen nothing right because we are just equaling it to itself what if we were to come here and we were to say pixel color was 2 equal a VC 4 and we put in a number code right so we can put in one Z Zer and we can say pixel color. a this is going to this should theoretically be red if we add in this here at the end and it's going to make everything red right so let me explain what what's going on here so these are the color numbers right color numbers if we go to a let's go up here let's add a color wct color numbers here you can kind of see they go through 250 in the script they only go up to one they go from zero to one if we wanted to get an exact color let's say we wanted to get you know 255 let's say we wanted to make it white how would we do that well we would have to get we could just do one one one one right the entire way right and this would end up being a white because it would be maxed out but really what if we wanted to get an exact number so what if we wanted to get this pink well we would have to say these two are Max so those are fine but then we have 76 so the middle one cannot be one because maybe it's going to be 7 maybe it's going to be point4 somewhere in here right it's going to be somewhere in here but if we wanted that exact color what would we have to do well it's 74 right 74 or 76 76 is not going to work because 76 is greater than one so it's going to equal one within the script so we can say 76.0 / 25.0 and then we're going to get that exact color right so if we go here we change this what if we want this purple right well you see 157 we can go up here to the first color we can say 1570 divided by 255 because what this is basically doing is this is getting the whatever the one value is right so whatever the one value is for this is it's going to get that version of it but it's going to get the exact perfect version of it so we have the that color code right but that's kind of what that does but you can kind of see that we take this pixel color the pixel color that it's giving to us and we change that pixel color and we make that pixel color equal to this instead of equal to what it was before right and well that's going to end up equaling it to this right here right so our color is not equal to this now pixel color here. a this is taking the transparency of our existing pixel color what if we did not want that what if we wanted it to be half transparent well we can do 0.5 and you're going to see that it kind of goes a little bit invisible but we don't want this right so now I want to go over kind of uniforms which are variables we can come up here above the function and we can say uniform float scale is equal to one right so the scale is equal to one what's this it's scaled at one already but if we go down here we take our UV we can say V four pixel color equals texture and we can get the texture and everything and then we can take this UV the coordinate and we can multiply it right so we can say boom and we can multiply it by scale and see what that what does it nothing right because it's equal to one what if we equal it to three what's going to happen now you're going to see it changes it scales it up what if we do to 10 see it's going to make it 10 times smaller what if we did Point what if we did 0. five it's G to make it bigger though right see now it's going to be bigger but you know normal scale we want it to be at one and that's going to be the normal scale so that's kind of how scaling works now what if we wanted to create an exported VAR and what if we wanted to create like a little tilt well that would be Distortion so we can come up here we can create another variable we can say uniform and this is all going to make so much sense when we get into actual examples in example two and example three but if we say distorted value and we can make hint range this is going to allow us to have an exported variable from the range that we are like a little slider so we can kind of test it out like like real time which is going to be really cool in just a second but we can say the value maybe we want it to be at neg five at the minimum and then maybe five at the maximum and at the beginning we can say it's equal to zero now what this is going to do at the beginning is it's not going to have any Distortion at the very start but a distortion is going to be a little bit more complex and what we're going to do with that is we're going to have to come up here just like this and we're going to create a v 2 and V 2 is going to be a new variable and we can name it distorted uh distorted UV and basically distorted UV is going to just be equal to UV for now and then down here is where we're going to change it so we can say distorted UV so we can basically get our UV dox plus equals distorted uv. Y and then we can times this by the distorted value right which is whatever value we have up here and that's how it's going to tilt it and we can change up these axises to have it tilted different and then of course we're going to have to come down here and instead of taking the pixel color we can say the distorted UV or actually we want to take this so we have the same texture so we can put it up here and we can say dist sorted UV just like this right and we can make this back and we can say this is pixel color just like this okay so now what's going to end up happening okay and this is giving us an error here because we have to have this under the distorted so we need to put this above the pixel color up here right and then we can remove these and we can add a little space down here just like this and pixel color here spelled wrong and we do not have a ending for our distorted value but that should work okay that works so if we go to our icon and we come over here to our Shader we can see Shader parameters we can see distorted value and we can move this slider because this is what the hint range here is if we move it along you see what happens it kind of distorts it what if we change up these axises what if we say x and we say y what's going to happen now well if we move this stuff around it's going to go up and down what if we say Y and Y what's going to happen here well it's going to do something kind of funky it's going to like kind of Squish and stretch it which is pretty cool so this is Max this is at five it kind of gets squished and then we get stretched right so that's kind of how you can mess around with distorted but what if we wanted to kind of change the color of different pixels on the screen based on what those pixels are what if we wanted to do something like a gray skull well changing the color is we're going to kind of go over here in just minute and it's going to be basically checking the uh the the RGB of it I forget what order I keep trying to say RBG but that's not how it is it's it's RGB right we can check if like let's say the pixel color. G is greater than 50 then we can say okay if it's greater than 50 then we want to change it to this color but right now we're going to do something very basic this is a very basic color change and it's not really going to take the color it's just going to to grab it and change it into a gray scale by changing the the uh the colors of everything down right by just a little bit and I I'll explain how it works here in just a second but if we go under we can say we can create a float and we can name this as brightness and we can say this equals pixel color. R plus pixel color. G Plus pixel color B and then we can say slash the brightness value which we're going to have to go and create right so if we come up here we create a brightness value we can say something like uniform brightness value and what's brightness value going to end up being well brightness value is going to have to be about three let's see so we can we can change it we can see what happens right we can say hint and we can say maybe hint from hint range from maybe 0 to 10 and we can see what works best right so we can say equals to three for now and then we can come down here this should work and then we have to create one more vector and this Vector is going to be a vect 4 and it's going to be just like our pixel color but we're going to end up naming it gray color right because it's going to be our gray scale so we can say VC four and then we can grab our brightness that we just created the variable and what brightness here is going to end up doing is this is going to set the v r to the brightness color it's going to set the G to the brightness color and it's going to set the B to the brightness color what's this going to do well it's going to make every single uh number the same because we divide it and we basically grab the average and then we can say pixel color a so the it's still you know a one it's still visible and then down here we can say gray color and that's going to instantly put it into a gray scale right okay so we have a air we forgot to put float up here at the top and that should go we have distorted UV which remember we remove so we do have to remove that as well and we have another air we forgot to end off this this line and there we go we have gray but why why does gray work right if we go to our color rect and we come over here and we make everything equal to the exact same it's going to be white if we go over here on the gray and we move it up this gray scale you see every single color is always equal to the exact same color so that's what we're basically doing is we're grabbing the average to create a basic gray scale now if we go to our icon and we come over here to our material and we can change up the Shad of parameters we can move the the brightness and see what happens when we play with them right it gets darker if we go up and it gets lighter if we go down and that's kind of how that works so that's how you create a basic gray scale but um what if we wanted to kind of remove everything what I was talking about just a minute ago but just leave a color so let's remove the gray scale here completely remove the gray scale and then down here we have to do pixel color okay this is the last thing I'm going to go over here in the example one before we get into example two and go over the real examples but if we if we grab our pixel color and then we say something like an if statement which we can create within within this script we can say if maybe pixel color. B is greater than something blue right something blue maybe we can go to our color wct and we can come over here we can grab this color switcher and we can kind of see so this blue let's get the blue so we can see see this blue is equal to 191 this blue is equal to 82 this blue is equal to 50 this blue here is equal to 66 so they're all about over 50 so we can say just uh this is the highest one right so we can say if the blue is higher than 200 which is only the white if the blue is higher than 200 then we're going to want to leave it so we can say if blue is greater than 200 divid 255 right then we want to say with the curly brackets we can say pixel color. a is equal to 0.0 and that's going to be invisible and you can kind of see how that works right and that's going to be an if statement and it's going to remove everything else what if we said that it's equal to visible well then what's going to happen it's going to leave it but what what this is doing here is it's making anything that's greater invisible and all or I guess I guess it's making anything under invisible so we would have to flip this here if we flip it then it's going to do the opposite right because now it's saying okay white is greater than this number so now we want to hide it but yeah so if we did this then it would make it invisible right because we're grabbing this number which is whatever this is about 08 and that's going to end up being higher than all the others because we checked with a Color Picker right and we went to a color wheel and did it legitimately but that's a very basic overview of shaders and how they can be added to change different pixels and different movements and Distortion and stuff like that within gdo within the shaders but now let's move on to a little game where we're going to learn to make a water Shader which is an actual Shader that's going to be useful maybe you can use it for your own game and maybe you can use things within that Shader to make something to enhance the color of the pixels because we're going to be going over everything in this tutorial so let's get into that let's make a little water Shader in example two and then we're going to move into example three which is where we're going to make a pressure plate if we click it then it's going to turn a Shader on and off by changing a variable from a GD script so it's going to be pretty entertaining and it's probably going to be pretty informative as well so let's get into example two and let's learn about wave shaders okay so example two right now if we click play on the game we have absolutely nothing the water does not move nothing even happens how are we going to go about this well to start we're going to go up here to the top we're going to add a new color wct and we're just going to move this color wct over here for testing for now right and then we'll come back to our project so this color W what are we going to do well let's set it to a watercolor this is not going to be the official watercolor this is not what we're going to use for the waves but we'll set it for this for now now this color wct we can rename to test and then we can come over here to material we can go to Shader and we can click on new Shader we can add a new Shader to this and we can name it World example 2 because that's what it is it's for our world example 2 and we can just name this Shader here and create it now if we click on this sh Shader we're going to have a blank canvas to work with now inside of the Shader how what are we even going to do what is our thought process well we're going to have a ton of variables we can remove this and we can remove Vortex to keep everything as simple as possible now here we're going to want to say a variable we can say uniform float progress right and this is going to make sense this is all going to be able to be changed from our uniform or from our parameters we can say float the frequency of the wave and for now we can say 2.5 we're of course going to change that later and we can say uniform float the amplitude of the wave which is going to be I guess one for now 0.1 for now and then we can say uniform float speed equals two for now and then we can change that later as well so that's just very basic stuff and then we're going to have two more uniform floats but these are going to be colors so we can end up having colors so the wave is going to consist of two colors it's going to have to consist of two colors if you want the background transparent then you can make that color a transparent color right so you'll be able to see right through it but we can say V for uh background color which is going to be equal to a source color and what this is going to do is going to allow us to pick a color so then we can say uniform VC for uh the wave color which then we can say Source color as well and let's go over here to the test you can see Shader parameters if we open this you can see everything that we have what if we want the background to be transparent well we can do that what if we want the wave color to be equal to the color of our wave over here well we can do that now that it's equal to that but we can't see anything because it doesn't call those anywhere it doesn't even take these but you can kind of see our background colors are in our wave color if we come down into the fragment we can say something like VC four wave and then we can add in the wave to the color of the the the wreck the color wreck and to do this we're going to actually have to go out and we're going to have to create a new function so we can create a function outside of the Void function that we can call from the fragment function or outside of the fragment function that we can call from the fragment function if we say V for wave and then we can pass through whatever we're going to want to pass through we're going to have to pass through our UV so we'll pass through our UV variable then we can do curly brackets and then we can say float and then we can say sinus equals sin and inside of here is going to be UV dox plus time times the speed of our wave which is our variable and then we're going to want to times this by frequency and this uh equation that we're putting together right now is a basic wave equation or basic uh it's like a sound wave equation equation that you can find in physics or anywhere right but this is kind of how I wave put together or how a sound wave is put together and then what we'll do is we'll return wave color um right and then because our wave color is going to be from this exported variable out here and then we can times this here by step 1.0 minus whatever we get from that sinus uh function up there and then we can equal this or we can minus the progress and then you doy because we want it to be going horizontally and not vertically and if we change this in it the wave will go vertically but if we come down here into fragment and we say VC for wave which is a variable and we can call our wave function that we just created and we can pass through UV which is each individual pixel and then we can say we want the color. RGB to equal a mix of the background color so then it's going to be like two lines going throughout so we want it to mix the background color and the wave and then we want it to equal wave. a which is going to be fully transparent. RGB and theoretically that should work and there you go right that's a wave it's pretty wavy and it looks good and we can go in and we can change up all these functions now of course the transparence here the background color is a different color and the water is a different color cuz it's not really it's basically two colors and it's changing the pixels as it goes that's why we have this background color equaling the first and then this wave equaling the second and then we're going to grab the transparency of whatever we want the transparency to be so if we wanted the transparency to be half we can make that half and it's going to make it half right or we can just make it one because it's never really going to not be one right but we're going to go here and we're going to say wave. a whoops wave. a we're going to grab our background color we're going to equal our background color to the sky we're going to equal our wave color to the water and then we can come over here and we can move this in so instead of water body we're actually not going to touch this we're going to come to water body we're going to come down here and we're going to go to our material we're going to create a new Shader for our water body and we can load in the Shader that we just created so it should be an example two scene we can load in our Shader and you can kind of see how that works now this is automatically going to load it into this one which is not exactly what we want but we can go in and we can change everything however we want to right so maybe we want it we can just leave it all at this and then we can go to this one over here we can maybe change the frequency to maybe two okay it's gonna end up changing both because I I copied and pasted these Color reck over here over so we can remove this wct and then this rect here we can kind of keep whatever is here we can move our amplitude to maybe 0.005 like it was and then we can bring this up of course we can expand it down which is going to kind of stretch it a little bit but something like that looks like a wave it looks like it's kind of going maybe the speed needs to be a little bit down maybe the frequency needs to be a little bit down as well and now it's like a slower wave maybe this speed needs to be be a little quicker maybe a little too quick maybe the progress see the progress is going to be the fill level in the thing so what if we did 08 well it's going to be much higher right but we just leave at 0.5 so it's in the middle and that's going to look good right so that that looks like it's a wave now if we grab this this is our other color wct we can rename this to water body 2 or no we're going to leave this as test and then we can come up here and we can grab another color wck this color wct we can go to material and we can new Shader material and we can end up loading that same script and you're going to see what happens here we're going to have to click on it Shader parameters we can grab the background color whatever we want the background color to be and we can grab the wave color and this one here we're going to want it to be a little bit more Rocky right because it's in Ocean we want the speed to be negative because now it's going to be coming and it's going to look like it's hitting this wall instead of going away from it amplitude maybe we want that down by a little bit just maybe a tiny bit maybe maybe even a little bit more than that right frequency maybe we want that down as well and then progress same thing it's okay as it is and you're going to kind of see how this goes if we click play our water now has a little bit of Animation has a little bit of movement it's not as bare as it used to be and that looks good right so that's nice these are two completely different separate water areas so they're not interacting with each other they're using the same Shader but they're not interacting with each other which is how we want it to be right so that how we're going to go that's how we're going to create a wave now I want to move into example three where we're going to take onscreen input player input user input and then we're going to change the the Shader based on the input that we go and we're also going to go over how to change the color of different pixels on the screen based on what the color is of that existing pixel right so let's move into example three and let's learn about that okay so in example three we don't really have much if we click play we have a player we have a little world and we have a little pressure plate if we jump on it then it's going to nothing's going to happen but it's going to end up going up here into this and it's going to should print off something I guess it's not I guess we okay we have it hidden over here so it is printing off something we just have it hidden so if we click play in our world 3 we jump on top of this pressure plate you're going to see down there in the output it's going to print off every time we jump on it but we want whenever we jump on it we want that to end up changing the Shader that we have right we want that to change the existing Shader so how are we going to go about that well we're going to go to our tile map and we're just going to add a Shader we're going to keep it basic and add a Shader to our tile map we can say new Shader material and we can create a brand new Shader now this Shader here is going to be a very very basic one at the beginning and to do this we are going to create a variable and this variable is going to see if the Shader is on or off so we can say uniform float on off equals o do right so this is a variable and we're going to go over to the Shad of parameters and we can equal it to one or we can equal it to zero based on if we want the Shader to be on or off now if we go into the fragment here we can say something like VC 4 like we have to have in everything we can say pixel color equals texture and this can equal texture UV just like it has to equal and then we can come down here and we can say something to quickly invert the color so we want to invert the picture pixel whenever the Shader is on so we can say V 4 color equals VC 4 but the magic with this here is going to be what what we do in GD script and how we access these variables so we can say one minus pixel color this is basically going to just flip-flop the color color um RGB RGB pixel color. a and then down here we're going to basically see if that on or off function what is equal to if on off is greater than o.5 then that means we want the the the scene to be on right so if that is true then we want color cuz we want it to be on we say color equals the uh color right right so this is going to equal this color here so if this is on then we're going to invert it if it's not on then we're not going to invert it so how are we going to go about that well if we go to 2D real quick let me just show you what it looks like if on or off over here is equal to one it's going to look like that if on or off is equal to zero it's going to look like that right so if we go up to to World 3 example when we click on the pressure plate we have print pressure plate now inside of this script we have our get ready variable to grab the tile map now if we get that tile map because that's what our Shader is attached to remember our Shader is attached to that let's remove this and let's say VAR um Shader status Shader status is going to be equal to tile map. material and then we can say get Shader parameter it's not going to auto Correct for this which is very weird it does not give you a a help whenever you're doing sh the get Shader parameter or set Shader parameter and we can put in our name right so that's going to be the Shader that's the variable that we want to pull out right so on our player we have a function variable and the reason I have that is so we can keep it basic here and we don't have to instance the player or anything we can just say if player has or if body has method player then we want to first of all we can say print the Shader status so we can see that it works you know correctly and then we can say if Shader status is greater than .5 that means we want it to be on then we can say all well that means we clicked it right and that means it was on that means we want to turn it off so we can say TI map. material do set Shader parameter um and then on off and then we can say 0.0 on off 0.0 so we want it to set it to equal 0.0 and then if we go down if we say uh if Shader status is less than o.5 that means it was already off so we want to set it to equal to on if we click play on the world you're going to see that if we jump on it it's going to change it if we jump on it again it's going to change it back right back and forth back and forth and it's going to print out that shaded parameter so this is how you're going to get shaded parameters and this is how you're going to change the Shader parameter or the Shader variables and this can be anything this can be scale this can be the how heavy the waves are right in our other example we can change the amplitude we can change the everything the speed anything that you you need to change right you could change it through script by using this function here right so that is kind of all that there is to this video I'm hoping you were able to find something useful I want to thank you so much for watching and I also want to mention that getting good at shaders and learning shaders how they work what they do takes a lot of studying the colors you have to know the colors you have to know the RGB you have to know what brightness does to pixels and what brightness does to this color and that color and how colors work so you have to have knowledge of colors and how they affect and how pixels are going to affect the screen based on you know whatever the function may be that you're creating with the Shader right so it just takes a lot of practicing a lot of trial and error and kind of a little bit of knowing what you're doing right so it's I mean it's complex I I would have to say it is pretty complex for shaders they are going to get frustrating pretty quick what I recommend doing is asking for help if you need help ask for help with shaders because you could ask someone and they know what they're doing they could give you a point and then you ask someone else and they give you another point and you're like oh whoa and then you're going to get an idea and you can add those two ideas together and come up with something that's absolutely amazing but yeah my number one tip is just learn how they work trying to study the colors and what happens if this happens to the color and what happens if that happens what just what's going to happen with movement with variables and functions and and what like take things in I don't know take you can take physics equations right you can just like we did over here you can take physics equations and you can put them together and you can make something with a Shader right and that that's what's pretty cool about it and that's super cool but yeah I want to thank you so so much for watching I really do hope you were able to find something helpful within this tutorial and if you were then please let me know in the comments down below if you need any more help then please let me know in the comments down below if you didn't understand anything please let me know and I will be sure to get back to you but thank you so so much for watching and until next time subscribe drop a like push this video to more aspiring game developers so we can grow this good old community and learn to create games together it means the world and thank you so much good luck on your game Dev Journey wishing you the best of luck and be safe today thank you and bye-bye [Music]

Channel: DevWorm

Views: 3,021

Keywords: shaders, godot, godot 4, shader, how to use shaders in godot, godot shaders, how to use shaders in godot 4, how to create shader in godot, what are shaders used for in godot, beginner shader tutorial godot, shader basics godot, how to enhance game look with shaders in godot, tutorial, everything to know about shaders, how to use shaders, game dev, how to make my godot game look better, how to improve the look of my godot game

Id: BquGTgW7Te4

Length: 35min 39sec (2139 seconds)

Published: Fri Mar 01 2024