Platformer Tutorial (GML) - Part 1/2

hello everyone I'm Sean Spaulding and in this two-part tutorial I'm going to be walking you through building a simple platformer and gaming studio - and part 1 I'm going to show you how to create a simple framework for a platformer game tackling those tricky beginner topics like collisions and gravity and in part 2 we're going to dress it up with some fanciful artwork and pretty animation so here we are looking at a blank project this is a GML project so when you hit a new project make sure you selected the game maker language as the default action type for your project so the first thing we want to do is bring in a couple of sprites one to represent our player and want to represent the walls and floors that we're going to be walking on so I'm going to go into sprites and hit right-click and hit create sprite from images this will just bring up a file explorer so we just find an image and bring it straight in as a sprite where you will access these depends on where you're watching this video if you're watching the tutorial in the IDs and there'll be a link in there for you to get these assets if you're watching on youtube it'll be in the video description or if you're on your games website and you'll be in the blog post I just have all of these images in a folder on my desktop so it's very easy access I'm gonna bring in this one here called s player okay yeah the smallest annex pright and player obviously being player bring that in and this is our player sprite okay I'm gonna wear it says origin here rather than I could set this manually if I want just by clicking around this determines kind of a center point of the sprite I'm gonna click on this drop-down list here though and select middle center which will just automatically calculate the coordinates needed to be exactly in the middle of the image and that will do is just fine make sure you name this sprite I'm gonna call s player it doesn't know what your naming convention is for your sprites and objects as long as it's consistent I named mine via a single lowercase letter representing what type of resource it is and then just a helpful capitalized name afterwards so it tells me what that thing is so this is a sprite so a small letter S and it's the player so capital P player okay I'm gonna bring in another sprite so again hit create sprite from images and I'm just gonna select s invisible wall yeah okay and you see it just brings in this red a box with some transparency in these walls are not actually going to show up in the game but they're going to be used by users in our platform or just to mark out areas where we want to be able to walk and we'll put the artwork at the level itself on top of them later okay so I'm just gonna call this one s invisible wall as it was named in the image if you want to you can also reposition the origin on this sprite I just leave this one in the top left it doesn't matter too much for the invisible wall where that origin goes once you've brought in these two sprites and that's all we're going to do with sprites and artwork for this part we'll be focusing on all the fancy animations and stuff like that and getting them set up in part two we just need the basics in so that we can represent our player and the game world in a very simple way so go ahead and close those once they're both brought in the next thing we want to do is create two objects again one for the player and one for the wall the two surprises we just brought in so go ahead and right-click in objects and hit create object I'm gonna name this first one Oh player so again Oh for object and player for player we're going to assign a sprite to the object and that sprite is going to be that player sprite that we just brought in now before we get started on any of the logic flat player let's go ahead quickly and make the object for the wall so again make another object right click object hit create object or even press alt oh if you want and we're going to call this one Oh wall and select the sprite s invisible wall if we now come through to a room 0 under rooms this default room will be created for you every time you make a new project in game maker I double click that it'll bring us to the room editor and so this creates all of our levels and screens in the game and we already have a couple of layers set up for as instances and backgrounds so let's just dress up the room a little bit so we know what to expect from our game so with a wall selected and also the instances layer selected I can hover my mouse over the room and hold the Alt key and you can see the wall will appear under my cursor and I'm just going to place a handful of these around the room what I can also do is just sort of stretch them they're gonna be invisible walls anyway so it doesn't matter if they're kind of like stretched out a bit just to kind of create a hypothetical little platform level okay we'll just create like a little jump that you have to do something like that and then we'll also bring in our player object in the same way so click on player hold alt and we'll all pop them over here now we can't really see a lot of our player sprite that's in black against a black background so just temporarily I'm gonna go to the background for later here and show you how you can just change the color so you see here where our color is black on this background layer I can just click that color and just I don't know we will just change that to some sort of nice light teal or something just so we can see what's going on there we go now I can see the player now we've written no logic for this game but we've placed some things in the game world so if we run our game at the moment we'll just end up with a window that shows well exactly this ok so there you have it there's a there's our game it doesn't do anything yet with a card character we've got some some walls down here but that it can't move around or do anything so that's what we're going to set up next so I'm gonna double click on a player to bring us back to our player object I can fold away this room editor tab now as well as we don't really need that right now and I'm gonna go to add event and hit the create event and in case you're very new to game maker remember that this is fundamentally the key to how game maker projects work okay you have events and then you have actions over here events are when a certain thing happens and then actions are carry this out as a result okay so when this object is created do these things and what we want to do in the create event for our player is establish some key variables and if I write this in the code here and then we just made this nice and big so you can see in fact we'll will fullscreen this if you write two slashes you can write this green text that is just a comment that isn't processed code at all and if you write three slashes and an @ symbol and desk at the very start of a block of code and write something in there when you look at it from the object that you can see that description has come up next to our event here so create established and key variables it sort of labels it for you so that's quite handy now all we're going to do is establish some key variables I'm going to create the variable H SP which is going to represent our players horizontal speed start to zero VSP for vertical speed gr V which is going to be our gravity okay it's important to use that by the way and not gravity or one way because that's a built-in to the game they can we're going to handle gravity ourselves in this tutorial so gr V equals not point three accelerator point three pixels of frame downwards walk SP which is gonna be our walking speed so how many pixels our frame we move left and right when we press the right key and jump SP how quickly we can jump which is gonna be say nine pixels a frame when we press the jump key it's gonna be a nice big number so we get a big initial jump and now as you type these you'll get these little warning symbols coming up next to it and if you hover over it'll say variable HSB only referenced once and that's just to help us now later on in code if we were we've run a bunch of code and we'd made a variable somewhere that we never actually used its that'll Warners the or we've got a pointless variable essentially of course they all say that at the moment because we've only just established them they're not there they're only referenced in this one place and then every used anywhere else that's fine those will go away once we've done some more code okay so now that I have these key variables in play we can go ahead and start working on the name game logic for the player that's going to be in a different event though so this is the create event as I said just when an instance the player gets made for the first time in the room we set these up and then we don't do it again I'm going to come back to the player object and add the step event okay that's in step and step not begin or end step just a regular step the step events are a particularly special event it's the only event that kind of happens by itself all right the step event will happen every single game step which how many of those there are and how fast they are depends on the frame rate of your game if you go to game options you'll find that by default your project is set to 60 game frames per second I recommend leaving it at that and that means anything we do in a step event for an instance will try and carry itself out 60 times a second okay so it can be very dangerous to put some things in here that you'll end up you know doing things 60 times a second you don't want to but it's also a very very useful place for creating the bulk of our game logic so the things that we want to check regularly like checking whether or not we're pressing keys or colliding with things physics and so on alright very very useful event so you might be wondering as well on how I get this to automatically appear in my code editor okay on this labeling thing for my event if you go to file and preferences and go down to object editor you'll find default event content I can't remember what it says by default and game make studio - I think it says something like you can add your own code to this editor I changed it to be the three slashes and ant desk that you need in order to create a label for the event that's the most useful thing I find to have automatically in event you can turn it off entirely just untick this at default event content and then you'll just get a blank code editor every time if you want but I find it useful to have this so I can quickly label my events this one I'm gonna label a core layer logic that's basically what's going to happen in here we're going to do all of our inputs physics grab so on ok we're going to do all of that in here I'm gonna maximize this now cuz this is basically where we're gonna be working until more or less the end of the tutorial and so the first thing I want to do in here is get our players inputs okay so that's reading which key is on the keyboard or player is currently pressing and that are important to us and react appropriately so I'm going to type another two slashes for another beam column and just write again player inputs just to remind ourselves as the programmer what we're actually trying to do in this next section okay so it's useful but now we're gonna keep things simple in this tutorial and only check just the arrow key is the left and right arrow keys and our space bar right so move left and right and jump that's all we really need to do the way we do that is by creating a couple of variables that are updated every frame with whether or not we have pressed a certain key okay so I'm going to type the key underscore left equals okay just creating another variable and this variable is going to be updated again in the step event so every single frame with keyboard underscore check open brackets VK left so keyboard check is the function that checks a certain key and we provide VK left which I think it's virtual keyboard left or something like that which checks our keyboard to see if this specific key is being pressed and that represents our left arrow key okay and if it is being pressed a key left will equal true and if it's not key left will equal false okay and that'll be useful to us later on then I'm gonna right key on the score right equals keyboard underscore check I'm just going open brackets VK underscore right close bracket semicolon which does the same thing with right arrow key then key underscore jump equals keyboard check breast this time VK underscore space so I've written a slightly different function for this one keyboard check as I said tells us whether or not left is currently being pressed or the right-arrow key is currently being pressed or not this checks to see whether or not this key has been as just been pressed this frame okay so if you're holding it down and the space bar is down but it was also down on the previous step then it will return false but if you pressed it just on this frame so we've press spacebar and on the previous frames baseball wasn't pressed then it'll return true okay it's very handy and so it just tells us the it's so that we don't keep like repeatedly jumping just by holding the spacebar okay we have to specifically press the spacebar in order to jump okay it's just useful to demonstrate that okay so now every game step we have calculated whether or not by pressing left right or the spacebar so now what are we going to do with that well we are going to calculate our movement okay based on whether or not we press in those different keys so I'm gonna create a new variable I'm gonna create it in a slightly different way I'm gonna type a var and then I'm gonna create the variable underscore move okay when you create a variable using var I mean you see this turns like a yellowy color it means this variable is script local okay so it means once this step event once this whole script is carried out we ditched that variable because we don't need it anymore it's just removed from memory at the end of the script okay it can be very very useful for variables that you don't need to hang on to okay so you don't want to have them hanging around in memory there's all the different kinds of uses as well which you'll discover as you learn more about game maker but for now that's all you need to know move is gonna store whether or not we want to move left or right on this particular step that's why we don't really want to hold on to it as a variable okay so I've established as a temporary variable or local variable is it's technically called using var if you're also wondering why I put an underscore at a start that's just my naming convention for any var variables temporary variables just to distinguish them from my other variables I always tend to put this tool underscore at the start okay so underscore move is gonna equal key right - key left now this might be a little tricky to get your head around but it's a simple trick for working out which way we want to move based on these keys and boiling it down to one variable what I want to do basically its end up with either one and move if I'm moving to the right or minus one and move if I'm moving to the left how do I do that because I said we get true and false in these two variables right and that's true I put true and false the way they work in game maker is they're also equivalent to 1 & 0 ok and how it works in a lot of programming so if something is true it is also 1 and if it's something is false then it is 0 so think about this if we are holding the right arrow key and we're not holding the left arrow key that would be a 1 - 0 so it would give us 1 so we're moving to the right if we're holding left and we're not holding right that would be 0 minus 1 giving us minus 1 allowing us to move to the left if we are holding both keys down that would be 1 minus 1 which would give us 0 so we don't move in either direction okay so they kind of cancel each other out in that regard and if we're holding neither of them 0 minus 0 same thing ok the reason we want it to be 1 if we're moving right and minus 1 of them moving left is because of how coordinates work and GameMaker so the further to the right we are in our room you can see if you look in the bottom left corner of the room editor our x-coordinate it moves up as you move further to the right okay so by increasing our x-coordinate we're going to move to the right and by decreasing it we're going to move to the left ok and for y if we increase it we go down if we decrease it we go up which will be important and a little bit so just come back here to our game logic so that was very simply just oiled down I'll left and right arrow keys to whether or not we want to move left or right on this frame very useful so we're going to take HSP that variable that we declared earlier to represent our current horizontal speed to equal underscore move multiplied by a walk SP which is our walking speed which you'll remember we set to four okay so if we're moving to the right we'll have 1 times 4 so we'll move 4 pixels to the right and if we're moving left we'll have minus 1 times 4 we'll get minus 4 moving to the left now I can quickly just demonstrate this working if I just write x equals x plus h SP ok so X is going to equal itself plus h SP plus our current horizontal speed if I then run the game with our player currently in the room I should be able to press left and right and move left and right so here's our game and if I press left left and right we move left and right so that's working we know how many growl ready yeah we don't have collisions yet but we've got our first basic piece of game logic in ok so now you've seen how it works we're going to get rid of outline for now we'll bring it back in later when we've done some other stuff I'm going to put our vertical speed into place okay so that's similar to how we did horizontal speed but a little bit different because we're not controlling our vertical speed we're kind of leaving that up to gravity so we're gonna write vsp each frame is going to equal its self + gr V which is that gravity value is set to like naught point three if you remember so every single frame VSP is gonna increase initially at zero then two point three then two point six point nine one point two etc okay so you will get faster and faster moving down that's how we accelerate okay in fact we can then demonstrate that again if I put x equals x plus HSB back in and y equals y plus VSP we should see I won't be able to move left and right for very long when this runs because I'll just fall straight through the floor but you'll see we fall from our starting position now see there we are and I move the tiny bit of the end level right but you can see how we fall now thanks to gravity so the main thing for us to do next is to implement some collisions okay so I'm gonna get real these both these lines again again we will put them back first of all we're going to work out our horizontal Julie okay vertical and horizontal collision and work out pretty much the same way but we have to kind of do them separately so this is the tricky part for most people when they're working on their first platform game they can generally work out this kind of stuff and move their character around the screen and they struggle when it comes to collisions and that's because traditionally when you create say a collision event in a particular object you are checking to see if that object overlaps with another object okay so if its position overlaps another one the thing is by that point when your players hit boxes colliding with a wall object you're kind of too late what you really want to do in your game logic is prevent night collision from happening in the first place so you're not really looking for whether or not a collision is happening you're looking for whether a collision is about to happen and then you want to move as close as you can to that wall without actually going into the wall on a given frame okay because we want to walk on top of the the wall so we don't want to walk like in them right that's the sort of anti intuitive part of doing collisions in a platformer game that's what makes people kind of struggle with them a little bit once you understand it it's not too bad so how are horizontal collisions work or we're going to type if okay open bracket place underscore meeting open bracket X plus h SP comma Y comma o wall close bracket close bracket and this here I put a wall but whatever you've named your wall object you can put in there okay so f obviously just says you know whether or not this statement is true carrying out the things below it a place meeting will essentially place you can think of it as placing a virtual copy of this instances hitbox so our players hitbox at these coordinates and seeing if at those coordinates a copy of our hitbox would overlap or collide with this object okay that's the easiest way to think of it and if it does then it returns true and if it doesn't then it returns false so what we're doing here is before we actually move via our horizontal speed we're checking to see if the position we would move to via our horizontal speed contains a war and if it does we need to do something about that so come under here and open up curly braces for our if statement and what we're gonna do is then type while what a while statement does it's sort of similar to an if statement and that you know we declare a condition and if that condition is - we carry out what's in the brackets but the difference between a while and and if is that a while statement will keep running the stuff in its brackets over and over and over again until the whatever statement you powe in front of the while is no longer true so you have to be very careful with while statements and make sure they they do actually end up becoming false otherwise you get an infinite loop in your game or just a freeze and crash and that's no good at all so what we're gonna do is check while there is no collision like one pixel in the direction that we're trying to move we're gonna move one pixel towards with the wall okay so we're going to try and move as close as possible by moving one pixel at a time towards the wall so by putting an exclamation mark that will inverse our condition it basically means not all right so while not place underscore meeting open brackets X plus sign HSP and always point out a second comma Y comma o wall close bracket close bracket okay so again we're checking for a potential collision a particular set of coordinates this time an X plus sign HSP what that does is sign returns a 1 0 or minus 1 depending on whether or not the value you give it is positive or negative so if I'm moving to the right this will be like 4 or whatever right and so sign HTP will return 1 if I'm moving minus 4 it will give us minus 1 basically brings us back to where we were before all right so either X plus 1 or X minus 1 depending which way we're going we're going to check that position for a wall and then inverse the result okay so if there is a wall at this position it will return false and if it there isn't one it'll return true so while while there isn't a collision one pixel in the direction we're moving carry out what's in here and what we're going to do is just move ourselves one pixel in whichever direction we were traveling by doing x equals x plus sign HSP ok so we just move one pixel either to the right or one pixel to the left by either adding one or minus one and just keep doing that until one pixel in the direction we're moving there's going to be a wall and we know that will happen because we've already detected that there's going to be a wall somewhere in the floor pixels that we're trying to move right once we've done that we're going to set HSP to be a zero because you know we've hit a wall and then that's our horizontal collision done so once we've done this check and set HSB to zero if we need to we can commit to our horizontal movement so I can do x equals x plus h SP all right and that's how horizontal collision works and basically how vertical collision works is exactly the same so I'm just going to copy this whole chunk of code I don't even going to paste it change horizontal to vertical remove plus HSB from here and write plus a VSP here very very easy to accidentally write HSB or VSP I'll put them in the wrong place so make sure you're doing this very carefully I just follow exactly what I'm doing so I remove plus HSB there and put plus VSP that just double-check it against my code if you want and then in this while statement we're going to remove this plus sign HSP and instead next to the why write plus sign vs b change these X's to Y's change HSP to VSP in both these two places and here we change Y to equal y plus VSP it's exactly the same logic just going up and down rather than left or right okay exactly the same and that is everything to do with our main collisions and commit to our movement so if I run the game now you should see that we land on top of that wall cleanly and and we're able to move left and right on top of that so you see I've landed on the wall and I can move left and right okay so we still need to add on jump in but if I fall off the edge of here you can see like the gravity brings me down and I fall and I land correctly okay now the reason we had to do all of this in the first place is we can't just set a speed to be zero if we just set up speed to be zero we will stop to stewar Li right if we're four pixels away from the wall and we're about to move into the wall and we just set our speed to be zero that's all well and good we won't collide with the wall but we will also leave a gap between ourselves and the wall so that's why we do this to move ourselves as close as possible so we actually land flush against the wall all right so if I just scroll back up here to where our vertical speed was first calculated with our gravity underneath that I'm gonna write a check to see to allow us to jump okay so if an Open bracket place underscore meeting again X Y plus one comma Oh war close bracket close bracket okay so you should be fairly familiar with how this works by now we're checking these coordinates to see if there's a collision with this object okay so with one pixel below where we're currently standing there is a wall so we're standing on the floor then what I'm gonna do is I'm gonna write an to ampersand symbols which represents sort of a logical and you can also write and if you want just do one or the other I'm just gonna do my mm stank's that's what I'm used to open bracket key underscore and jump okay so what this is done instead of doing if this one statement is true is I'm checking to see if both these statements are true okay if this and this are both true okay I would print a couple curly braces like that and what I'm doing here is checking if this if one Piccolo's is a wall and if key jump is true okay and we know that key jump will be true if we press the spacebar okay then all I'm going to do is type ESP equals negative jump SP remember jump SP is like nine and remember that in order to move upwards we need to reduce our y-coordinate so this needs to be negative so we set our vertical speed whatever it currently was in the past because of gravity or because of colliding with a floor or whatever whatever it was we just set it immediately to minus nine and then we'll fly up into the air but every single frame it'll be increased by gravity to bring us back down okay so then we'll come back down and that's everything that I just sort of shrink that down and get it all on one screen there that is all of our players logic for a very simple platform framework so for press f5 now and run the game you'll see we can do all of that stuff we can run around we can jump and we can land on walls and run into walls okay so here I am left-right spacebar makes us jump and jump down here jump back up here it's a little bit tight but we can just about make it and there we have it so there's the framework for our platform game in the next part of this tour series we're going to be bringing in some animation and stuff so we make this player animate when they run left and right jump on four and so on and we'll be dressing up this environment to make it look a little bit prettier than it currently does okay thank you very much for watching hope you learned a lot from this and I'll catch you guys next time

Channel: GameMaker

Views: 107,612

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

Id: 2z4981CxFkw

Length: 31min 30sec (1890 seconds)

Published: Fri Dec 20 2019