Fire Jump - Part 1: Infinite Platformer - GameMaker Studio 2

greetings and welcome my name is aaron craig with let's learn this together here today to walk you through part one of a four part series teaching you how to create this game called fire jump using game maker studio and drag and drop coding so this is an infinite platformer where you play as a firefighter and you rescue civilians as you jump from window ledge to window ledge there is a lot going on here and you're going to learn how to do all of this and you don't need to have any coding experience or background or anything we're going to have records for your gameplay we're going to have a menu we're going to have sound effects and music and we're going to do all of this using drag and drops you don't have to do any coding at all there's also a full written up series for each of these parts if you want to follow along by reading instead of watching on here and in this video description you will find all of the assets that we'll be using for this series and you can download them get the game and try it out yourself so with that being said let's go ahead and dive in first thing we're going to have to do is make a new project so if you don't have game maker open go ahead and open it up and then click on new project if you already have it open go ahead and click on file new project and we want drag and drop not game maker language if we do this we can give it a name i'm going to say fire jump and this is part one so i will call it part one now in here is the game maker workspace and asset browser which we're going to be looking at throughout this entire series so let's take just a moment to get familiar with it anytime you you start using a new piece of software it can be a little intimidating so let's break this down bit by bit so that you know what does what and you're comfortable using it so first is the workspace right here now game maker is a tabbed environment so what that means is it's very similar to using a browser when you want to create a new environment for working on something you can actually just click on plus and create a new workspace and then the things that you use inside of a workspace are isolated to this tab so if we're looking at some sprites or some objects they can be in this workspace then if we want to look at some audio sound effects that can be in this workspace and you can have as many as you want you can actually rename them by right clicking and renaming so if we wanted this to be just audio we could have all the audio files open right here so this is the tabbed workspaces in gamemaker now over here on the right is the asset browser and this is where all of your assets which are everything that is going to be in your game both the things you see here and some of the things you might never see if you're playing it things like included files they are all going to be right here in the asset browser down here on the right we can increase the size if the default size is a little too small for you i usually bump mine up to 150 percent now i can see things a lot clearer there are a lot of assets that we're going to be using including things like fonts objects rooms scripts sequences sounds and sprites and as we get into each one of them i'm going to show you exactly where to find it how to bring it in and then we're going to talk about what it does how you edit it to make it work exactly the way you want and by the end of this you're going to know how to make fire jump and then you'll be able to branch into making whatever kind of game you want to make so first off we're going to need the assets for fire jump now in the video description you can find the link to download these or if you're finding the written tutorial the link is right up there right after a few paragraphs so you'll find a zip file that you'll download and open up and inside here is the full game and then we also have art assets and audio assets so the first thing we're going to be doing is bringing in the player and there are several ways to add sprites which are images into your game so let's go to art assets and we have character one and character two so character one is what we saw in the game demo it's this guy right here but if you prefer there is a character 2 which is this lady and you can use her and this will follow along exactly the same these sprites are the same dimensions same animations all of that so whichever one you want to use go ahead and use that i'm just going to use character one right here so the first thing we're going to do is bring in the spr underscore playerair.png so there's a lot going on in that name and we're actually going to break it down but this is the sprite we want it's a pretty high quality sprite of this firefighter flying up into the air so the easiest way to bring in a sprite if you already have it open is to just drag it into game maker into the group you want now what's kind of confusing is that these groups have names like object scripts sprites but you can actually put any kind of asset anywhere you want so we want this to be a sprite so i'm going to put it in sprites but if you accidentally put it somewhere else you can just drag and drop it into the folder you want what's cool is you can make your own folders so if you wanted to right click out here and create a group we could have something called firefighter and then put everything related to the firefighter inside of this group that's one way of organizing and that's totally fine there's nothing wrong with that what i'm going to be doing for this tutorial is sticking with the most basic and simple idea which is just to group assets that are similar together so i'm going to go ahead and delete this firefighter group and i'm going to keep this spr player error inside of sprites but we do want to have a little bit of organization so i'm going to create a subgroup by right clicking on sprites go to create group down here and i'm going to call this player and then i'm going to drag this into the player subgroup and now i can collapse that and if i had other sprites they'd be easier to see and then you can completely collapse the sprites group as well so this is really cool and a great way to be organized from the get-go because we're going to be adding quite a bit of stuff and if you don't organize it it'll be a little bit harder to find but what's really cool is up here on the top is you can actually just search for assets so if you don't like being organized or if you put something somewhere in here and you just can't find it you can search for player and it will show up right there or whatever it is you're looking for so that's really nice as well now you saw that it opened up our sprite editor right here now this is the first way of bringing in a sprite if you don't have your folder open you can also right click create sprite and it's going to make a blank new sprite for you and then you can actually import a sprite through this button and it will take you through your navigator to find exactly what you're looking for if you know you need to make a lot of assets at once you can actually come up here create asset sprites and then you can choose how many you want to make at once these are all the different ways of making a sprite whichever one works best for you go ahead and do that i had the folder open so i'm just going to bring it in just like this so let's go ahead and do a quick breakdown of our sprite editor here so we have the name over here we have the size which we can resize the sprite you can change the image itself or the canvas so the canvas is the entire image and you can grow it or shrink it if you do that it'll actually cut off parts of the image if you're not careful scaling the image is going to take the whole thing and make it larger or smaller scaling small things up to large normally doesn't look very good scaling big things down usually works out pretty well then we have texture settings collision mask and nine slice now we'll tackle what the collision mask is and how to use it in later parts but for now you can ignore it and these others the important one here is this edit image which brings up the image editor which allows you to create your own sprites animations and modify existing ones we're not going to touch this right now but it is there in case you are an artist at heart and want to try your hand at making some sprites yourself then we have fps which stands for frames per second which doesn't matter in this case but if we had more than one frame which you can see we only have one frame it would animate by flipping through those frames at 30 frames per second the important thing we do want to look at is right over here the origin the sprite origin here is how the sprite rotates around it also matters for when we are creating objects because it's going to use the origin of that sprite to determine other location points so what we need to do is change it from top left to middle center and if you don't do this you're going to get some weird errors later on when you're placing your object in the room and when you're moving it around and changing it so make sure that you get this to middle center next let's go ahead and bring in the windows that we're going to have for our game and we're going to do this through creating a new sprite so let's go to sprites right click create and find that sprite down here near the bottom and we're going to call this spr underscore window now you may have noticed that we're naming things a little strangely like why did we call this spr underscore player underscore air and why is this spr underscore window the reason for that is it's really helpful to have a prefix on your assets so that you can easily and quickly tell what you're looking at and to distinguish them for game maker because when we have a player object which we're going to have pretty soon we cannot have an object called player and a sprite called player but if we have spr underscore player and then object underscore player or obj then game maker doesn't throw a fuss so this is one naming convention that you can use that will help you stay organized and understand what assets you're working with and to make sure you don't have any naming errors or conflicts in your project now for the window let's go ahead and click on import now navigate to where you've downloaded those assets mine are in downloads under fire jump user assets we're going to go to art assets it's going to be under building and this time we actually want to bring in three not just one so i'm going to click on the first one hold shift and click on the last one and you can see i've selected three of them here and then i'm going to press open now it tells you that importing files to a sprite is not an undoable action do you want to continue the answer is yes we want to continue because we want to add these sprites in there if we did it wrong well it's no big deal we can just delete them and do it again game maker gives you some warnings that are really useful and sometimes you want to click that little box that says don't let me know about this warning again now we've got one sprite in here but three sub images or frames you can see down here we've got one out of three and we have three frames right here where if we click on it it actually changes which one we're looking at and this is each of the windows that we're going to be able to move through and jump on or rescue civilians from now when we have more than one sub image or frame it is now animated and that's not what we want we don't want these windows to move and flip between these like if we press this play button you can see it's animated but this is clearly not meant to be animated so what we're going to do is set this fps to zero and now if you press play nothing happens because it's not animated which is fine now it is important that your frames are the exact same order that i have here because we're going to be referencing these sub images later on when we start putting in our code our drag and drop code so that they need to be in this order if they're not you can click and you can actually just drag them around do that until you've got them lined up like i have now the other important thing is going to be the origin this time we don't want it in the middle center because these are not going to be rotated and they're not going to be moved at all instead we're going to use the origin to actually create the civilians we're going to rescue and where we're going to do that is right here at the bottom so i'm going to click on this corner and drag this up a little bit to make it larger click on this center fit button and then i'm going to drag the origin to the very center between these two lines at the top so we want it to be right here 161 369 or 370 is exactly what we want but i got pretty close so you can type in the origin numbers here or you can drag this origin around until you get it exactly where you want it so if your civilians do not get put in the right place if they're hanging out the window or on the bottom or above it the origin is wrong so make sure you come back in here and double check that that's where it's supposed to be now we just have one sprite left that we need for this part of the tutorial so i'm going to right click create a sprite i'm going to name this spr underscore brick underscore tile click on import and it's going to be that one right there now i'm gonna click don't show this message again because i don't need to keep seeing it and now we have this tiled sprite and what we're gonna use this for is the background for the game and we're gonna do exactly what it says we're going to tile it which means that we're going to create it once and then right off to the side and underneath it we're going to create it again we're going to just basically expand this up down left and right into infinity so that we have a nice looking background for our entire game so now you've brought in lots of images we've gotten pretty familiar with the sprite editor and messing around with the frames moving things animating things even when we don't want them animated and that's awesome but for our game to work and to be able to really do anything we have to have an object an object is where all of your code is going to run so let's go ahead and create one over here in the objects folder i'm going to right click create object which is always closer to the top than i think so right after note we have object now for prefix i always put obj and then we're going to do underscore player so this is going to be the player object which is going to have all of the drag and drop code that controls their movement collisions and everything else we need for the player to work and be able to rescue civilians so we're going to add a bunch of things in here but we're going to do it slowly just one step at a time and when we encounter errors i'm going to show you what they mean and how we can fix them because the large part of making a game is getting it to work and do what you actually want it to do instead of what you've actually told it to do a lot of times those are two very different things so the first thing we're going to do is assign our player airsprite to our object there's a couple different ways to do this you can click on no sprite and navigate to where the player sprite is and if we click on that it is now inside of there you can also just drag the sprite directly onto the object if you already have it open there and that will assign it as well you can change this sprite later as we play which you probably noticed in the game demo when we are jumping and falling and shooting and dying each of those are different sprites so we're going to change between sprites depending on what we're doing inside of the game now the other object we're going to need is the window so i'm going to right click create object i'm going to call this obj underscore a window i'm going to drag and drop that sprite right onto there and now that we have these two objects let's go ahead and take a look at rooms or levels for our game so game maker always has one created because you must have a room asset to be able to run your game let's go ahead and rename this by right-clicking or you can press f2 by having it selected i'm going to call it rm game then we're going to double click on it and this is going to open up a new tab for us right here so let's go ahead and quickly explore the room editor that we've just opened up first we have layers for the most part you want the layers to be stacked in a way that makes sense because you can imagine that each layer is on top of another so the background layer right now is just a black color and the instances which are specific objects and we'll get into that in a little bit the objects we have we can drag and drop onto our instances layer but if we were to move this layer below the background all of a sudden we can't see them because the background is actually on top so make sure that these stay in the proper order but if you don't have the instances layer selected let's say we chose background instead and we try to drag an object onto here it's going to give you an error it says that this asset can only be applied to an instance layer and you don't have one selected so in this case it's a very helpful error it tells you exactly what happened and it gives you the option to create a new one or to cancel so i'm going to cancel we don't want to make a new one it's just a reminder that when you're bringing in assets into your room make sure you're on the correct layer we don't need him right now so we'll go ahead and delete that then underneath is the properties of the layer you have selected for the instances there's no properties but for background you can change you can add a sprite you can change the color you can do all these different things we're not going to worry about that right now but every layer you have in your game has properties that you can view right there down here is where we want to go because we actually want to make some changes so here we have some room settings we have the width and the height now we don't want 1366 by 768 because we actually want this to be a taller thinner window so i'm going to come down here and say the width is 1080 and the height is 1920 because this is going to be a infinite jumper and then i'm going to come up here and click on center fit and now we have a very tall and kind of skinny room this is essentially the opposite of probably your monitor size or the most common monitor size which is 1080p having it be this size will also make it really easy to port your game to mobile or other systems as well with that change out of the way let's actually go back to the background and now we're going to tile that brick tile that we had talked about earlier so i'm going to click on the background layer and click on the sprite and go to the spr brick tile so you can see it show up right here but that's not enough to cover our entire room so what we need to do is click on horizontal and vertical tile so now it does cover the entire room which is exactly what we want if we disable the grid up here you can see it a little bit more clearly and it looks better so this is going to be the background for our game and then we're going to create and put objects in front of it which is why the background layer definitely has to be down here not on top of instances now let's go ahead and start doing some designing and getting our game ready to be played so in instances let's drag the window and put it in here now let's talk quickly about the difference between objects and instances because they are essential but a little confusing so you see here we have a window object but if i drag another one inside of here i now have two window objects but you can see over here in the properties they actually have kind of different names here and that's because an object is like a blueprint the instance is the actual creation and instances all have different data and ids and ways that you can manipulate them because imagine if we wanted to change one of these windows but we didn't have a way to access the individual window we could only access the object it would change all of them at once which isn't what we want instead by doing this we can have three different windows in our room in our game but each one of them can be individual and we can change the image we can change everything about it because it is an instance not an object next let's go ahead and put the player in here but a good way to keep the player on top of the windows that way that we're not accidentally drawing the player behind the window is to have another instance layer just like we talked about the depth of these layers so if we make another instance layer and we call this one by right clicking we can rename the instance layer we'll call this player then we drag the player onto here now the player will always be in front of the window otherwise if they weren't or if they were on the same one something like this could very easily happen depending on a lot of different circumstances now let's drag the player down here towards the bottom below the first window we've got and this will set it up so that we can start jumping immediately onto the window and start testing out our game so let's go ahead and get some drag and drop code into our objects so that we can start testing things out so we're going to double click on obj player and then i'm going to press f12 which minimizes all the other windows here so i have more space to work with now game maker uses events it is an event driven system and each of these events is triggered in a different way the create event happens only the first time an instance is created the step event runs 60 times a second so each of these runs and gets executed differently throughout the life of your game knowing which one to use is important and we're going to use a lot of them so you'll get familiar and you'll know which one you need for each circumstance the first thing we're going to do is add a create event we're going to have our firefighter jump immediately upon creation so that in our room you can see that he'll jump up and then he'll be able to land on that window let's go back into our object and you'll see that this room editor tab stays alive as when we switch between our workspaces so you can click on the minimize here to get rid of that now when we get created when the player gets made what we want to do is have them jump straight up so there's a lot of different actions here and all of these actions are useful for different things what we want to do is actually move when we get created so we're going to scroll down and we're going to find movement and we're going to find the set speed action and drag it into here now this is a code block it tells you the name of it and then it's going to have some properties that we can set it's also going to list all of them over here and this is going to be the code that actually gets run game maker is going to translate your blocks into code that then runs exactly the same as if you were coding so for the most part you're not gonna have any worse performance when you're using drag and drop which is awesome so you can make full customizable awesome games using drag and drop and now we need to set our speed to vertical and we need to tell it to jump up but what is up inside of game maker because it's probably not exactly what you think so let's go over back into our room and take a look at this because our room actually has coordinates that we can look at and see change as we move our maps around so down here near the bottom left section these coordinates are the x and the y now game maker starts in the top left corner with x and y being zero and as you go to the right x increases and you can see that with this ruler up top and on the side as we move to the right x increases so it's going from zero and it goes all the way up to 1080 at the very end unless you get off of it then it keeps going but 1080 is the maximum width for our room then for the y-coordinate as we go down y increases so in game maker it's a little confusing at first but top left is zero zero going to the right increases x going down increases y so if we actually want to go up when we start we need to give our y our vertical speed a negative value now this is not intuitive when you're starting out when i first started it took me quite a while to figure out that if i wanted to go up i needed a negative y value and that's just normal when you start there are some things that are not going to make sense that you're going gonna mess up on don't get discouraged you can do it just don't give up ask questions look for answers there's a great community out there you can check out yoyogames.com jump into the forum you can check out youtube reddit the gaming communities out there are awesome there are lots of discord servers the resources available to you are nearly limitless so if you get discouraged if you get frustrated if you get confused don't give up look for help and know that you are not alone in that so now that we know we want to go up with a negative value let's go ahead and go back into our workspace and we're going to set the speed to negative 35 so now when we start our game is going to set the player to go up negative 35 as a speed and let's go ahead and test it out so if we click on this triangle button for running or we can press f5 it's going to run our game for the very first time and wow there he goes he went straight up and he's gone that's not exactly what we want but it's a good start what's also cool is when you run your game it saves it i recommend saving your game pretty often and by running your game it saves it so it kind of does two things in one which is really nice so when we ran the game our player's speed was set to negative 35 pixels per frame but the problem is it was set to negative 35 just one time but then it was just always negative 35 so it just kept on going what we need is a gravity so gravity is in movement here but if you're unable to find it you can also search so what we want to do is search for gravity so then we have set gravity direction set gravity force set friction and then some particle gravity which we don't need what we want is the set gravity force so i'm going to drag this in here and now you can see that these are connected so this is all going to take place at the same time now we're going to do a force of one but definitely experiment with your game because this is your game so change the speed values change the gravity change everything we do inside of here to make it exactly how you want it to work so let's go ahead and run the game one more time and now we'll see that we go up and then we come down because the gravity is applying a positive y value of one every single frame of our game and our game is running at 60 frames per second so that means that after one second we're no longer going up we're actually going to be going down so what we need to do next is be able to control our movement and be able to actually collide and bounce with the windows that way it gives us more of a jump when we hit them and we don't just fall right through them to set up movement for our player let's add two new events we're going to go to add event key down and this is important you want key down not pressed not up key down will be triggered for as long as the key is being held down pressed will only trigger once and key up will only trigger once when it is released so if we want to be able to continually move left and right while holding down the key you need key down and we're going to add left then we're also going to add the same thing but right so in the key down left which we can actually switch between these tabs right here which is really nice in the key down left what we want to do is set an instance variable so find instances and then we're going to look for this one right here it's called set instance variable so what this is going to do is exactly the name but let's break that down so we're going to set a value to an instance which this object in the game will be an instance remember if we have multiple players we can give them different values multiple windows can have different images attached to them and so on so this is a specific instance and then a variable is a piece of data that holds data and in this case we're going to sign the variable for the x-coordinate so where we are along the x-axis we want to change it we want to give it a value of negative 15 and then we want to check relative what this is going to do is take the x coordinate of where the player is so if we jump back into our room and i zoom in by holding ctrl and middle mouse wheel i can see that the x coordinate is 506 on the player if i move it is now changing as you can see now that data that we're looking at is an instance variable it is built into this object this instance and we can access it and we can set it now what we want to do is move it just 15 pixels to the left or to the right depending on what we're doing but the relative portion is what makes that happen because if we did not click that little relative box inside of here what it would do is it would set it to negative 15 specifically so we're here in the middle of the map but if we set it to just negative 15 without relative we would get pushed all the way over here and pretty much off the level he'd be right there because this is negative 15. so don't skip checking relative otherwise your player your object your instance is going to just move and you're not going to want it there okay we've got negative 15 relative and this is for x now let's go into the key down right and do the same thing so go to set instance variable and we're going to do x coordinate but this time it's going to be positive because we're moving to the right and we're going to do relative now that's going to move us to the left and to the right but we still have no way of bouncing on the window so we can run this but we're just going to fall right down so let's get our bouncing setup and then run it one more time to set up a collision with the window we can actually use a collision event so click on add event go to collision objects and we want to collide with obj window this code will trigger whenever we have a collision with that window and we'll make it so when we collide we jump up but to do that we first need to talk about masks because masks are how we determine collisions in game maker studio so let's go and open up spr window and take a look at collision mask so right now the collision mask is the size of the sprite and if i uncheck this for just a second you can see that there's actually a little bit of transparent pixels down here and so the collision mask is going to be as large as the sprite is itself and that is not what we want because otherwise when we collide it's checking for everything inside of here so what we need to do instead is set up a custom mask so let's go to mode we're going to go to manual and we're going to keep it as a rectangle but then we're going to drag these points you can just click on it and move it and what we want to do is just do it right inside of the ledge so i'm going to control middle mouse wheel zoom in and i'm just going to move these dots until they are only covering the ledge and then i'm going to middle mouse click drag it over here and do the same thing right here now the collision mask is set properly and we can now collide with it but we also want to change the collision mask for the player so let's open up the player open up collision mask we're going to change it to manual and this time we actually want it to be just like the lower third of our player so we're going to just bring it down here bring it in a little bit right about there now when we check for that collision it's only going to be in this bottom portion where the firefighter is jumping not the entire sprite against the entire sprite with a lot of empty space inside of there so let's go ahead and add in the action for that collision so let's return to obj player and in the obj window we're going to do the same thing that we did in the create except for setting gravity we're going to grab the set speed the direction is going to be vertical and we're going to do negative 35 and so now let's go ahead and give it a try when we run this our player now collides with those windows and it works out exactly as we want in the way i have it set up he hits the first one then hits the second one and the third one really really quickly but in yours it might look a little different but the idea is now it's working we have that collision and it is exactly what we want it to be you can increase and decrease the speed of that collision so that they go upper higher lower whatever you want remember this is your game customize it however you want the next thing we're going to tackle is actually the flipping of our character when we move left and right because right now you'll notice when we move to the left we're still facing to the right which isn't what we want the cool thing is we don't need another sprite for this we can actually just change the x scale when we're going to the left or the right the x scale and the y scale are ways to flip and change and shrink and grow your sprite and so by giving it a negative x value we'll be able to face to the left when we're moving left so let's go into our key down left and inside here we're going to search for set instance scale so it's going to be inside of here and what we want to find is this one that kind of looks like pac-man running along a ruler we're going to grab this and we're gonna set this to a horizontal of negative one and this one does not need to be relative now we need to come into the key down right and actually do the same thing except put it back to one otherwise it's always going to be facing to the left now we'll just have a reverse issue so up here in recently used since we just used that code block we can now just drag that in and it's now set to 1. so if we run this now if i move to the left i'm looking left and right and that's exactly what we want now if you did not set the origin correctly on this guy it's going to look super weird and i'm going to show you that because origin issues are very very common so if i put this back to top left and we run this up until this point everything has probably been normal for you but now you'll see that your character just warps because the origin determines where it gets flipped on the x and the y scale so whenever you're changing the x and y scale to flip a sprite around make sure that it is in the middle center for it to work properly before we jump more into making our game let's take a quick break and talk about the game options that might be really helpful for you to know about if we click on game options here it opens up a menu of all the different available options that you've got now i might have more than you do but the ones that we are going to share are the windows and the mac and the ubuntu and the main so what we want to do right now because i'm on a windows i'm going to click on windows and it's going to open up a new window inside of here is i'm going to go to graphics and i'm going to click on interpolate colors between pixels and allow window resize so this is going to allow us to actually change the size of the window which we have not been able to do so so you might have been finding it kind of difficult to see the entire game and now this will fix that and then you want to have interpolate colors between pixels checked so that graphics are smooth and not jagged if you're using pixel art you don't normally want this but we're using full resolution art so it'll look a lot nicer and then you click apply and if we run it now we'll actually be able to see the difference and then you can drag the sides of these and shrink it down and it will fit now if you don't keep it the exact same scale or resolution then it's going to add some black bars on it but that's not a big deal this just allows us to be able to see this much easier and i think that it looks really nice just like that so those are some useful options that are good to know about let's go ahead and click ok and close that window out so what we're going to do next is tackle the big problem of view scrolling because this is supposed to be an infinite platformer and right now we go right off the top if we go all the way up there and that's not going to work for our game so when we're playing it what we want to do is give the illusion that our player is moving but in reality we want the player to be in the middle of the screen and then have everything else go down when the player appears to be going up so it gives the illusion the player is jumping but really the world is kind of falling and in that sense the player is always in the middle of the screen and we can create new objects up here which then get brought down as the world falls down so to do this we need to be able to move lots of different objects at the same time and a really great way of doing that is what's called parents so let's tackle object parenting first so i'm going to come over here i'm going to minimize quick access and i am going to minimize the room editor now in objects we can create an object specifically for parenting and what this does is it allows one parent's to then run on multiple objects their children so let's go and right click and we're going to create an object a parent object is just a regular object we're just going to add some children to it so i'm going to call this obj underscore move underscore parent so we're going to assign several objects here because we're going to have more than just the windows we'll also have civilians and fires and things like that so we're gonna have many different children for this one parent so to do this i'm gonna click on the parent and then i'm gonna click on add a child so i'm gonna go to objects and i'm going to select window now we're not going to ever put this parent object inside of the room because it doesn't have a sprite it's not meant to be in the game it is just meant to allow us to have one set of code run on multiple objects so when we get this system set up for the windows working properly when we add in new things we can just add them as children to this parent and they'll also work exactly the way we need them to now let's go back to the obj player you can double click on it here or just scroll around until you find it and we're going to add a new event and this is going to be the step event click on just the regular step not begin or end and the step of it is a special event because it is going to run essentially without an event the step event runs 60 times a second and that means that it's a little different than these other ones like the create or left where the player might actually be interacting or doing something to trigger the event the step event is just going to run all the time and that means the code inside of it will also be continually running unless we create a condition for it now the step event is extremely useful and you might already be wondering like well why do we want it if it has these issues where it's just going to run code on its own why don't we use other events and that's because a lot of times in your game you need to check immediately if something is happening or you want to check around to prepare for something to happen and the step event allows you to do that because it's going to check everything so often you can be prepared for whatever happens and so inside of here now we want to add what's called an conditional check so i'm going to search for if and what we want is this first one called if variable i'm going to drag this inside of here the if section of this is is something true or not true or does it meet this condition and then if it does we're going to run some code the way i like to think about conditionals is just like in real life imagine you're going to go for a walk but you don't know what the weather is like so you open the door and in your mind you've already got a condition set up if it is nice out well you're probably not going to need an umbrella in a jacket if it is raining you will grab an umbrella and a jacket so the condition what the weather is changes how you react and that's going to be the same thing in this code if the variable is what we're looking for then we're going to do x and if it's not then we'll do y and the step event will check that 60 times a second and so it might change what it does depending on where we're at and this is going to allow us to create this infinite scrolling that we need for our game to work so in the variable field we're going to put v speed remember v speed is a built-in variable so it's data about our player that is already inherent to them and we've already been setting it that is what this vertical speed set speed is doing it is setting our v speed variable so now we just are going to check what that value is so if v speed is less so change it from equal to less and we want it to be zero if it is less than zero then here's what we're going to do search for declare and what we want is declare temp and now when we drag this in make sure it goes on the side here if you put it underneath it is not going to be the condition that we do when this is true so if we put it on the right you'll see this arrow here if we don't it's going to look different and this is not what we want so make sure when you drag it in it goes to the right now i'm going to go ahead and press this full screen button and this is going to give us a lot of room to work with because we're going to be adding in a few more things here if v speed is less than zero we are going up remember when we are going up our v speed is a negative value and negative values are less than zero so if it's less than zero we're going to create a temporary variable so this is only going to exist in this step event that temporary variable is going to be called downspeed and the value we're assigning is negative v speed so remember v speed is what we've been talking about this whole time it's where we are going up and down and how fast we're moving what we're doing is temporarily saving that negative value so the opposite so when we are going up we want to save that number in d speed but then the opposite of it and this is going to allow us to then change the speed of other objects that should be moving because remember the whole point of what we're doing right now is to create the illusion of scrolling for our player with an infinite world by moving everything except the player so with this we can now go in and we're going to set some data on our obj move parent which will then move the obj windows and anything else we add into that as a child so we're going to drag set instance variable so i'm just going to search for set instance variable it's actually going to be right up here because we've already used it but when we drag it in just make sure that there is a little connection from declare temp into that because that means that this is all running only if this variable equation is true now we want to set the y-coordinate to down speed right here and we want to make it relative but let's quickly take a moment and follow this through because where we're actually at is in the obj player event we're not actually in obj move parent which means that setting our y coordinate to down speed is going to set the player's coordinate to down speed and that's not what we want we want it in the parent but fortunately that's pretty easy to set clicking this little arrow here will set where we are actually applying this information to so we're going to go to objects and set this to obj move parent so now that's what this is actually going to move and if we run this now we'll see that we're about halfway there it kind of works when we jump they go down so the issue right now is that all of them are moving but the windows should only move if the player touches the upper half of the room so to fix that we're going to add another conditional check which is our if variable block we're going to drag one in put it up top here now we don't want it to look like this we actually want to basically have two if statements in here we want to check to see if the player is at least in the top half of the room and then if they are if their v speed is less so to do that we can actually drag this bottom one so the variable v speed we're gonna drag it we're gonna put it on the side of this one so now we have two checks the first check we want to do is actually checking the y-coordinate of the player and if it is less then room underscore height and you can see that it was a built-in variable right there divided by two so there are a lot of built-in variables and data that game maker itself stores that you can access if you're unsure of what is available you can sometimes just start typing things out so if i type in room you can see all of these built-in variables right here or you can come up here to the help and open up the manual and the manual is first rate this is what i go to all the time so if you're on ever unsure about something check out the manual and you can just read through it it's got great detailed explanations of every code block you can use all of the built-in values and how everything works inside of game maker so the first if statement is variable y is less than room height divided by two so when the player is up here we are now in the top half of the room so the room height is 1920 and so 1920 divided by 2 is 960. so that means that when our y-coordinate is above 960 so you can see the y-coordinate changing changing and right about there so only when we are above this spot right here is our whole bunch of code actually going to run so i'm going to move my firefighter down here so the last thing we need to check right here is that once we get to that upper half of the room we want the player to essentially stick to the middle so we don't want to be able to go any further we want them to stay in the center of the room and to achieve that we're going to add one more set instance variable to this whole conditional check so we're going to grab this put it down here and this time we're going to affect the player not another object so we don't need to do that we're going to affect the y-coordinate and we're gonna set it equal to room height divided by two one more time and now when we run this we'll see that the room only changes when the player is at least halfway above it so you can see on mine it went immediately through there but the player is not halfway up in the room here so we are no longer scrolling and that's exactly what we want and so far this has been working really well we haven't encountered any errors but maybe you have because you've mistyped something or put something in the wrong order so let's say we did type something incorrectly up here on the if statement we want room height but let's say i forgot a t and we tried to run it now the game is going to try to compile and it's going to start but then it's going to fail right here and it's going to bring up this code error so it says variable obj underscore player dot room high note not set before reading it this not set before reading it is one of the most common errors that you'll find when you're starting out programming and that's because you're trying to use a variable that doesn't have a value so room height has a value game maker knows what it is room high does not so it's trying to divide room high by two and as soon as it attempts to do that it crashes because room high has no value that's what it says it's not set before reading it and what's really nice is it actually tells you kind of where it is so this also gives you the line numbers which isn't as helpful in drag and drop when it's gml there's actually line numbers you can see which is pretty helpful but this does tell you exactly what's causing it so if y is less than room height divided by two so we know it's an if variable and we know the value that it's trying so we can find that right there and fix that once we fix that back to room height it's good to go so debugging your game is going to be something you'll do along your entire development journey it's something that i still do all the time learning the skills how to do it and have the patience to do it is valuable when you're starting out because the bugs we make now are fairly easy and if you get good at finding them and fixing them the ones we create later on will have the skills to know how to fix now to make this look a little nicer we're going to add in some background scrolling because right now we've got these beautiful tiles in the background but they're not actually moving when we move which isn't exactly what we want and to access this we've got to do things a little bit differently because the background we've got here is just a layer it's not an object but fortunately there are built-in properties and ways to be able to manipulate it just like everything else back in the step event we're going to search for a code block called function call and then drag that function call into this long if statement so the function we're going to use is called layer underscore get y and you can see that there are a lot of functions there a function is a predefined set of code it's an extra action that we can use there are a multitude of functions they do all sorts of things but essentially it's a set of code that you can just quickly call by name so we're going to call layer get y and then we're going to pass in an argument an argument is simply an option for a function sometimes there are lots of options sometimes they're required they're called arguments you just got to get used to that so what we want to do is we want to pass in background because the layer get y this function does need an argument called background because what we're going to change is this layer we're going to get the y position of the layer for background so if we change this name of the layer then we would also have to change the argument we're passing in here and also note you do need these quotation marks around background this is the name of the layer and those quotes let gamemaker know it is an actual name to look for it's not a variable like a temporary variable or a built-in variable that we're actually passing in as an argument so those quotes are essential without those it will not work and then we're going to save what that value is in a variable that we call back underscore y and we'll do that as a temporary variable and then we're going to add in one more function call down here so we got the y position of our background layer now what we're going to do is actually set it with the function layer underscore y we're gonna pass in background one more time and this one actually takes two arguments so we're gonna click this little plus and it adds another argument for us to have and we're going to pass in back underscore y plus down speed so we're going to get where the layers at and how much we are moving and we don't need to set a target for it this time so now with that set our layer is actually going to move as we move which is really cool and it looks great and it's moving by down speed which is how much we're moving although it's the opposite of what we're actually moving so it goes up instead of going down that would look real strange so if you forget the negative here then when you do this it's going to look uh yeah that that's definitely not what we want so don't forget the negative value in v speed here and make sure that you're adding these two together tiny little mistakes like that can completely wreck the code you are trying to write inside of here the nice thing is you can go back and watch this video start over or you can just download the finished project which you've got with your assets and compare their code to yours to find that mistake so now we're getting close to being done with this first part we've got a game that is starting to come together we can jump on these windows it really looks like we're moving up but we've completely created that illusion by this step event everything else in the world is actually moving down and we're just moving up a little bit and that's really really cool it is a great illusion that you can set up for an infinite platform work any kind of infinite game that you want so the goal with the window spawning is we're going to check to see when a window is outside of the room completely so when it has pushed all the way down we're going to take that window and then we're going to just put it right back up top just in a different spot along where we set the parameters here so we don't want a window to be too far to the left or to the right i go it's your game you can definitely put a window all the way over here on the right if you wanted to be a big challenge but what we're going to do is take the window that's down here it's been pushed all the way out and then we're going to put it right back up here so i'm going to move everything here so that it's all set up here we're going to just get these set up in a way that i think will work for what we want and then let's go into obj window and we're going to set up a system where it checks to see if it's outside of the room and if it is then we're going to move it back to the top so in obj window let's add a step event i'm going to make this a little bit larger and one thing that we have to note here is that we can't actually just check the y position of our window because remember we changed the origin of our window to be all the way down here and so if we're only checking the y which is where the origin is at then our window is actually going to be still in the room by a considerable amount so if we zoom into one of these windows and i bring it down checking the y this would be outside of the room because that's where the origin is so instead what we have to do is check y plus whichever amount is remaining here i'm going to press control z to put that window back so let's go to spr window and we can just get a quick idea of how large this is we can see the height of this is 587 the origin is at 370. and so what we can do is add a larger number to that y and then if that y plus that number is outside of the room then we'll know that it's completely gone and it's fine to move it it won't just like disappear from the screen because it'll already be outside of the room you can't see objects or sprites outside of the room and so once it's there you want to either destroy it or in this case move it back to the top so we're going to use 360 as a number just to make sure that we are all the way outside of the room so in obj window we're going to add an if condition right here so an if variable we're going to check to see if y is greater and this time we're going to check room height plus 360. and so now when this is completely outside of the room we can move it back to the top but we don't want to just take the window and put it right back at the top otherwise it's going to be the same set of windows for the entire game and that's going to be very boring and so what we want to do is add some randomness to our game so let's go back to obj window here and search for random and we can use this get random number and make sure it's on the side with this line leading down to it and what we want to do is grab an integer so it's a whole number and we want to not have it be too far to the left or too far to the right now it's your game so if you want to make it really challenging change up these numbers but i'm going to put 200 as a minimum and as a maximum we're going to do room underscore width minus 200 so we don't want it too far on the left so it's got to be at least 200 pixels in and we don't want it too far on the right it's got to be at least 200 pixels away from the edge and the target we're going to save this in underscore new x or a new underscore x as a temporary variable and then we're going to tell this instance to move there and we can do that by going to movement and we're going to do jump to point and it's going to be right down here so the x coordinate that we're going to move to is new underscore x we saved that we know we want it to go right there and we're going to put it at negative 200 above the level that way it's not spawning in right at the top and not too far away so now let's go ahead and check this out if we hit these windows they will move down we will go up and new windows will get added in but this window is way too high and that's partly because of how i've designed it so let's go in and compensate for this issue inside of our room we don't want these to be too far so i'm going to toggle this grid back on and this grid allows us to snap these windows into place so i don't want them to be too far apart so i'm going to bring them down a little more and with that i also might want to add in a few more windows so i'll do this this isn't going to be an exact science or anything but i will put a few more windows in here and now if we run this we'll be able to just jump and run forever there we go and you can see that they get put randomly where they're supposed to go but we do have one issue which is we are just jumping forever and ever if we are colliding with that window while we're going up and that's not exactly what we want unless of course it is remember your game but for what we want to do we want to make it so that we only jump when we are coming down and colliding with it so that means another if variable which we've already used and that idea is exactly the same even describing the problem you might have already figured out the solution if we are going down then we activate the collision so let's go to obj player actually we have our own tab over here so let's open up that tab and we're going to go to collision obj window we're going to add in an if variable here and then we're going to drag the set speed over here on the side so if v speed is greater than zero that means the player is actually going to be falling down because when it's negative we're going up when it's positive we're going down now when we run this we don't have this issue anymore so we have to actually land on the window for us to do it and that is working perfect again if you're not able to collide with these just right if they're too high or something make sure you bring them a little closer together you can try spawning them a little closer to the screen if you want to or a little closer to the room those are all things that you can play with and we are just about done with the first part of fire jump the last thing we're gonna do is add in the street area so just a little bit of polish for where we start the game at so we've got a really cool sprite with a fire truck in it so what we need to do is bring that into our game so i'm going to right click on sprite i'm going to create a new one i'm going to import this spr street i'm going to rename this to spr street and this is where we're actually going to start the game at so let's create a new object for this sprite we're going to call this obj underscore street i'm going to assign that sprite to it then under parent i'm going to click on this and this time i'm going to click on no object and find the parent i want this is another way of assigning parents and you can verify it by opening up your parent object and now we have two children under there so this street object is going to move away as soon as we start it's going to act out the exact same code that the parent has and so now the last thing we need to do is just put in this obj street into our level so i'm going to go ahead and delete this bottom window and drag in obj street here i'm going to take off the grid so we can just align this straight up to the bottom here and then i'm going to move this bottom one the bottom window just above and put the grid back on i'm going to move it just above the fire truck i'm going to put the player right here in the middle of the fire truck below this window so they will hit it and then let's design these add in one more window up here just in case we need it and then we can run our game and we'll be all set now we have a scrolling infinite platformer that looks great and plays exactly like we want so that's it for this tutorial but in parts two three and four we're going to be adding in a lot more stuff like rescuing civilians adding a high score putting in a hud a menu sequences and more so make sure you stay tuned and check out those parts to complete your game because you are on your way to making an awesome complete game with drag and drop in game maker studio if you've enjoyed this hit subscribe and the like button and as i always like to say keep making keep learning and i'll talk to you later

Channel: GameMaker

Views: 22,986

Keywords: YoYo, Games, YoYo Games, GameMaker, Game Maker Studio, GameMaker Studio, game, maker, GameMaker Studio 2

Id: AddMK8S9m6g

Length: 69min 17sec (4157 seconds)

Published: Wed Oct 06 2021