Simple Lighting System in GameMaker Studio 2

hi everyone and welcome back to game maker cast it's Mickey and in this video tutorial we're going to be taking our simple room like this and transforming it into something that looks like this with some lighting and particles and everything like that so let's roll the intro and get right to it now I have the default project here which is something that you can find in the description the only real thing that we care about in this project is going to be this SPR simple light cut out picture here and all this is is a circle that starts with pure white and then fades out I use a sprite to do this and it's pretty simple to do all I need to do is I pick my color white I come over to using a gradient I choose the circle make sure it's on no dizzying and then I will grab this corner and I just go down to that corner and this is the sprite in question that's how I made it so now you know okay let me close this and go back to the game maker I have my room here and everything is set up in tiles and then you can see that we have some lava stuff here the lava this stuff is on its own little layer and all I'm using it for is this is the spawner which means that particles can only spawn within this particular square and this square here so I don't have particles spawning over here or all over the room and really it's just there because I didn't want to do the math for it okay so now that we have that out of the way let's go ahead and start creating our lighting system if I run my game you should see we have a nice default room here with no lighting happening at all so I have a group underneath my objects and I just made that by saying add group once I've added my group I gonna create my first object and call this object lighting render so this is going to be the object that is it's going to be used to render all my lights in the game so I'm gonna make sure I add it to my room and I'm gonna add it to my instance which is at the top here if I go back to my object I need a crane event because we need to create a surface and then we need a draw event because we need to draw on that surface so how this is going to work I'll use a sprite again imagine that this is our game here what we want to do is we want to create a surface that it's going to draw something dark over top of it and then on that surface we're going to start creating cutouts of our lights that we have in the game and then we are going to add some color to it and motion and stuff like that so this is how it's going to end up working so I'm laughing because it looks like a face okay so we need to create our surface first so let's do that by creating the very first variable so we're gonna have a variable called lighting on the score surface make sure we set that to minus 1 the reason we're using minus 1 here is it's when we're dealing with services minus 1 is treated as a special variable in game maker studio in the draw event this is where all the magic is going to happen it now when we're dealing with the surface here surfaces are volatile so that means that if we minimize maximize or perhaps maybe even move our window there's a chance that the surface might be destroyed so we need to check to see if that surface exists and if it doesn't exist then we're gonna create it on the fly here so we can do that by using a simple if statement we could say if the surface exists and then it looks before an ID here so we'll pass a lighting surface so if it doesn't exist then in here we need to create it so I'll say my lighting surface equals surface in this corner 3 with a width and a height now in this particular case I'm just going to use my room underscore width and I spell it right in roof manga score height now one thing you may not have noticed when we were looking at the room is my room itself is very small it's 512 by 384 and then I'm using a viewport to scale - a 1024 by 768 resolution so I'm okay by using the room width and height because it's pretty small if I had a massive room I would probably use the camera properties the width and height here to only get that particular thing so if my room was something like 1024 it would actually be much higher I would only want to draw the surface on whatever the camera can see instead of the entire room here because we might end up using more memory than our users have on their computer you don't know that back in that workspace once we create the surface now we have to tell the surface that we're going to draw to it so we could do that with a surface set target and we're going to set the target to our lighting surface anytime we do a set target we also have to reset it so we might as well add that in here now anything that we put inside here this is going to be drawn to our lighting surface just like I said the first step is going to be drawing something dark over top of the surface and we can use that by using draw clear alpha and we're going to use AC black so it's going to be pure black and we're gonna set the Alpha to 60% now even though I have this in my room which I do right there it's nothing's gonna happen because we're not actually drawing anything after we reset the target we have to tell it to draw the surface so draw a surface and we're gonna pass in our lighting surface ID which is that guy there and in the position that I wanted to start drawing out as the top left so I'll just use the zero and zero now if I hit a five we should see a darkened room here in which we do so that's step one complete hey everyone if you want this game just type the URL in your browser and it shall be yours next we want to do is cut out those particular holes especially for the coins here so I'm going to create a new variable called object ID and cut it and in here I'm going to set the sprite to that circle I'm going to make sure that it is not visible because I don't want it showing up within the game now in my room I'm gonna take this lighting cutout and I'm just gonna put it over a couple different points that we have here and go back to my workspace I'm going to make sure that I bring up the render again and I'm going to maximize this in close memory now what I want to do after we draw everything after we draw a black rectangle over our surface I want to make I want to go through and say do I have any cut out lights if I do then I want to do something with them so I can use the width function here and I can look for the object line out cut oh and if there isn't any lighting cut out variables in our room it will just skip the steps so that's very nice to know so what we need to do is we need to set the GPU blend mode to blend mode on the score subtract because we're going to be we're going to be cutting out circles in that piece of fabric there and what I want to do is I want to use a draw sprite extend it and I'm going to set it to be whatever the sprite is currently set to which is normally going to be always this guy the circle if we have any animation I want to make sure that I capture that by using the image index and then the x position and y position of that object in our room and then the image on score X scale match I'm gonna scroll Y scale we have no rotation and we will use a pure white color here and an alpha one the final thing we need to do is reset that blend mode to normal normal or else we won't see anything on our screen now if we hit f5 you should see that we have some cutouts happening here now the reason why I'm using the image X scale and Y scale is because if I go to my room and I click one of these cutouts and I make this a lot bigger and hit fi that's automatically gonna be accounted for and you can see we have this nice big circle here so I don't have to code anything it's all being done on the variable itself so the next step we need to add color into what we see here so right now our we're just basically cutting holes in our surface now I want to add some color in so I'm going to go back and I'm going to open up our cutting object here and I'm going to go to variable definitions and I'm gonna add a variable for the color I'm going to go and change the type so that it's a color and changed the default to be white and make sure I drag the Alpha over to 255 and while I'm here I'm gonna add a new variable for intensity and this is going to be a real value and we're gonna set it to use a range from zero to one and let's set the intensity by default to zero point one the reason why were you using this range here as it gives us the slider here so it makes things a little more easier when we're doing things in the drink editor now if I go to the room editor okay and let's say I pick this guy here now and then these variables I can change this information here so I'm gonna change the color and change it to something yellow and the intensity I'm gonna put at point zero three down here I'm gonna change this guy and I'm gonna push him down over here by the lava won't double click and save variables change the color to red just happens to be right there and I'm gonna change the intensity to something a little more higher so zero point six now that that's done let's go back to our render object and let's code that in so right here we've cut out of that particular circle now we have to add color in so we're gonna set our blend mode to blend mode on the square ad and we might as well take what we have here copy and paste because all we're really going to be changing is we're not going to be using seat white we're going to be using whatever color we passed in and we're also gonna be using the intensity that we passed in now if I hit f5 we should see a couple circles that are yellow it's a little hard to tell on this guy and then we have a red a circle now actually let me go and load up the room here let's go to this guy and say variables and change the intensity to one and change that to blue just so you can see it they were having to squint okay so you can see that now that is a hundred percent blue so this looks great the stepan want to do is kind of add a wobble effect and this is basically the lights going in and out so let's close this and load up the cutout again lets out a new variable and let's name this variable wobble and let's set the default to zero it's going to be a real number and we're going to use a range and we're going to set it to point zero two so we can't really go very high here now let's close this go back to our room and now if we say open up this guy and then the variables we have this a wobble wobble variable here I'm gonna set this to point zero five and I'll copy that and she in here I'll make this one the maximum just so we can see what we're doing okay so now that we have that set up on these two lights if we go back to our render when we are doing any wobbling we have to figure out the math it's not really math but figure out the image circle or sorry the heat size of the circle before we draw it and cut it out so we'll use a wobble amount X in a wobble amount Y variable so the X is going to start at whatever our image X scale is plus a random range between the - wobble and the plus level so on one of our lights we set the wobble to something like point zero five so this would be negative point zero five two point zero five let's copy this and paste in the Y and just change it to the image Y scale so now when we cut the image out and you have to use the wobble of mail X and well no Y and then we really draw the image in with the color we use the exact same variables there so if I hit f5 we should see hopefully this one you can see much better but you should see going kind of in and out so now we have that little wobble effect there the next thing that I want to do is want to make it so that these particles have actual lights attached to them so right now they are just a plain object live a particle there's some basic movement code in here and then just a fades out hey you're still watching this video that's awesome if you want this game type in the URL and it's yours so what I want to do in my render and particular the draw event is I want to say instead of using with the lighting Kelly I want to look for with the lab with particles so I'm going to copy this and I'm going to paste it in down below I'm gonna change this to say object lab particle now there's a few things that we have to change we don't have access to the Wobble variable we don't have access to color and we definitely don't have access to intensity so what we could do is we get hard code these values within this with statement or we could create a variable up here so let's call it the lab level and let's set it to 0.5 and let's change all the bubbles to that and now I'm just going to hard-code the color to say C underscore orange and instead of saying the intensity what I want to use is the image alpha and the reason why I'm using the image alpha on this particular sprite is because this particular sprite it's alpha fades out over time and then when the alpha is zero it gets destroyed so if everything is right I should hit f5 and let's see if our particles have any lights attached to them here and you know what I forgot one thing if I go back to me my render and I gonna draw we're using the sprite index so the sprite index is gonna be this lava particle guy right here it's a three by three pixel image so that's not going to cut it for us in the drive man we are gonna have to specify the particular sprite so we want SPR underscore the simple light cut out and we could just use the first image index which is zero because this like that it does not have any animation at all to it so with that let me give her a quick look looks okay so let's head up five and let our particles kind of stuck and load up here and you can see that now we have those particles and we have lights attached to them so hopefully this lighting system is a simple enough that you can put it into your games and I can see a lot of people using it it really makes the game a whole lot different thanks for watching and I'll see you next time

Channel: GameMaker Casts

Views: 8,024

Keywords: simple, system, gamemaker studio, tutorial, lighting, gamemaker studio 2, gamemaker, easy

Id: bM15UtyC_MI

Length: 16min 18sec (978 seconds)

Published: Thu Jun 18 2020