How to Create Shaders? | GameMaker Coaching

greetings and welcome to this webinar on shaders with me aaron craig and let's learn this together and yoyo games for game maker i am super excited if you know nothing about shaders or just a tiny little bit then this is going to be the perfect place to start we are going to introduce what shaders are how they kind of work the misnomer of the name of shaders because they actually do a whole lot more than just lighting in games and then how to actually implement them inside of game maker so it's not just going to be head knowledge we are going to tackle implementing a couple of shaders and how they work what's also really cool is i'm going to show you how to look at the shaders that game maker already has in place through filters find those for yourselves and then you can take them and cannibalize them for your own projects it's going to be really really cool but before we actually start with all of that i just want to show you some of the things that you can do with shaders so let me just make sure can you guys see my screen right now because i put up video for a second i'm hearing some of you can't see it but you can see my screen that i'm sharing excellent so here is a project which i'm going to have linked to that has 18 examples or like 15 to 16 examples of shaders that you can do so this is really really cool and available for you to download after this webinar so this is a magnifying glass a shader is a way to we'll get to that i just want to show you what they can do and then we'll dive into them so here's like a really cool magnifying glass and this project is so well built it's amazing you can actually go in and you can adjust all of the properties of each of these shaders and play with it and look at it i just want to show you some examples just to give you an idea of things that you can do with shaders so pretty much anything that goes on the screen you can write a shader to change and manipulate both the pixels and where the how the image displays itself so you can do simple manipulation you can do crazy crazy stuff uh to completely alter an image you can do something like a sin city effect where you highlight an individual color and this can all be done in real time with virtually no hit to the game's performance you can see here it actually has like the fps is what's happening and everything this is this is incredible stuff you can also do animated things so here is like an animated day night cycle now you write the shader and then you have to write a little bit of gml to make it like run over time based on the data in your game but this is just an example of something you can do like this you've got one set of graphics you apply a shader and then it does all this extra work for you it's just incredible like the world of shaders is so vast and so awesome that it's amazing that more people aren't into it but i'm also going to talk about why people aren't into it because it is kind of scary to get into the last really cool one i wanted to show you was this right here so you can like this one specifically i think just looks cool you can change the time so if you wanted to have like a really cool effect you can do something like that it's pretty neat this is all done with shaders you don't have to animate a sprite you don't have to play any animation you don't have to draw this find it it is all done dynamically and you can completely control it through shaders so this project will be available all the art everything is fairly well commented uh everything from the people is they got license in the notes and everything all the credits and all that stuff so it's really really cool but what i want to jump into first is what are shaders because a lot of people have no idea what they are so if we open up the manual and we just search for shaders game maker has a pretty good explanation of them and they also have a good uh introduction to them but i want to take it a little bit deeper and talk about that so if you look up shaders you've got this right here we actually want this link this guide to using shaders so let's talk about what a shader is and kind of how it works from a fundamental graphics level so a on your computer you've got things that are pixels that are making up your screen i think we're pretty familiar with pixels especially if you do pixel art but when it comes to game engine and rendering graphics on your screen we're actually taking what we call like a quad which is a kind of a yeah four points here makes up a cube or a rectangle or a square but those are actually made up of triangles which are then made up of vertices or verts so what a shader does is it breaks down an image or a sprite or a texture into triangles which in this case are two triangles which make a square the reason that you use triangles is kind of complex but essentially everything on your screen even 3d graphics are just triangles that are overlaid the reason for that is when you put three dots on a plane it makes a triangle and that's the simplest form of geometry that you can use to actually start doing stuff with because you can combine those into a quad and then into a cube and then you can create three dimensions if you wanted to that's beyond the scope of what we're talking about but essentially this is how it starts you've got a couple triangles which make a quad and this is what we would look at as like a vertex shader we're going to look at both of these options here but this is where it starts so it takes it from a texture page puts it into a quad and then it goes through and it reads and you can assign data to every single pixel inside of this so i really like this example that they've got here because this is pretty much how this works so we can go in and we can manipulate all of this so we can change where something is actually at inside of the texture we can move it around like swaying grass we can figure out what a color is we can grayscale it we can invert it we can do so many different things here with just doing this and the reason that it works so well is because it runs on the graphics card so most of the programming that you've done probably has been what we would call sequential programming where things run one at a time you use logic you can use if statements and it makes a lot of sense your computer figures it out so on and so forth and that's a very common form of programming probably the most common in the world but shaders aren't like that instead shaders are actually going to run on your graphics card and they are going to look at one thing which is one pixel and they are all going to run simultaneously so they have no clue about what's next to it what came before what's coming after they don't care they all run at the same time and that's why shader if you really want to get into shaders it really helps to know what we would linear algebra or just at least some math in there so this whole guide if you wanted to follow this will take you through creating this rainbow shader across this character and it can do this by using a bunch of math now we are not going to jump into this we're not even going to tackle something this complex because there's there's too much here already but the idea here is that you don't use a bunch of if statements uh let's see if i can zoom in a little bit like this code right here to create this rainbow effect it's not saying if the time is this and the pixel next to it is purple change the next pixel to the next color that makes sense instead it's doing things over time and speed and it's using a lot of different math functions inside of here and a lot of multiplication and you get something like this because the graphics card has to run all at the same time which is why it's so fast your graphics card can run millions of computations a second no problem your cpu on the other hand is a lot slower for things like ai and logic and doing things that actually take more thinking instead of just raw processing power to do simple things like put a pixel on the screen so that's why shader is a little more complicated because it's a different form of programming and a different way of thinking and the language we use is actually different as well so all of that being said let's actually jump into it a little bit and here is just a simple project that i've got so let me show you the setup because there's very little here if you want to follow along and do something on here so i have a sprite i have an object which has a create and a draw event and right now the draw event just holds draw self and then i have this object in my room so before we actually jump into the shader code itself i do want to show you that you've maybe used shaders already because of game maker's new filter and effect layer this right here is shaders and what's really cool is game maker actually opens it up for you so if you know where to look you can actually take their shaders so in this case if you go to your local drive under program data game maker studio cache runtimes choose a runtime bin filters and effects there's a that's a very long file but if you look it up you can find where this goes and this is actually the folder and project for every single one of the filters that they have right here and you can open this up so let's take a look at something like the let's go to grayscale if we open up this project it's actually a gamemaker project with the shader code inside that we can look at read copy and put into our own code so if you like one of the effects that game maker has you can actually just open it up so here's your project here's the shader and then this is the code for it like that's it you can take this out and apply it to your own and you'll be good it's really awesome now they have a few things in here that we're going to talk about but you can pass data into shaders to to change it based on game data and we're going to i'm going to show you how to do that but this is really cool and this gets down to the reason why i think shaders are so important even with this filters and effects layer which they're going to continue to expand and do some really cool stuff with like you can change the color and tint and you can also apply these to individual layers and you can control them through code so there's a ton of things you can do uh i think one of my favorite ones is like this distort right here you can have like a thanos snap over time make them disappear so you can control the amount over time and you can apply this to all of the objects in your game or just like a one or two of them if you wanted to it's really cool but when you boil it down all of these effects are just shaders that's all they are they are shaders that have been written for you with a gui attached to it which is really useful and great but that's all it is which means that if you can learn to understand shaders and you can learn how to write them and read them yourself you are no longer limited to this scale amount offset offset and distort texture you can do whatever you want you can make it look however you want there's no limit to it so even though we have this filters and effects layer and it might seem redundant to learn how to write them trust me when i say this list is so small compared to what you can do and this list is also determined by what they have put in here if you want something that isn't in here yet you're out of luck unless you know how to write it yourself so let's go ahead and jump into the basic syntax of shaders and then we'll do a little bit of q a so i'm going to close my room and go ahead and i have a couple extra shaders but we're going to delete those because we're going to make a new one so we're going to create a new shader and it opens it up and i'm going to say shader i'll just call this test i'm going to full screen this and press f12 to get rid of all those windows now this opens up like a script it's got code in it already and it's but it is different than anything we've used before for several different reasons which we're going to dive into first off this is the vertex shader so there are multiple kinds of shaders but in game maker right now we have access to two it is called the vertex shader and the fragment shader these two work together and each of them can do similar things but each of them also has their own strengths a vertex shader is actually putting your texture where it's supposed to be so if we wanted to create something like a wavy grass effect and we wanted to actually manipulate where the pixels are at in the vertex or in the texture the vertex shader is where you do that it's a little more complicated and uses like matrix matrices and matrix math we're not going to touch that today most shaders that you are going to encounter are actually fragment shaders so there's two windows up here we want to be on the fragment shader side so we have not near as much which is nice so the first thing to know is that fragment shaders are or the shaders in general use a different syntax so if we go back and look at this because i want to make sure i say it correctly shaders are let's go back for a second here we go so we are using glsl es 1.0 as the basic so this is like a open shader language that is fairly common when you start getting into shaders but the thing is that it's not gml anymore none of these are gml there are some functions that we have access to that you'll be familiar with there's some logic like if and for and while loops and things like that but for the most part this is this is very very different and you've got to approach it differently because if you come into a shader and you want to you and you're thinking normally and you wanted to use a function like point direction well that doesn't exist if you wanted to create a variable like health equals one well this is just gonna crash completely because you're not obeying the rules of this syntax so let's go over what those rules are first off you have to specify data types now you are familiar with data types even if you don't know it in game maker anytime you make a variable like name and we set this equal to a string this is what's called a string it holds characters and that's what it does but the thing is we didn't tell that this variable was going to be a string gamemaker's just like hey you made a variable you happened to put some characters in it cool it is now a string but at any time later in our game we could easily go hey my name is now 100 because i like numbers game maker is like cool no problem in a lot of other coding languages which are stricter this is this is not allowed in the slightest you have to say this is going gonna be a string you have to set it to a string and then you can never do anything with it that is not string related unless you do something called casting which again beyond the scope of what we're talking about but all that to say is you actually have to say what kind of data type this is so the most common data type you're going to be working with are floats which is a floating point number so let's say we had health in here this is a floating point number it has a decimal and then a value after it so this can go pretty big depending on the size of the float that you want but in writing shader language you are pretty much always using floats and decimals so unless you actually say it's an integer which is actually really uncommon you need to use a dot and something after it otherwise the game is not going to compile so if i took out this dot and i just said it was a 1 and we press f5 to try to compile this you're going to get an error and the other thing that makes shaders really difficult is that they're not useful errors so it's kind of hard to see because it's small but all this says is that fragment shader shade test at line 8 and it has an equal sign and it says string not found at line one and now we're getting all sorts of different errors so it says there's an error line eight there's nothing on line eight the issue is this is not an actual floating point number if i do that and i compile now we're good so when you get into i'm going to go in also and take that effects layer out so when you start getting into shaders they're intimidating because they have much stricter syntax you have to obey you have to follow their rules and if you don't you're going to get a list of errors a mile long that are completely useless to you even when you start becoming familiar with writing shaders so you have to give it a data type you must use decimals when pretty much everywhere that you're going to be using them and you have to use a semicolon same thing here if we leave out a semicolon like some of you might do when you're coding because game maker doesn't care well now we have a new error but this one says it's at line 10 and it doesn't even say what the error is so data type you have to use a decimal you have to have a semicolon float is probably the most common but you're also going to access things like vec2 vec3 and vec4 vec stands for vector a vector just means it has kind of like an array it has multiple properties so if i say vect2 you can imagine that it's got something like this now this won't work because we have to do it a different way and we have to actually give it uh i don't know we have to give it a name this variable here date has two values basically like this date and then date one now we don't actually access it like this i'm just showing this to visually represent it for you so we've got a variable with two values that looks like this but in shader language where if we wanted to access that there are a couple different ways but we would essentially be using r g b and a so depending on what what kind of data type we've got here r is the first one so r in this case would be two [Music] g would be three and then in this specific case we wouldn't actually have any more so we would just say something like date.r and if we wanted the second one we could use date dot yeah g so if you're familiar with rgba it's red green blue and alpha and if we look up here we have something called color and this is actually holding the red green blue and alpha of every single pixel that it finds inside of our shader so we've got vectors floats and different ways to access them so if we wanted to actually create this vec2 this won't work we have to say vec2 and then we're initializing and then we can actually pass these values in so this if we run would actually compile no problem and this is might look kind of foreign to you and i get that this is a different way of coding it's not gml and it's kind of confusing but you have to use their data types and this is how you do it so same thing goes here so if we had a vec3 you'd have to initialize like this but you'd pass in three values instead of just two the numbers here tell you how many and for something like color you're using rgba and you access those in that order now this is a lot of heady information we haven't actually started doing anything yet but i just need to get you familiar with it because if you don't understand how to write it as soon as you go to do anything it won't work it'll just get a compile time error so let's stop right here and let's jump over to the q a and let's see if there's any questions that is going on so i'll go through the questions that we've got if you have any questions just post them right now put a question mark at the end and i'll be able to see them so let me make sure that we've got here so first question comes from john is each pixel in the fragment shader assigned to a core thread in the gpu for manipulation so you're talking about multi-threading coding and as far as i'm aware well i do not know how to assign a specific pixel to a core or thread in the gpu i will say that it is multi-threaded because it's all running at the same time but i'll let gopreet do some research and see if he can answer that more specifically i know in multithreading in some lower level languages you can actually assign a specific task to a core and then see when it's done in this case we're just telling it to go off and the graphics card takes it and it works in whatever order that it goes through fajid asks what is the default code it didn't say vect2 vector had something else behind it so you're talking like back so there's two shaders we've got uh the vertex shader and the fragment over here this is a qualifier called varying which means that it's being passed from the vertex shader over to the fragment shader because these are different things we'll also come across something called uniform which is how we pass data from our game into the shader so varying and attribute these are attributes or qualifiers for these and varying specifically means it's going it's being shared between the two shaders cody says will we go over how to apply the shaders to individual objects layers or everything yes i'm going to show you how to actually apply a shader and what's really cool is when you take a shader you choose where to apply it so you can put it on an individual sprite you could apply it to the application surface you can apply it to whatever you want so the shaders you write can go anywhere they can also go on vertex buffers which is a whole different webinar but yeah there's a lot you can do there gershon asks does this work in javascript so what i will say is shaders uh there's different kinds but the most popular one is called opengl it's a way that graphics card makers allow programmers to interface with it and it's a standard language and you can use opengl syntax in almost anywhere that uses a graphics card so if you're working in javascript and you want to write some shaders for something yes you can absolutely do that if you go out to i think it's shader toy and look that up they have some incredible shaders and effects that are just running in the web browser no problem because it's open and it's anyone can do it michael asks is it true that loops can't be made of dynamic uniform parameters they need to have a fixed length slash iterations wow michael that is a very interesting question and one that goes beyond the scope of my knowledge here what i will say is i know you can do while loops and for loops i have not seen anything that says you have to have a fixed length or use iterations specifically coming from uniform parameters but because it's a graphics card and it's a shader i i imagine you well no you probably can i i don't know if there's a limit so i'm going to pass that off to guprie and kinga as well is there a limit on how much of a loop you can do on a uniform that you pass in that's a very good question bobby asks what is the difference between vec one vec2 and how do the two vectors interact visually so i'm going to be showing you that here once we actually apply a shader to our game we're going to be going through i'm going to show you how to do a simple gray scale and how to actually do some math inside of that but the answer would be avec 1 is actually just a float because it's a single number a vect 2 then allows you to you can do what we would call matrix multiplication so if you've ever done that before you've basically got a column or row depending on how you want to visualize it and you would multiply those together so the order you multiply them in is important because if you multiply the first row by the second row and then change columns it does give you different results but i'm going to show you that visually in just a little bit so we'll get to that emma asks are shaders like the ones you showed us in the ide going to be much on integrated graphics so that is a really good question so if you're targeting an integrated laughing graphics card like a laptop or a phone from my understanding those are actually still incredibly powerful like even if you went back five six years you would probably be able to run any of the shaders that are running now totally fine and that's because a graphics card is just great at doing brute force tasks they can do the same thing millions of times a second and they're really really fast at it so if you write shaders for integrated graphics or you're running them on integrated graphics you'll be totally fine franco asks are there different float precisions in glsl yes there are there are three different precisions that you can jump into i don't know the default precision that is set but you can specify low medium and high which gets you to huge huge numbers uh and yeah that's probably that's really all i'll say about that w asks how do we use sampler2d to pass in texture info sampler2d is something i am not familiar with uh texture2d is something here let me sampler 2d i have not used this yet so i'm going to let gopri or kinga answer that for you i am not yet familiar with sampler2d and exactly how that works wilden asks is there any difference between using rgba or xyzw is there any tip on when to use one of those so the standard is when you're using colors you use rgba when you're using coordinates you use x y z and w and there's even another one but the thing is i didn't want to mention it because technically they're they're actually doing the exact same thing it just makes reading it significantly easier when you use the correct ones like if you're trying to move uh uh your move your sprite or your texture around in the world but you're using rgba and you're reading it you're like wait why am i affecting the color of this when i want it to move they're doing the same thing they're the same they're the same constants they just have different names and i just didn't want to bring that up which is why i didn't but use the one that you're using for the one you're using rgba for colors x y w for coordinates now there's still a lot of questions here and i don't think i'm going to be able to hit them all so i'm going to go through read them really quickly and see if there's anything that we need to do it looks like they're answering some of those themselves which is awesome uh one important question is michael asks if you initialize a variable with vect two three or four do the values have to be floats and yes there is such a thing as i vec which would be an integer vector otherwise yes assume that everything is a float otherwise you will have issues okay michael asks can the main run for each pixel so you can afford the result uh from my understanding this is not how it works it is not sequential so it doesn't look at what happens to the next one it all runs simultaneously that's the whole point of a shader and using your graphics card is that it runs so fast so you can't take the information from one and go to the next with it it's not like an if statement or it's not like it's running in line through that so that would not work so i'm going to go ahead and end the q a there and i'm going to jump into how to actually use these shaders in game maker because i think that is what we all came here for so i'm going to close the q a for now we'll hit that back up i'll put my screen back up here and let's go ahead and look at how to do this so we've created the shader already right there shd underscore test now let's go into our object and in the draw event is where it's going to take place so drawing anytime you're going to draw something like yourself the application surface another sprite this is where you would actually apply the shader and using the shader in gml language is actually pretty easy the first function is called shader underscore set and then you pass in the shader in this case shade test so this is how you run a shader if i press f5 right now then we're good this is the shader that we have created right now there is nothing on there because we have created the most basic shader that you can which is doing nothing all it's taking is what was there and putting it onto the screen but we can start manipulating this which is awesome so first thing to note is this line right here this gl frag color is what is eventually drawn to the screen and this line is doing it's taking the vv color which is a vector4 and it's multiplying it by texture 2d so what this does is it gets the correct pixel for the correct spot and then it puts it there so what i'm going to do is actually say create our own variable here well well actually we're going to take this we're going to say vec4 so this is going to have four different parts to it we're going to call this my color and we're going to set it equal to this whole section right here so i'm going to cut that paste it so what i'm doing right now is i am copying the original pixel this is what the original pixel is just as it would be displayed on the screen if i come down a little bit and i say display this now we're going to have the exact same thing nothing is going to happen so voila but now we have this in between section where we can do something let's say we wanted to just take everything here and say my color and we want every single pixel's r value which is the red value and just in case you're not familiar with like rgba let me bring up this sprite really quick as a visual representation so like if i wanted a specific color i can actually use this dropper i can click on this and i can double click here's your red green blue and alpha alpha is for transparency red green blue determines how much of one color goes in one spot and then you combine those all together and that's where you have a color so in our shader here if i wanted to turn every single red into full red because one thing we haven't really discussed yet is how shaders normalize colors normally you go from 0 to 255 but in shader language it's from 0 to 1. so if i turn every single pixel pixel's red into one there we go now it's very very red and you can do the same thing on g so i turn it green this is just super simple coloration it's not even very pretty or very useful but it does show you how to start actually manipulating this shader so you have rg b and a that you can affect so if you wanted to make it like invisible we could turn the alpha all the way down to zero and now there's nothing there so we have the color of the original pixel in my color and then we can access it over and over so we have simple color manipulation now something that we can do is also pass in information from gml we do that with what's called a uniform so varying up here is passing it from this shader to this shader uniform allows us to pass it from game maker into the shader language so we need to specify the type that it is so we have a uniform and then we say float and we're just going to put mouse what's pretty cool is you can just create it like this you don't have to set it or give it any value just yet because we're actually going to pass in that value so here's the mouse and what i'm going to do is i'm going to set my color dot r so we'll just play with r red again equal to mouse so this is going to be the mouse value for what we're doing right here so i'm going to go ahead and go back to our workspace and open up our object so our object knight here we have two things we need to do the first one is we need to get access to that uniform and there is a function for that it's called shader get uniform and we call this in the create event because we only ever need to do this one time so we need to get the shader so first we pass in where it's coming from which is shader test and then we need the uniform name now game maker doesn't communicate with shaders like an object to another object you can't just access a variable in there game maker has no idea what's in a shader or what isn't so we have to take this i'm going to go ahead and copy it because we have to say in quotes as a string this is the uniform variable i want to access so this is the shader this is what it's called and then we need to say uh we'll just call it mouse so this returns the handle that we are going to use to then pass information to the shader so mouse equals shader get uniform from shader and this is the name of it if you type this wrong you're going to have issues so make sure you copy and paste it if it's more complicated than something like this now we have access to it let's go to the draw event and before we draw what we want we want to pass in uniform info the way we do that is called shader set uniform and then we have to tell it what kind so there's uniform f i and matrix and then array forms of each of those in this case we have called this a float now vectors are just floats with multiple values and so if you were to create a vector variable you would use the same one because you can actually pass in multiple values here so i want to pass in a value for mouse and then you can see it has a value and you can actually do as many as you want in this case our variable is just one value it's just one float and we're going to pass in our mouse x divided by room width this is just a simple division a simple math statement that's just going to give us a value from 0 to 1 because that's what colors are in game maker so with this we are now altering the effect of the red pixels in our sprite based on our mouse moving so you can see that as i go from right to left it gets less and less red because it takes it all out as it goes left to right it increases red so we can pass in any information we want right here such as time health play time characters anything you want it's got to be in floats integers or vectors but we can pass that information in which means that we could make this thing flash red over and over again if we wanted to we can make it change based on the time of day in our game for a day night cycle you can do so much here with uniforms you create it you save it and then you set it now i want to show you at least one semi-useful piece of shader here and it's going to come from not there i think oh i lost it let me bring it back up so it's gmshaders.com here it is this is a great little website written by zor xor he's on twitter he's a shader wizard is what we call him and he's got some examples inside of here of how to use some shaders but also how they work so this is great if you want to do a deeper dive into shaders what i want to do right now is jump over to some of his examples so he's got something here about inverting colors which is kind of cool but then he also has like a grayscale option here now if you want to throw one of these inside of here you absolutely can you've got shaders for changing lots of different colors these are just super simple things and you can use them what i want to do is implement a grayscale shader so his example here is taking your texture that you've got and it's multiplying by a specific amount so what it's doing what it's actually doing is setting it up so it's just all the way around it's changing the color to a gray but it's doing it based on how luminescent that color was before because when we look at grays if we're if we like color blind or weird black and white video colors are different levels of gray based on how bright or dark they are and that's what this is actually doing so when i look at this i now remember that we want to do something like this but the the issue is he's using a text here and i'm not actually sure exactly where he gets this text from like reading through this i couldn't find it so this is a really great example of what we want to do but the other one is davetech so davetech this is the other place where you can learn about some shaders he's got some shaders on grayscaling here which is what i want to grab for you so if you are going through and you're finding a shader or you're asking questions about it it might be really confusing to actually implement it because what's going to happen is someone's going to be like hey how do i do x y or z with a shader and they're going to be like hey here's the code go ahead and use it but you have to understand that it's not just as simple as copying and pasting that code first off you have to know where it goes so there's the vertex shader and the fragment shader which one are you talking about are you using uniforms and all of those other things and then how do you actually apply the shader if you've never used it before you don't know so here's an example of finding a shader and just throwing it in your game and how to do that so he's got an article on how to grayscale things correctly he's got several different examples here and then he's got some code examples so this is the code he's got but without context it can be really confusing on where to even start so what i'm going to do is take this code and i'm going to copy it because we are altering pixels it's going to be a fragment shader if we were doing something uh with actually changing where where the pixels are being drawn at that's going to be a vertex shader most likely but what we're going to do is go into the fragment shader and i'm going to go ahead and comment this section out and then i'm going to paste his code inside of here and tab this to be correct so first thing that he does is create a vector4 now we've already talked about these it has four values it's a color because he's named it this color and he's just copying it from what the same thing that we did originally this gets the color correctly of every single picture that pixel that's there on your sprite and then he's creating a float called new color and he's doing dot multiplication so this is how you can multiply many things against many other things so he's grabbing the three values the rgb values of this color and he's multiplying it by this vector three so this is how you can take that math multiply one column against another and then it saves it as one number right here so what it's doing is it's taking all three values multiplying them and getting the correct gray scale on that and then he's setting it right here so you're setting it as a vector four because that's what gl frag color is so like back over here like the original setting of gl frag color was this line which is a vector four so anytime you set gl frag color in the end it's got to be a vector for in this case it's new color which is gray new color which is the gray you got and the new color so whatever that was before that's what it is now it's now a gray and then he's setting the transparency of every single one of those pixels to one now this is going to cause an issue but i'm going to show you why and how to fix that so here is our grayscale you can see the sprite itself is gray and it looks really really good but we have this weird black box around it and that's because that black box is actually from the texture page that this sprite is stored on so that's no good but what we can do is instead of setting every single pixel to a transparency of one which is what's the problem is because it's taking transparent pixels in our sprite so all in this this whole sprite all of this is transparent around it but that that shader we just created says take every single pixel and set it to one whereas before it was zero all the ones around it are now one that's the problem that we've got so we don't want to just blast a full one to all of these instead let's return it to what it was originally which is this color and its original alpha and if we run that now it gets rid of that black box so that's a simple grayscale shader and you can affect this with uniforms you can change up these values over here and this is just the simplest way to use shaders in gamemaker like i said at the beginning this really isn't even scratching the surface this is this is just equipping you with the tools to get in and start diving in uh there's there's so much here and that someone in the chat is already pointing out uh they're encountering errors that make no sense to them and the problem is that it's it's hard because if you make one tiny mistake like leaving out this semicolon you get a string of errors that are going to make no sense to you if you make any mistake anywhere you're gonna have a problem but dive in take your time ask questions and just realize that this is learning an entirely new coding language it's not gml like that's probably my biggest mistake when i started was oh shaders are cool they're just complex gml but it isn't it's a totally new syntax you have to take the time to actually learn how it works and you have to take the time to learn why it doesn't work in certain situations okay let's go back and do some q a because i'm guessing there are some people that really want to know some more stuff so let's jump over to q a and if you have any questions let's go ahead and jump into those someone is working on debugging their code and they ask why is their code wrong i i don't know i'm trying to find it but i don't know if i can do any debugging of your code right here what i will tell you is that it's hard takes a lot of time and it can be very frustrating so copy as best you can download finished projects compare those to yours if you're having any issues or struggling like that it helps a lot so but let's go through and ask and look at some of these questions right here so first question that's not a question at all [Music] okay cliff asks can i do a tutorial on how to broadcast a webinar i don't think you want me doing a tutorial on how to broadcast a webinar because i have a big problem with it but sure i think that's a great idea fajit asks how do i add fragment shader so that's when you create a shader by default or every time you create a shader you create a vertex shader and a fragment shader these two things are intrinsically linked uh you are creating a fragment shader when you make one if you want to use just a fragment shader all you do is just leave the vertex shader alone it's just going to put things where they belong and then if you want to use just fragment shader logic go into the fragment shader and use it there that's how that works you can't just use one you're always using both what are all the primitive values values you can use in a shader float int vec etc so that's a really good question and if we go to the gmshaders.com he's actually got this entire thing listed out so essentially you can use floats integers booleans and then vectors so vect 2 3 and 4 and you can create integer vectors as you want then you can also create matrices so matrix 2 3 and then those are those are the very those are the data types that you can use uh and then you also have things like you can create structs if you want you can create arrays as well and then you have oh someone did ask earlier about precision qualifiers so you can do precision high and low those are things that you can also change and then you also have things like constants as well that are inside of there next question comes from cody what exactly does the texture 2d function do or return and why multiply it with color so texture 2d is mapping out the text that get the the pixels that it gets from the texture page so not to spend too much time on it because it's it's an in-depth question uh when you go to tools and texture groups you can actually look at the textures from here and game maker creates a texture page and what the shader has to do is figure out where exactly that is in the texture page so these ones here like let me see if i can bring this up to show you a really good example because this is a great question so a texture page can have a lot of different assets inside of it it's not just one sprite at a time so if i load up that original project that i showed you and by the way if you're looking for that original project that i showed you it is we'll see if we can have a link to it in the video on demand version but it's also from gaming reverend's dev corner so he's got a really fantastic series going through this and in the description he has the um project available to download with the entire thing which is just incredible so look up his stuff and you can find that project right here but if we go to game options windows and we go to images or go to graphics we can actually preview a texture page now this texture page is pretty large and depending on how many sprites you have in your game it's going to take a while for it to bring up but here is an example texture page so what we're doing in the shader is we have to actually figure out exactly what we're grabbing so if we want to texture this sign we have to know that it's around here and then where exactly it's at in there and so that's what it's doing is it's mapping the color that it gets from here onto the texture it's actually pulling from that texture page if i am understanding that correctly gupri can probably correct me if that's wrong but that's why you have to multiply this if you don't multiply this at all then it's just going to change your entire thing so let's say if we just set gl frag color to v color and we didn't multiply this at all what it's going to do is just set it to just one single box so it doesn't know which one is which it doesn't know what's happening it just sets every single pixel inside of that to the color that it has so that's why you've got to have that so there's a lot of other questions here i don't know if we're going to have time to go through it because we had a little bit of a tech difficulty there but let me see if i can look over any ones that i think would be really really useful so tevin asks can shaders be triggered by an event shaders are just a way to change what's being drawn on the screen so in gml you control when they happen so yes you can absolutely trigger by an event if you wanted to have a collision event that when it's colliding you then draw the shader absolutely the shader itself doesn't know it can't really know and it doesn't care about what's happening inside of your game we call it blind because it's just doing what it's told it has no real logic beyond do this here this many times and that's it so if you want to trigger a shader that's all going to be in gml so we've also got jen's asks any good books on the topic there are some really good books on the topic there are also some really great online communities and playgrounds out there so one of the really really good ones that i have found uh so if we look up shader toy this is not exactly for game maker specifically there is a game maker book out there i don't know how relevant it is it might be kind of old although shader's language really hasn't changed so if you find a game maker shader book you should be totally fine this is a website that you can just look around and experience shaders it is not game maker shader specifically so you can't just take these and plug them into your game but they give you an idea about the things that you can kind of do with shaders it's really really cool so any book you find should be pretty relevant to the case because shader language has not changed in quite a while and i see some other very specific questions there but i think we're going to end it right here because you guys have been fabulous and i really appreciate it so thank you very much for your time thank you very much for attending it's been really really awesome let me see if i can bring myself back here yeah so thank you guys so much you have been you've been really awesome and very patient with those technical difficulties although i will say you guys were probably the funniest during that time that was fantastic so thank you for joining uh this will be available i think unless it was so butchered because those technical difficulties but it should be available on youtube here in the next week or two and if you have any more questions what we've done in the past is we've had some of our experts go through and then do a follow-up video on those questions so if you asked a question and i didn't get to it then definitely take the time to look that up because you might just see the answer coming out from yoyo answering those questions in a really informative video but that's all i've got for you today thank you so much for joining me thank you for bearing with me through this i had a great time and i hope you learned a little bit about shaders and to be able to get started with it even though it can be a little intimidating until next time keep making keep learning and i'll talk to you later

Channel: GameMaker

Views: 10,065

Keywords: Games, YoYo Games, GameMaker, Game Maker Studio, GameMaker Studio, game, maker, GameMaker Studio 2, IndieDev, GameDev, Indie, shaders, vertex shader, fragment shader, effect, filters, glsl, opengl, graphics, gpu

Id: 9c9xilt1q3k

Length: 58min 57sec (3537 seconds)

Published: Mon Jun 06 2022