Filter Effects and Filter Layers - GameMaker Studio 2.3 Tutorial

okay hello all the crazy people out there my name is michael i like wizards and dragons in making games and as of friday the 15th of october 2021 a new game maker beta has come out and this one adds some particularly interesting feature which i was actually not expecting to see added to game maker for a little while but here we are and that new feature is layer effects so like all game maker features that i talk about while they're in beta you do need to be using the beta ide for this in order to obtain that you would log into your yoyo games account you would go to the downloads tab and you would go to the section that says game maker studio 2 beta the ide version that you need to be able to use this is 23.1.1.408 or later and the runtime version that you need is 23.1.1.388 or later if you are watching this video far in the future after this update has made it to the stable version uh you need to be on 2.3.6 or later so layer effects so if i run the game this is just my base project uh my base 2d project that i like to about sometimes when i wants to demo simple effects in game maker we have a duck who's walking around the screen we have some dogs who are also walking around the screen and can be talked to uh this is composed of a few simple objects which as you can see right here as well as a layer of tiles there we go simple objects and a couple tiles and when it comes to layer effects there is a new layer type in game maker in the room editor which you can select in addition to backgrounds instances tiles and that sort of thing you can click this button here with the magic wands to create a new effect layer and when you first do that it won't be super interesting you'll just see the effects type cell phone right where were we so effects layer if you click the drop down you can see a number of different effects let's go with the first one this should be easy to understand this is colorize uh the effect is pretty straightforward it tends the uh the layers beneath this effect layer to a specified color you have control over that color you can click the little uh the little box to open up this color picker you can change it from the default of purplish to something like maybe red or green or something like that drag it down to white i believe this just desaturates it uh black and white and gray don't really have a uh don't really have an effect on the on the color uh you can also if i were to um let's make it red because i think that looks cool you can also uh modify the intensity so one is a hundred percent uh this is a value between zero and one if you were to set the intensity down to zero uh the color blending effect will be turned off if you were to set it to something like 0.5 it would be about 50 if you were to set it to one um we would have a 100 um uh red tinted color this could be useful if you want to tint the screen to a color uh as you can see like this if you want to desaturate the entire screen you could use a gray color like this um i believe if you want something like a sapia tone you would want to select that's not quite it i want to say sapiotone is somewhere around here like a burnt orange sort of a sort of color does alpha effect okay alpha does not affect the uh alpha does not affect the the blending color here just just the red green and blue anyway this alone has a lot of potentially very useful um uses in games uh there's a bunch of other effects i'm not going to go through all of them this is an edge detection uh this is something that i have done a fair amount of writing my own shaders for in game maker in uh in videos on this channel in the past but this will be an edge detection effect if i were to zoom in uh you would see that only the only the pixels on the edges are colorized uh you can you can see the blue line around the edge of the yellow duck if i were to run the game you would see that uh obviously this works in game i didn't actually run the game when i uh when i set the colorized property um see this is apparently only only applying to the um to the background layer it's interesting see if colorize does the same thing okay i i would need to layer these differently if i wanted the effects to apply to um oh you know why that is that's because i'm using the depth equals negative y trick for uh for uh depth sorting so these effects layers are just applied to um to things in the room at a certain depth if i were to move the duck all the way to the top of the screen it should be should be blended correctly like that yeah um if my if my depth is greater than the um or less than rather the wide the depth of the effect layer then it won't be applied anyway back to back to the effects uh i am not going to go through all of these desaturate there is okay so in addition to being able to use the colorize uh layer to like gray or white or something we also just have a straight up desaturate um effect layer did not see that one when i was poking through this earlier uh there's blur uh blur effects are fun this is a sort of frosty looking blur this isn't just a straight up gaussian blur at least that's that's how it's appearing on the um the game maker ide anyway um let's see how this would look if i were if i would run the game okay that's pretty cool yeah that's uh that's definitely a nicer looking blur than uh the regular gaussian blur that i would usually write in a shader i see that we have our own um we have the ability to choose a um a sprite to use as a noise texture okay what happens this is a terrible idea what happens if i would like pick the like the duck and use that as the okay that just that doesn't really work at all using the the duck is like the blurring noise texture that if anything that looks even worse okay fine set it back to the default that is uh that is this looks like it's multiplying by a color rather than uh blending to a color slightly different colorization effect a screen shake this does exactly what you think it will uh screen shake can be fun i said i wasn't going to go through all these effects but i kind of want to now because a lot of these are quite fun uh we have screen shake being applied to the background layer we have um we have some some values that affect things like the shake magnitude if i were to lower this the screen would only be shaking a little bit uh the shake speed if i were to increase this we would have a much faster vibration if i were to make this too high you'd probably be getting rather motion uh there's also a noise texture that you can use for the screen shake effect too which is interesting usually i see when people do a shader based screen screen shake effect they're just um they write their own prng in the shader but i guess i guess having a noise texture doesn't make sense for that uh what else posterize i think is a particularly fun one uh this is posterize effects can be a little bit hard to describe uh we're essentially rounding the number of colors that we have where we're essentially reducing the amount of colors that we have if i were to set this color level value to something lower like two it might become a little bit more obvious what this does uh you can see when i do this we have not very many colors at all in the um in the game uh you might consider doing something like this to uh maybe emulate a 16-bit graphics style although um i'm not sure if i actually like it for that purpose anyway it's an interesting effect if you like this effect uh certainly feel free to play around with it if i were to increase the color levels amount we have a little bit more of a very blur but a little bit a lot closer to the original colors uh versus if i were to just turn this off to begin with you know what is this duck spread just like blurry on its own hang on huh i just i just i just exited the tab and returned and the ducks is no longer blurry anyway these are effect layers uh certainly feel free to play around with these and add effects such as colorizing your background layer or doing other things like that there are a number of questions that people have about effect layers so far that have yet to be answered because as of my recording this this feature is this morning years old uh probably the first question that people are asking is can you add your own effects um to the effects layer type drop down over here and the answer to that is not currently but i strongly suspect that you will be able to in the future um if you were to open up a new windows explorer window and if you were to go into the folder where the game maker runtime is located so on windows that would be program data game maker studio 2 beta in my case the cache folder run times run time whatever the current run time is go into the bin file and you will see i don't know how familiar you all are with the um the runtime folder in the game maker installation uh but there's a new folder in this runtime called filters and effects and if you click on that you can see um you can see information pertaining to each of the uh each of the effects that you can uh that you can set to a layer uh there's a few things that you find inside each of these folders one is for example uh this is filter pixelate uh in this folder you will find a file called filterpixelate.fxb i do not know exactly what this what this file is i it's some sort of binary file i strongly suspect that this is the uh the shader code the compiled shader code that runs inside the gamemaker ide you can see some things inside it like um hlsl shader compiler and ps3 0 which is the the pixel shader model and uh some other things like that i'm pretty sure this is the compiled shader code for your um for the ide and then on top of that inside the project folder inside each of these effects folders you can see a few things you can see a uh yyp which is a gamemaker project file you can see shaders and this again this mirrors the project directory of just a gamemaker project you have filter pixelate shader dot yy this is just a little bit of meta information about each of the uh each of the shaders this is something very similar to what you'll find for any game maker resource and you will also find uh filterpixelate shader.vsh which is the vertex shader which in this case is basically just pass through vertex shader very similar to what you would get if you just created an empty shader minus the um uh the color varying as well as filter pixelate shader dot faceh which is the fragment shader and can i set the language to this to glsl uh i cannot notepad plus plus by default does not have glso as a language vs code to the rescue i guess anyway this is just some glsl code uh which will apply the pixelate effect this has some implications uh probably the most interesting one to me being that i like i said i strongly suspect that at some time in the future it will be possible to define your own effect layers inside inside game maker inside the ide feel free to speculate on that all you want and also if you want to use the shader code inside a shader of your own uh you can of course go into the uh into the filters and effects folder inside the gamemaker runtime and you can just use the shader code and adapt it to suit your needs thirdly uh you can modify these uh these filter effects through code if i were to go into just some code editor somewhere let me go into the uh the parent object you may notice if you started typing some code that a few new functions have appeared in game maker such as fx underscore create um as well as a couple other effect related functions fx underscore get name get parameter get parameter names that sort of thing we also have some pertaining to layers so you can say layer i believe it is set fx and this is a function that would apply uh a an effect such as one of these that you might create through one of these functions this would apply it to a layer and i believe there are some others layer fx no it might just be that one oh there's also layer set fx and layer get fx and also layer clear effects which should be fairly obvious what it does uh as of as of today the 15th of october 2021 these functions are not documented if you were to hit f1 on the function name and open the manual or if you were to middle click on the function name and open the manual uh it would just open up to a blank page it would just open up to the start page if you were to type something like fx creates into the search bar uh nothing would pop up and this is somewhat unfortunate this is uh to make a long story short uh mr capri singh the technical writer for yoyogames is currently on vacation and he was not able to apparently get the documentation for this up and running uh before he uh before he left for vacation so it may be a week or so before we see documentation for these functions so that we can actually know how to use them i would like to eventually make another video that's just dedicated to effect layers uh set through code like this but in order to do that i'm going to have to either wait for the documentation to be finished or i'm going to have to wait for either me or someone else to be able to to mess around with these and and work out how they work for ourselves one way or another that's going to be another a longer more more involved ordeal than just quickly uh showing how effect layers work in the room editor there has been some criticism and i'm using the word criticism here loosely there have been some comments made about effect layers um in that you can technically do everything that you saw in this video already through the use of just applying a shader to a layer but as you were hopefully able to see in this video applying an effect like this through an effect layer is considerably easier than writing a shader and setting the shader to the layer through code and especially i think for users of game maker who would not consider themselves power users and do not want to spend a lot of time mucking through shader code uh this is a very a very fast a very quick and dirty way of getting a nice looking effect up and running within honestly within seconds uh pixelate can i set like a pixel radius for this i can so if you if you really want to if you really want to censor something in your game you can you can use the pixelate effect i think colorize is honestly my favorite i think the ability to to tend to screen to tint a um well the entire screen or a specific thing in the screen to air to a specific color is uh quite nice anyway that's it for me i hope you enjoy using effect layers and get a lot of mileage out of them i am very interested to see where this will go in the future i expect that this is a feature that a lot of people are going to be able to use in a lot of different ways but that's it for me for now i hope you all found that interesting my name is michael i like wizards and dragons and making games uh no download this time this is just the base project actually i'll have a link to the uh to this base project repository in the video description if you want to download that and play around with effect layers i have a patreon so if you want to contribute towards these videos being made i will have links to that in all the usual places as well you can see your name in the credits you could hear a name shouted out at the end you could see a preview of my future plans periodically so if you want to pledge i would definitely appreciate it otherwise i try to post about two game dev videos a week one of these and one tower defense game sometimes more than that i will see you all later special thanks to connor edward holt emily coyo pocho syndra larsen tusk and zenjiman for supporting these videos if you want to see your name in the credits you hear yourself shouted out at the end head on over to the patreon page down in the video description to join the fun

Channel: DragoniteSpam

Views: 1,463

Keywords: game maker, game maker nineslice, game maker filter effect, game maker effect layer, game maker layer shader, game maker studio 2, game maker studio 2.3.6, game maker tutorial

Id: gqeESm1QgKU

Length: 16min 27sec (987 seconds)

Published: Sat Oct 16 2021