Shaders in GameMaker Studio 2 - Tutorial for Beginners

area in this tutorial we will be learning about shaders in game maker shaders can be used to modify the look of a sprite so let's see how we can make our own shader so here I had this basically empty project with only one object so we're going to create a shader and apply it to this object so here we have the object before doing anything in it I'm gonna go to shaders right-click and select create area so here we have our 4 shader it is called shared a 0 now in your workspace you're gonna see two scripts of an app of course they are not GMO scripts they're GLSL shaders now the VSH file is the vertex shader and the FSH file is a fragment shader now the vertex shader is what manages the geometry of everything that is drawn and the fragment shader is what reads the image data from the texture pages and draws it on the screen so in this tutorial we're only gonna focus on the fragment shader you can do terms with the fragment shader without even touching them or actuator now let's go into the object and apply the shader here I'm gonna add the draw event now here you can draw the instance using draw cells now we can apply the shade to district all so we can do that using the shaders hat function then we can specify the shader we want to use then after drawing the instance we need to reset the shader we can do that with shader reset so that's basically how you use a shader now I'm gonna run the game you can see that nothing has changed that's because we are using the default shader so if we now modify the shader the changes should show up here so I'll close it I'll open the shader now let me explain how the fragment shader works at the top we have to varying variables using varying variables the vertex shader was info to the fragment shader this one is the position of the current pixel on the texture page and this one stores the blend color and alpha of the instance now here we have their data types they're both vectors where this one is elected to and this one is a vector for now a vector is basically a group of variables so a vector two or rec two has two variables inside it X&Y v-tex code has a position of the pixel so that works now a work for has four variables inside it since this stores the color and the Alpha those four values would be our G B and a so we have red blue and green for the color and a for the Alpha the color here is from the image blend variable from the instance and the Alpha is from the image alpha variable now here we have the main function of the fragment shader this function runs for each pixel of the image no this is a part where it takes a pixel info from the texture page and outputs it GL frag color is a whack for destroys the final color and alpha of the pixel now here we have a function called texture 2d - but gets the color of the pixel from the texture page so here we have the current texture page and here we have the position of the current pixel on this texture page so the function finds the pixel on the texture page and returns is color value so it gets a web fall with the RGB values then that vector is multiplied with the V color so that's how the blend color and alpha often strands affect the sprite the result is then applied to GL frac color so that's basically how a shader works now we can also modify GL for a color manually so we can create our own breakfall and apply there to GL for a color as an example I'll add this inside the function now I'm gonna create a new web for now we need to fill out the RGB values colors and shaders are always in the zero to one range so for the Reds I'm gonna enter one for green and blue I'm gonna enter zero and for the alpha or lancha one so now we are setting every pixel of the image to the same color even the transparent pixels should be visible since we are setting the Alpha to one so I'll run the game and the image should be completely red and there we go the whole area affected by the shader has turned red now I'll go back into the shader and set the green value to one so now the image should be yellow and it is yellow because when you mix red and green you got yellow now you can also modify specific color values so I'll remove this line and add this instead now here I am only modifying the rad value of the pixels color so I set it to zero so we are basically removing all the red from the image so now let's run the game and see what happens and here we have a compile error in the fragment shader so let's see why we are getting this error now the reason why we got an error is because of this zero this is an integer and this is a float integers are basically whole numbers so there are 0 1 2 3 and so on but floors on the other hand are decimal values so if you try to set a float to an integer it's not gonna work so we can make it a decimal value and it should work so I'll run the game and now there should be no errors and now you can see that the image appears all blue that's because all the rad from the sprite has been removed now you can also modify multiple values in Elektra advanced so I'll remove this line and add this now here I'm morally modifying the r g and b values of the pixel so since we are only modifying three values we need to apply a vector3 so now we could create a new vector3 but we are going to do something else I'm gonna take the V color vector and take its RGB values so now the blend color of the in stars will override the color of the texture but the Alpha will stray untouched so I'm gonna go into the object and add the create event here we can change the blend color of the in stars so I'm gonna change it to red and if I run the game now the color of the image should be red and it is red because we're using the color of the in stars now I'm gonna close the game and remove this line now let's learn about uniforms using uniforms you can pass some data from GML into your shader so you could make a variable in an object and pass the value of that variable into a shader so as an example I'm gonna create a uniform so I'm gonna come here and begin by diving uniform and then we need to specify the data type so we're gonna make a float and then the name of the uniform would be add so the value of this uniform will be added to the RGB values of the image so I'm gonna erase this line and now add this I'll type plus equals to add something to the RGB values and now I'll create a new vector3 in the brackets I'll only type add so all three values in the vector will be add they'll then be added to the RGB of the final pixel so now we know what this uniform is gonna do but we're not passing a value into it so for that we're gonna go into the object here I'm gonna create a variable for the value of the add uniform now this variable is separate from the shader uniform so their names don't have to be the same and now we need to get the ID of the uniform so we'll be able to set the value of the uniform through this ID and to get the ID of the uniform we can use this function now the first argument in this function will be the shader and then we add the name of the uniform and now we need to set the value of the uniform and we'll do that in the draw event so after shader that I'll use this function now for the first argument we have the ID of the uniform and then we have the value that we are passing into it so now let's run the game and see what happens now you can see that the image is a bit lighter since we're adding 0.2 to the color values now the add value is controlled from the object so we can have some fun with it so for that I'm gonna go into the object and add the step event here we're gonna make the add value dependent on the x position of the mouse the mouse X will be divided by the room width and result will be applied to the ad variable so we get a value between 0 & 1 so now let's run the game and test it out now as I move my mouse closer to the room with the image gets lighter that's all because of the add value so this is only an example of how shaders can be controlled through GML by making use of uniforms so as another example let's make this shader so I'm gonna go into the shader and remove this line now at the top I'm gonna create another uniform it'll be a float called time through this uniform we're gonna pass a time value to the shader that's how we'll be able to animate the effects over time now so far you know that shaders use RGB for their colors so you have red green and blue that make up the final color but for this effect we need to use a TAS V so you have you saturation and value and we're gonna apply the time uniform to the U then we're gonna use a function to convert at just V to RGB so I found this function online and I'm gonna link it in the description it's called HSV to RGB and it simply converse and HSV color to an RGB color so I'm gonna page the HSV to our DB function above my main function not below it but only above it now the function only takes one argument which is a vector3 so we need to pass in the HSV color as a vector3 now I'm gonna go into the main function and make the effect again I'll be modifying G africanus RGB for the RGB around the HSV to RGB function then in the argument I'll create a vector 3 for the HSV color so the U will be time and the saturation and value will be 1 so the you will simply change beds on the time now we need to pass the time value into the uniform so I'm gonna go into the object and open the create event here we get the ID of the time uniform then Alok on the drive and to set the value of the uniform so I'll enter the function with the ID of the uniform now for the time value I'm gonna use the current time variable this variable stores the amount of time passed since the game was started in milliseconds and because it's in milliseconds it's gonna be a large value so to make it smaller I'm gonna divide it by 2,000 so now this value will be passed into the shader as a time value so let's run the game and test it out and the effect is working the time keeps increasing and that affects the hue of the image true recall we made the color in HSV and then converted it into RGB for the shader so that's pretty much it let me know if you'd like more videos about shaders you can check out my other tutorials here and here my udemy courses so make sure you subscribe for more and I'll see you in the next one

Channel: GameMakerStation - Matharoo

Views: 16,153

Keywords: gms, gamemaker, gamemaker studio, gamemaker studio 2, game maker 2, gamemaker 2, gm2, gm 2, gms 2, gms2, tutorial, how, to, shader, shaders, shading, color, change, colors, flash, rainbow, effect

Id: mVao4aP0Hg0

Length: 12min 44sec (764 seconds)

Published: Fri Nov 15 2019