Getting Started With Shaders - GameMaker Tutorial

towards the end of the 19th century people started to think that our understanding of physics was getting close to complete we'd figured out Newtonian motion we understood things like thermodynamics and fluid dynamics and some physicists started to think that soon a complete picture of the universe would be within our grasp the 20th century approached things started to get weird radio waves are first discovered in 1887 followed by a cascade of other radio activity related discoveries in the years that followed and among other things there was that pesky double slit experiment which had been a bit of an enigma for almost a hundred years now if you don't know what that experiment is go look it up after this video it's fascinating and then finally 1905 happened that was the year the Swiss patent clerk named Albert Einstein shows up and drops the bomb or at least planted the seeds for one in more ways than one with his little theory which you may have heard of called special relativity and then as if that wasn't bad enough he went and did it again a few years later with general relativity and without you can go and kiss your perfect Newtonian universe goodbye ever since then physics as we know it has never been the same so why don't I tell that story well one because it's cool and two because that's the best way that I can describe the reality breaking epiphany that I had when I learned about the wonderful world of shader programming for the first time so judging by some of the conversations I've had in past video comments some of my regular viewers know a lot about shaders some of my regular viewers have heard of shaders maybe know what they are what they do but haven't really taken a deep dive into them and a couple of people just haven't heard of shaders at all that's okay I'm going to make a bunch of videos on these because there's a lot to do and I'm going to start out with the basics and then we'll see where to go from there I'm going to issue a similar disclaimer here as I did at the beginning of my getting started with 3d video there's not going to be anything specifically 3d about this video I'm just going to be covering basic stuff that you can use in any game 2d or 3d in the name of this video not being like three hours long I'm going to account on everybody watching this to have a decent understanding of both computer science and mathematics remember shaders are things that most game engines would allow you to not have to deal with it all unless you really want to get your hands dirty this is we're ever going to get into the really low levels of how computers take a bunch of data and turn it into something that you can see on the screen let's go so all the code that you write in GML is what one might call CPU code it's either interpreted by the game maker virtual machine or compiled by the yo-yo compiler into machine code and when the user runs it when the player runs it runs on the CPU the CPU is what carries out the instructions there's also another well-known unit in the computer known as the GPU the graphics processing unit or video card if you want to call it that and shaders are commonly described as the equivalent programs that run on the graphics card they influence how things look on your game sometimes in small ways sometimes in big ways you can use them for things like image processing so if you imagine a Photoshop filter running on your game in real time you can use them for things like color correction so perhaps you want an enemy to flash red when you hit them or something you can use them for lighting effects and since I like to make tutorial videos on 3d stuff that was the the original motivation for me to make a miniature series on shaders in the first place you can use them for efficient bone based animation I've got a friend's hero a shader that will place snow on the top side of a rock or a tree or any other object in 3d space regardless of how its rotated and I'm going to ask him if he can record a short video demo of that so that I can use it in this video because I think it was like really cool to see in real time so we've got to start somewhere and I'm going to start here I know I'm a fan of 3d and I know that this series is probably going to be mostly 3d oriented but I'm going to start with this it's just a background of sky texture and a duckling sprite oh there's nothing super special about this right now it is just a room and the room itself is small it's 160 by 90 pixels and it's scaled up I think four times I think it's scaled up to 1280 by 720 the reason for that is just so that you can you can see a bigger image you can see a blown-up version a scaled up version of the duckling so that you can see what's going on a little bit better if you're following along let me actually uh let me actually source control hang on okay this is all on the base project branch in the in the source control repository down on the video description if you want to start out with that you can clone that branch instead of the master one so let's go back here to drawing so this is just you've seen this before this is jaspera if you've ever done anything in gaming before you've probably seen draw sprite now whether you're aware of it or not everything that you try to put on the screen is run through a shader game maker has a game maker has a shade of running by default it will handle some things like built-in lighting and alpha testing and some other things in a lot of cases that's fine you can make a perfectly good game without having to mess around with shaders at all but when you start doing things like advanced graphical effects it becomes time to go a little bit deeper than that so I'm going to go to I'm going to go I will create a new shader I am doing this in game major studio 2.2 that is currently the stable release of game maker you can do this in 2.3 as well hey you can do this in game maker studio one as well I want to say shader support was added in version of 1.2 anyway I'm just going to call this shader I guess I'll call it shader demo because I call everything demo and let me make this silent let me make this code a little bit bigger I'll maximize the code window because I'm this is the only window I'm going to be working in right now and let's go and say shader set shader demo and when I'm done drawing a shader reset so shader set shader reset those as the name implies are the functions that are used to set the shader that things are drawn with as you can imagine everything drawn after shader set is called and before shader reset is called is drawn using the the straighter specified so let's open this and I'm going to split this into two columns so that I can have these open side by side let me get rid of that because I don't need it anymore and when you open a shader for the first time you're going to see a few things there's the vertex shader which looks like this and there's the fragment shader which looks like this so there are a couple different types of shaders the vertex and fragment shaders are the ones that are used in game maker other types exist like compute shaders or geometry shaders and I really wish game maker would give us geometry shaders at some points in the future but I don't think that's gonna happen any day soon and I'm going to stop myself before I go off on another and so the vertex shader is processed first and it takes care of every single vertex that is drawn so everything that you try to draw it in a computer is made of triangles as it probably aware about a month ago the Unreal Engine 5 demo was unveiled and they went on and on and on about the unprecedented triangle counts and all that the short explanation for that is that the triangle is simply the the simplest geometric shape that any other shape can be subdivided into if you have a square like a sprite or a character and a font you can divide the square into two triangles but if you have a triangle you can only ever divide it into more triangles if you remember from geometry class each triangle is made of three vertices and the job of the vertex shader is to process each of those vertices and figure out where they belong on the screen okay post-commentary tangent so it's not uncommon for people to ask questions such as why does game maker even contain code to let you do 3d things to begin with since it's a 2d engine and the answer for that is simply that everything in computers is 3d there's really nothing special about the concept of 2d or about the concept of 3d or anything in computer graphics except for the matter of orthographic versus perspective cameras the math that the computer uses to process both 2d and 3d is basically identical the graphics pipeline is the same for both as you can see at the top of the attribute list the position attribute that is created automatically when you create a pass-through shader is a 3d position it has an x y&z value it's a vector 3 I'll explain types in a minute and inside the computer inside the graphics card inside the shader language all of the math that goes into transforming a point on for example a sprite or some other object into a point on the screen is 3d math if you're working with a 2-d game you're simply using an orthographic camera where everything is spaced evenly and stuff doesn't get smaller when it's far away from you this is probably one of the most important things for me to bring up in the series and I actually am a little surprised I forgot to mention it in the original narration we could probably get into a whole philosophical argument about what that means down in the comments later but to answer the question at the beginning of this little tangent it's not so much the game maker has random 3d functions implemented in it as much as the 3d stuff was there to begin with as part of the graphics API that game maker uses and it simply does not hide them from you if you were to make a 2-d game in something like unity it would become pretty apparent the a 2d game is just a 3d world with an orthographic camera like I mentioned before which funnily enough the Unity game engine actually gets a fair amount of trash talk for and then on the other side of the spectrum there's something like RPG Maker MV which runs on WebGL which is just OpenGL just like we're looking at right now in the shader code except that hides much more of it from the user so you can't do as many cool things with shaders or vertex buffers or 3d the way that you can in game maker at least not without a considerable amount of work all right tangent over once all that is done you jump over to the fragment shader and the job of the fragment shader or in some shader languages it's called the pixel shader the job of this is to process every pixel on the screen of your pixel that is being drawn and figure out what color it should be the stuff that's created here when you say new shader is what is known as a pass-through GLSL a shader GLSL yes my god could they have given a name that is slightly easier to say that being the name of the shader language because there are many types of shader languages and passed through just referring to the fact that it will take everything and draw on the screen as is without any color manipulation without messing with the textures without anything so if I just run the game with the default shader set it's going to look exactly the same as before we've got the duckling looks exactly the same as before so let's start at the top of the vertex shader the first thing that you have is a list of attributes and those are a position a color and the texture coordinate if you've done anything with vertex buffers before these will be very familiar these are the different components that it is common to find in a vertex buffer you also have the normal which is for lighting and occasionally some other things but that's commented out in the default pasture shader if you've never dealt with 3d or vertex buffers or anything of the sort before each vertex in a triangle has a position which is where it is in space before being before being translated moved to a nother point in the in the game world it has a color you can use color blending if I were to jump over to the land of CPU coding and if I were to say draw a sprite xed if you've ever seen you've probably noticed that in addition to that that's why position the scaling the rotation you can specify a color to blend the sprite with internally in game maker I don't believe that is actually the color attribute being set I believe they do something else to achieve that but the end result the color blending effect is the same I'll talk more about that at a future date and then lastly there are the texture coordinates I have not made videos on texture coordinates before I probably should know that I'm talking about shaders but if you think of the duckling sprite each of the vertices that compose the sprite corresponds to a a position on the image by default when you draw us right as you can imagine the upper right corner of the sprite corresponds to the upper right corner of the image and the bottom left corner of the sprite corresponds to the bottom left corner of the image and that's normally what you want but you can also do some very interesting things by messing around with the texture coordinates underneath the attribute list you have a couple varying zand varying z' are varying czar used to pass information from the vertex shader to the fragment shader there are a few built in for color and texture coordinate you can also use your own and in a couple of videos I'm going to have some fun examples for times that you can use that for the way varying work are really cool and I actually didn't realize what they were doing until a couple of weeks ago but I'll save that explanation for another time underneath this is a main function most programming languages have a main function the main function is where you define the code that actually runs when you draw something with the shader as is the case in pretty much every programming language ever including GML you can define other functions outside of the main function and you can invoke them whenever you need to for the time being I won't be worrying about that just know that all the code that you want to run on each vertex and likewise in the fragment shader on each pixel on the screen you need to include in the main function so the next thing that you're probably noticing are the variable types that three vet for Veck two and so on if you've ever written in a programming language with static typing before this should be fairly familiar if all you've ever used are things like Gmail and JavaScript with dynamic typing you might not be as familiar each variable has a type and each variable can only contain data of that type okay and my original recording of this I ended up spending way longer on variable types than I really wanted to so I'm gonna try and go over it quickly and post if you want a number with the ability to contain a fractional part or essentially something that looks like a real number value in game maker you want to float which I guess if you've never heard of before it can be a bit of a funny name can bring some funny mental imagery to mind but floating point numbers in computer science are just values that can store a fractional part some shader languages also give you access to double precision floating points or doubles which are just floating point numbers with a higher degree of precision than regular floats have but the version of GLSL es which game maker uses does not support that and in any case in almost all cases float is more than enough precision anyway in some cases you may also want to have a variable that can only store an integer number or a whole number in which case you'd use an int you also have Bulls which are boolean variables they're dedicated to holding true/false values and nothing else those are very rarely seen those are the primitive types and after that you have vector types vectors are usually used to represent points in space but in their pure mathematical form they're just a list of elements so if you have a vector two that's just a vector containing two values if you have a vector three that's just a vector containing three values and like I said these are pretty commonly used to represent points in space in 2d or 3d vector fours are collections of four values are often used to represent color information and sometimes points in 3d space with extra data if you just see something like vector V vector three of x four those are vectors of floating-point numbers although vectors of other types like integers are unsigned integers or boolean x' do exist I'm not going to spend any time talking about those but in case you're curious if you remember vectors from high school physics class you can do pretty much all of the common operations on them you can add them together you can subtract them you can multiply them by scalars you can multiply them by other vectors you can multiply them by matrices there are functions for things like the dot product which you can use in some way or another they're at the heart of pretty much any shader program that you'll ever be writing to create a vector type you need to use a constructor which is just the name of the vector followed by parentheses as if it was a function followed by the values you want to contain within it so if you wanted a vector to with the values 5 and 10 you would type that to open parentheses 5.0 10.0 parentheses that's called a constructor if you want to access the values within the vector you would just type the name of the vector variable dot X or Y for a Veck - you would use X Y or Z for a vector three for a vector for you can use X Y Z and W or RGB at a depending on what you're using it for for a point in space or for a color value finally there's the matter of matrices I did a video on matrices a while ago when it came to 3d transformations I've talked about matrices also when dealing with 3d cameras in shaders they're the same deal you have matrices representing the transformation of an object in space regardless of whether you're using 2d or 3d you have matrices to represent information about the camera again regardless of whether you're using 2d or 3d and as with vector shader languages contain ways of doing common operations on them like multiplying them together or multiplying them by a vector or that sort of thing matrices unlike vectors can't have the dot operator used on them for any useful purpose although if you do want to get some value out of them since they're just a grid of four by four numbers or otherwise known as an array of 16 values you can use the square brackets on them like you would an array speaking of arrays those also exists in shader languages the same way that they exist in other programming languages I'll have some uses for those in future videos as well lastly this isn't really a type but it's right there on the screen by the main function void as this name implies does not actually represent any type it just indicates that a specific function does not return any value this is another thing that's common and statically typed programming languages which you may not be familiar with if you write code mostly in G ml and I think that is it for data types I hope that was understandable I like that a lot better than my original narration for this if you're wondering what this thing down here is this is just taking the position of the whatever's being drawn the vertex transforming it in 3d space because everything inside the computer is 3d even if you're just using regular 2-d game maker and it's outputting a position on the screen which is GL position GL underscore position and that's the that's the primary job of the vertex shader all the other stuff is optional you can do some interesting things with vectors for example if you want a shorthand something like this would be valid if I were to comment all this out and run the game exactly the same thing would happen the duck is still there it's not being drawn in at any different ways do you want to have some fun that should be allowed it's not highlighting like it's allowed okay that works even though it's not syntax highlighted this just swaps the X and the y position of each vector and the effect is that this part is rotated I am NOT going to I do not want to spend an excessive amount of time making this overly complicated so I'm not going to do that although I do want to share that combining combining vector components like this is known as Swizz lling which is one of my favorite words in computer science anyway matrices aren't something that you really have to define yourself this here for example GM underscore matrices matrix world view projection that is the product of the combined world view and projection matrices game maker will handle that for you when you want to get the position of the vertex on the screen you can multiply matrices by both each other and the vectors when you want to transform things in this particular case like I mentioned a little while ago this is for taking a point in space and figuring out where on the screen it belongs hey I'll talk more about those later there are a couple things I want to deal with with regards to that there's the matter of lighting and some other things so I'm going to get rid of that because I don't need it and I don't want it there and people wondering what it's doing when it's not doing anything as I've said the primary goal of the vertex shader is to figure out where on the screen each vertex belongs and that is determined by this line all this other stuff the color and V text chord those are helpful but not required so if I were to let's say remove these comment them out and as I said earlier varying variables are shared between the vertex and fragment shaders so I would want to get rid of that get rid of this whole line and the goal of the fragment shader is to figure out what's color on the screen each pixel is supposed to be so a color as I've mentioned is a BEC 4 is represented by a BEC 4 and you probably used to seeing colors ranging from 0 to 255 for reasons relating math that's not entirely true and shaders colors range from 0 to 1 with 0 being fully off and 1 being fully on whatever that means in the context of what you're doing so 1.0 1.0 1.0 for the color and let's let's say a transparency value for alpha of 1.0 that would be white that's fully opaque and this is just going to draw a white rectangle on the screen with no texture information or anything like that if I were to remove the red color and let's say make the transparency 0.5 instead that would make it what color is that blue sky blue which is semi-transparent and you can see through it if I were to remove the if I were to remove the blue color channel this would just be green semi-transparent and that's not that doesn't look especially good we have the duckling sprite we probably want to see the duckling sprite so I'm going to uncomment everything but I commented out a minute ago and let's have a closer look at what's actually going on here so texture TD is a function which takes a sampler and a texture coordinate and the sampler is a 2d image which is another data type GameMaker will provide you one which is this year GM underscore base texture this is the texture of whatever you're trying to draw so that could be the duckling it could be if you vertex submit something if you ver type submit something and you specify a texture it would be that would be the texture if you want to do anything further than that that's pretty advanced use as sampler is a 2d image which is the which is the important part and V underscore V text chord as I said that is a varying variable that is passed in from the fragment shader the vertex shader oops text cord is a varying which you get from the the vertex shader and that tells the fragment shader where each pixel that you're trying to draw a corresponds to on the texture image it's a Veck too so if you wanted to mess with that you could say let us let us say let us specify a new variable varying xan attributes by the way our read only you can't reassign a value to a very or an attribute so if you want to mess with them you would need to you would need to put them in a temporary variable first and text record and it's similarly to colors they range instead of from zero to whatever the height and the width of the images to zero and one this sounds unnecessarily complicated but it has a few nice implications including but not limited to if you want to use graphics with a higher a lower resolution in your game you don't have to rewrite your code you don't have to redefine all of your vertex buffers to accommodate for the texture images because 0 is always going to be on one side one is going to always be on the other and anything in between is always going to be relatively in the same position so before I do anything let me actually look at the duckling sprite is the on its own separate texture page I should make that on its own separate texture page for reasons that have to do with how texture pages are arranged that will make this a little bit more complicated if I get it wrong if you're following along just check that box ask questions later I'll make a video about what that does later and how texture pages work later because I'm basically committed to doing that now and let's say let's so let's turn it upside down let's invert it we'll have a texture coordinates going upside down and then simply instead of drawing the instead of getting the color the pixel of the texture at the at the original position we'll we'll do it at the modified position so now the duckling is going to be drawing upside down there we go all right insert Australia joke here and this function provides a color that being the color of the pixel at each of the at each of the desired positions each pixel on the screen there are other ways that you can mess with that color if you're a big fan of doing math you might write some equations to deal with lighting and fog or you can mess with it a little bit more directly so you can multiply vectors together if you wanted to combine two color values you might multiply one vector for color value by another vet for color value which is what's going on here the underscore V color which suddenly looks like a emoticon comes in from the fact with a vertex shader and that is the essentially the value of the colors of each of the vertices in a similar way to the texture coordinates and the output of the texture 2d function is another vector color value so you can multiply vectors of same type together so effect 3 by avec 3 avec 4 by Veck 4 so on and so forth so if we want we can we can add in another term by the way this is right now this is white as I've mentioned if I were to remove that nothing would happen because blending with white just makes the color the same as it was before if I wanted to make it black that would be zero zero zero in each of the color values with just one for transparency so that it's not completely transparent and now multiplying the multiplying the output color by black is essentially multiplying by 0 and the output color is black if you wanted to multiply by say sky-blue you could essentially remove the red color value and this is now a kind of weird greenish that you get when you blend the when you blend the colors yellow and green together with the tailor's yellow and blue together it's just kind of weird greenish what's magenta I think this is magenta this is gonna look awful I don't know that's just yellow what's magenta so red and blue is magenta you think I would know my color theory better oh my god that's a warning you want to stay away from that bird so you can mess with the color values as I said there are plenty of exciting things you can do with this you can use math to figure out a color that you should blend a each pixel width so that you can apply lighting and stuff like that you can also add or subtract color values so if you wanted to say that's so that's a minus I wanted to add so if you want to tube bright in each pixel a little bit let's say let's add 0.25 to each value and that would uh that would make the duck a little bit brighter that I also added the I also added one to that to the transparency so now background is fully transparent even though it shouldn't be let's try that again with sirak with zero added transparency so now the duct is a little bit brighter the values in color channels should not range outside of zero and one you shouldn't ever have a color value of like 1.25 or anything like that so if you add if you ever add to a color value you should what is it in GLSL yes does it clamp it is clamp hey if there's ever a chance that your color values might be outside the range of 0 1 1 you should always clamp them like this I want to I want to spend as little time as possible getting caught up on details like this realistically doing that should be fine but if you're running your game on some kind of weird hardware that actually will attempt to light haven't show a negative color or something unexpected things might happen okay most of the things that I've shown so far in this um in this little introduction to shader so far has just done a demo that is not really useful in most cases although this um doing something like multiplying the the output color by like red green or blue that has its uses if you want to hit flash for something if you want the UM if you want to hit an enemy with a sword and have it flash red or something you can do that by essentially setting the green and blue color values to zero also another way to do that would be instead of multiplying color key oops you could just set the values directly you do the same thing perhaps a little bit more straightforward hopefully that gives you some ideas of the potential possibilities potential possibilities did I really just say that hopefully this gives you some ideas for the things you can do with shaders there are a lot more things I want to talk about with shaders besides this this has just been a brief overview introduction this is what a color is I know the I know the video has been kind of long I hope future shader videos are generally not this long because I do know that when I go over like 20 minutes that audience retention drops off massively one type of variable that I did not talk about on purpose are uniforms and uniforms are essentially parameters that you can pass to shaders it is pretty common to have a uniform representing time so that you can have a value change over time that's most likely going to be the subject of the next video a few weeks ago a few months ago I posted a poll on my channel about what people wanted to see you say ders there are things like image processing there's 3d lighting which is the main thing that I wanted to do there are fancy things like 3d materials specular reflection normal mapping that kind of thing there are the ever-popular toon shaders made famous by at the legend of zelda windwaker and some other games and the result of that poll was basically that people want to see everything so I'm going to be talking about shaders for a while and I hope that you all are excited about this as I am so I will stop talking now github repository with all this is in the video description there's going to be both the base project which is the state of this this little tutorial video at the beginning when I started talking and the master branch which is going to have everything that you see now my name is Michael I like wizards and Dragons and making games I tried to post about two of these game maker tutorial videos a week often dealing with 3d things sometimes dealing with other things I made a patreon so if you want to chip in a little bit towards these videos being made there's a link to that and all the usual places as well I hope this video is at least understandable when I was planning this out I went through like two or three versions of how I wanted to present things and in what order and this is the one that I settled on I thought would be most effective and it would be the most logical order but if there's anything that you think I should have given more attention let me know and I will address that either in the comments or in a another separate video otherwise I hope you found that useful and I will see you all later special thanks to Angie punch and zenith's for supporting these videos if you want your name in the credits and to get these things a day early and some other fun stuff head over to the patreon page in the video description join the fun

Channel: DragoniteSpam

Views: 5,235

Keywords: game maker shaders, game maker using shaders, game maker graphics pipeline, game maker shader introduction, game maker passthrough shader, game maker shader tutorial, game maker sprite effects

Id: a4S7LXx6-sQ

Length: 31min 20sec (1880 seconds)

Published: Sat Jun 20 2020