GameMaker Studio 2: Complete Platformer Tutorial (Part 2: Animated Player)

hello everybody welcome back to our platform our series today we are going to change our little green square into an actual player sprite we're going to use a three different player sprites one to make them run one to make em jump and fall one for when he's just standing around and we're going to make them change direction and overlap properly with our walls okay so the first thing I'm going to do is actually bring in our new artwork I'm not going to draw that live in these videos I'm just going to bring in some artwork agnate oh yeah it's very simple stuff I just made it using the basic spray tools in game maker so I'm going to go I'm not going to create a new sprite it's going to go to our player sprite s player I'm going to hit the import button and bring in this little dude this dude's going to be our flame I remember him for when I preview the game we're going to make this is going to be our guy John very badly you almost have no arms at the moment but we'll solve that later on when we kind of give them a weapon the players I'm going to leave his origin in the center for now why I'm going to do though is open up collision masks and you'll see at the moment I open that up it draws like a preview gray box around the the sprite that's where it will register collisions at the moment - it just like kind of makes a box and sort of tightens it around the non transparent areas of the sprite what we're going to do though is we're going to make we're going to handle this manually so for this automatic one I'm just we don't want collisions to happen here or here we're going to shrink it down a bit okay then it's like mode here and select menu one will give you these little handles in the corner that will allow you to just drag and reshape the collision box how you want and I'm going to make it something like this now you can have your collision box however you want for whatever sprite you're going to use for this tutorial I will upload the sprites that I'm using for the tutorials even download them from the description of the video or whatever but it's best generally unless you know what you're doing to go for a small collision box always err on the side of having a collision box smaller and then it should be realistically than having in there should be realistically for all sorts of different game design and encoding reasons and so on I mean it's up to you but generally it's a good rule of thumb to kind of make it small so absolute about the collision box we're going to use that we close him down now I'm going to import a couple more sprites so hit create and sprites this time I'm going to import a sprite for our player when he's running and another sprite for when he's jumping as well so the call is s player and then capital R for running okay and a click import and bring in on this sprite here s player are stripped for one thing that's kind of interesting about importing sprites is if you include the word strip at the end of your file name and then a number game occur automatically realizes that that's a strip image and we'll break it down into frames for you so you see this image this is just one complete image but looks like for this dude just in a row they're evenly spaced out enemy is in kind of a running sequence little sprite sheet but because it has the word strip for at the end instead of importing it's just one image it'll automatically break it down into four images so it's the word strip and then the number of frames you want to break it down into so if I import that click yes you see it automatically comes in with all four sprites and a little animation like that so if I hit play I can see my little running animation on this dude okay I'm not going to change a collision mask on this one what I'm going to do later is make it so all of these sprites just use the collision mask from mass play and we'll see how that works in there so go ahead and close that let's create another sprite and port I'm going to bring in this guy now this one's not an animation as such it's just a sprite where I'm going to keep the frames I'm going to use for when I go up so this is my moving up frame and this is my moving down frame okay when I'm going when I'm jumping and when I'm falling okay I'll call s player a so we're never actually going to a for airborne we're never ever going to play like this is an animation like obvious reasons oh it's just going to pick between one of these two frames to show where when we're in the air okay we'll see how that works so a couple of different ways of working with sprites it we've got a still image and images just a collection of sort of state based frames and an actual animation okay so how do we link our player object who before only had one sprite move between different sprites because we replaced our original square you can see he's already got the players sprite going on there but something before we get into actually changing spray around where it's collision mask air it's a same sprite at the moment so it means whatever sprite we've got assigned to the object it's going to use a collision mask for that sprite um it's obvious why that's the default but it's not what we want to hear so I'm going to click this and select s player so it always uses the collision mask that we defined in s player this one for this object you know mal what sprite is using okay and that just saves us having to manually set all the different collision masks for each sprite or change each one like before you wanted to change this one make it bit smaller we won't then have to update all of the others to reflect that as well since all of the sprites are just going to be this dude just doing different stuff the collision mask is always going to be mostly in the same place okay so it just makes a lot of things easier to manage if we use plan so that's all that artwork in um one more thing before we result really get started with the animation I'm just going to go to our room editor which is just black by default before us and so the lens what character a blank we want to actually be able to see the animations and we're going to go to the background layer and just change the color of this we'll just turn it to kind of like a sky blue awesome thing yeah just just some sort of blue like that just so we can actually see gentleman is a lot brighter if I run the game now as well um we should just have a little flow and we can see everything that we need to change so we've got a player you can move left and right jump this is everything that we did before fairly consistent collision mask and you see there's a couple of problems actually here you'll notice the our player because of the exclusion mask isn't all of this prices some of it is going to overlap with the war when he walks into the wall which is fine but the wall is actually showing ahead of our player here so we need to reorganize the layers of our room to make sure that our player always appears in front of the wall which will just look a bit better than sort sliding behind it like that okay the other problem is obviously our character is always facing for the right so we're going to fix that and last but not least obviously our character does anime Orly doesn't do is running animation to the newest jumping or falling animation and so on so those are the things we're going to fix let's start with just that issue with the walls shall we at the moment all of our objects are wall objects and our player object are all on the same layer when objects are on the same layer there's no guarantee about what order that will be drawn in if they're drawn at the same time if I put the player on top of it there's no guarantee it worked it worked out internally um and like the even if you get it kind of working how you want it to say like if just by chance I'll play happen to show up in front of all of these different objects you don't want to rely on that because a later version of game maker might change how it works internally it's not something you can rely upon to always stay the same what you can rely upon is if that you put your objects on the proper layers in the right order use correct depth or however you how if you're doing it then that will always work whereas if they're always on the same layer or if they're on the same depth it's not going to be guaranteed so let's make just a new instances layer just above in above our current instances layer so it's change the name of this layer to player we'll just have a layer specifically for the player in the trim again we'll change this one to walls I'm just selecting this layer and pressing f2 if you're wondering how I'm just easily renaming that let's select all walls layer and delete the player from the wallflower and put it onto the player layer and now you can see if we drag them over the top of the walls he's appearing in front of them all because he's on a layer but in front of the walls are on top of the walls layer ok so that will solve that problem so if I were to run the game now you'd see that as well we can you can see in the room better or we're crossing over the wall properly let's actually get into the code and start writing the stuff for our animation now shall we so let's go to our player or gate open the step event I'm just going to press f12 in fact I'm going to maximize this so we can see just 100% of our screen space is used for this code I'll make the font a bit bigger as well just pressing f8 there by the way in case you also windowed f8 and f7 I'm just dynamically increases and decreases the size of your font so you can clearly see um all of your code however you want to now we want to animate and we want to we want to change our sprite of our object and change our animation speed and change what frame we're showing and so on based on different things now you might think that we just sort of wrap that into our code so at the moment we've got this area here this like or if we're if we're on the floor and we press jump let's jump right so maybe it would make sense that here we could put the change sprite to be our jumping animation thing it's not really how you want to do it or I mean you can do it that way but it becomes hard to manage if you've got all your animation stuff just sort of ramped in with all your code it becomes hard to work out which animations are taking priority over which and what's happening and what order so what I usually like to do I mean you can do this however you want really but what I like to do is keep all that stuff separate so I'll have a separate section just at the end once I've worked out all of my movement and all of my positional stuff right at the end of the step I have a section for animation ok and that's and that includes just changing a sprite changing our frames and then doing anything to do with the graphics of the sprite ok the reason I do that is just makes it easy to sort of maintain the logic of what I'm doing with the sprite and easy for me to keep track of what's going on so I'm just going to do it all down here so the first thing I'm going to do is check to see if we're on the floor because if we're not on the floor and that makes things very easy if we're not on the floor we're going to want to use our air sprite RS player a sprite and we're going to want to either use the up frame or the down frame depending which direction we're going okay so I'm going to say if Open bracket not okay by putting an exclamation mark in front of the condition I'm saying it's not true just as we did with our while statements here where I put an S Commission market for a place meaning so if not place anything X Y plus one Oh warm so this is exactly the same thing that we wrote up here okay where we were checking to see if we were on the floor so we can jump it's exactly the same and we're checking if it's not true rather than checking if it is true now if you're a bit more experienced you might realize that this is actually slightly not the most efficient way of doing things like doing you should try and minimize the number of collision checks you do especially with the number of wall objects we've got going on we might look into a better collision system later down the line in general for this game but for now we're just using this but because like we've done this check once okay X Y plus one wall we shouldn't really do it again if we can avoid it which we could by saying if we did this check saying like a variable like on the floor for example as a variable like if I did like on the floor equals one when we're touching the floor although I would have then have to get rid of this and key jump so it only does it when we're touching the floor not just when we do that and fresh jump and so on and then instead of doing another check later on we could just check that variable which is faster it's faster to check a variable than it is to do a whole nother collision check okay code wise something's kind of bear in mind but it's not too important right now this is a very simple game we don't really have to worry too much about the very my new details of performance and efficiency we can we can be a little bit careless but the same good of making things clear and easy to understand so I'm not gonna you know spend ages trying to make things super efficient just in case some of you are watching this with a bit more code experience and be like why did you do it like that but that's why I'm just trying to keep things straight forward okay the sorry slight little tangent but back down here what we were doing for sir if not place meeting XY plus one or also if there's not a collision one pixel immediately below us okay so what do we want to do if there's not a collision one pixel immediately below it so it means we're in the air so one thing we can definitely do it's a sprite index equals s player a okay so what does that mean well it's taken the sprite index but you see turns green as we know a green thing as a property of the object that we're writing this code for so property of a player in this case our sprite index which basically tells the object what sprite to use okay in the resource tree or a different sprites you can set different sprites and that will tell the object or sprite to use by default it's whatever you set it as in the object which is s player are idle sprite so by changing it to s player a we're going to change to our a sprite which is you can remember it's just an up frame and a falling frame okay because of that we then want to set our image speed to zero you see that's turned green that's another built-in property that how fast the animation should happen if you've got multiple frames but as we discussed earlier if I go to this sprite we don't actually want it to animate because that would look like this which is not what we want we'll want this one to animate our running sprite later because that's a natural animation but this one we don't want to animate we just want to pick one of these frames to show okay um something you might if you're coming from game maker one point X if you're not if you're starting GMS - don't worry ignore this a little bit I'm just going to say um but if you're coming over from one point X you might be used to image speed working a little bit differently before image feared used to actually set the number of frames purse essentially so like a 60 room speed of 60 an image speed of 1 would actually mean your sprite would animate at 60 frames a second right here the image speed is a multiplier instead it's a multiplier supplied to the sprite you now actually set the animation speed in terms of frames per second in the sprite itself okay well here where it said speed previously that was just used in GMS want to preview an animation speed and then you set it all in objects now that actually sets the animation speed of your sprite so here I've got about 15 frames a second it's kind of a reasonable animation speed makes it easier to kind of like actually set it because you can get it to exactly the frames per second you want and you know that this is what it's actually going to look like in the game at least when you have an image speed of 1 so if either an image speed of 2 it would play this at twice the speed it would play at something like what something like that in the game okay but because I have the set to 15 and I will have an image speed of 1 when I use it it'll play it at this speed where is it this one by setting image speak to 0 um we're going to multiply the 15 by 0 so that we get 0 frames a second so it's always just still okay sorry that little detour you can ignore that if you're starting in game next year 2 or hopefully maybe it made sense you know but either way image speed is a multiplier that affects the speed of your your sprite which as I say you can set in the sprite resource so for our a sprite we want that to be zero we don't want an image speed at all but how do we know which frame we actually want to use well that depends on whether we're going up or down now if we're in the air we're going to have a vertical speed of some description right and we want to check to see if that vertical speed is positive or negative now we already kind of know how to do that if you remember from last time I went a bit quick with us and last time so sorry if you don't forget us we did sign vsp the function sign returns 1 if a number is positive and minus 1 if it's negative ok so what I have all I have to do is check whether or not um sign of ESP is greater than zero for example if it's greater than zero it means it must one which means it must be positive and that VSP is positive it means we're moving downwards okay we meet we're moving positively in the Y direction which means we're moving downwards remember positive and the y direction is down negative in the y direction is up okay so if sign bsp greater than zero okay great land symbol zero so if that's greater than zero as I said it means we're moving down so if we're moving down we need to use the falling frame so let's go back quickly to this sprite see which frame is which you see our first frame here is our jumping frame my second frame is a falling frame now frame indexes start at zero even though it says here current frame 1 of 2 in terms of the index the first frame is frame 0 the second frame is frame 1 okay it counts from 0 upwards so like in our 4 frames sprite you've actually got 0 1 2 3 for example just worth remembering that let's go back to our code so if we are moving down we want it to be that second frame the second frame is pre number 1 okay so as we address that might seem so image index so image in X rather than sprite index sprite index determines which sprite we're using image index determines which frame of that sprite we use in case image index equals 1 okay so if we're moving negatively oso if we're moving positively which music moving down set the frame to be frame 1 otherwise else image index equals 0 now I'm apologize if I've not explained I don't think we did this before I've done what's called an inline if statement so you remember before when I explained if statements I said that if the condition in the brackets is true you do whatever's in the curly brackets yes you don't actually have to use those curly brackets you can actually just put the command you want to do immediately after the brackets like that and that's called an inline if thing okay so it's just one line it's state number you see I ended it with a semicolon which tells game maker whether sort of line of code officially ends which means I can actually start coding again right away even though it's you know physically still on the same line game maker interpreters kind of the next line what I can do is use this else statement and what else does is basically if the condition here is not true it'll do this stuff instead okay oh that's different to say just putting it down here because then if we just put it down here it would happen regardless of whether or not this is true but by putting it after an else statement it's only going to do it if this is not true okay so if it is true do this if it's not true do that something that else I should point out with semicolons as well but might have been a tripping point for people in the first part of the tutorial um I remember I said that you put a semicolon the end of every single line when you're doing a statement like an if statement or a while statement that opens a pair of curly brackets you don't want to put a semicolon on the end of the line where those brackets open okay so not at the end of like an if statement like this or a while statement like this because you're you're not actually officially sort of ending the line you're kind of opening things oh I know it gets a little confusing okay but um you put a semicolon it basically the end of every line except for its statements while statements and so on when you're opening a pair of curly brackets if I'm doing an inline one then I do want to put a semicolon on the end because it's just one complete line it doesn't open a block of code and we want to tell it to officially end okay don't worry too much if you don't understand all the whys and how's that just understand the rules and get used to them and you'll understand that when you need to basically so anyway sorry though a few tangents there but um basically if a vertical speed is positive then we set the first frame and if it's negative then we set the second frame okay and then that's our falling animation stuff don't in fact we should be able to basically just see that working now if I run the game um so you can see if I jump now it uses a drunk animation and if we fall it swaps to our kind of fall and spray okay so we're getting somewhere now we've got a little bit of animation going on now we just need to sort out our animation for when we're on the floor okay um so I'm going to make use of this elf statement again but this time with a block of code okay so if this this condition returns true so if not placed meeting etc if that returns true we do all of this stuff um but what if it doesn't return true we can type else and do this stuff only when this isn't true okay so instead of just doing accurate or it happen regardless by putting in an else statement it happens only if this isn't true okay so this means we are touching the floor okay because not pleased meeting X like this one wasn't true okay so we are touching the floor in which case we want to set our image speed to do one because we want to be army in all of our other sprites we'll want to animate so we'll set image speed to one and then we're going to check to see if our horizontal speed is zero then we say if HSP equals equals zero then I open another block and close the block okay just going to press f12 to go back space a bit more so you'll notice I've done two equal symbols here when I check this okay the difference between writing two equal signs and a single equal sign is when you're doing a comparison like you're doing an if statement that you're asking they make a question you think is horizontal speed equal to zero use two equal signs if you're a summoning so you're saying image speed equals zero so you're setting a property to be something else then you use a single equal sign okay so the difference between assigning setting and comparing or asking a question right okay um it doesn't matter too much chemikal let you get away with doing that like if they just be equal to zero but it is bad practice the reason I say it's worth doing things with the good practices if you ever move onto into other programming languages where it does matter you already have good habits in place if you do things properly from the beginning okay so if HSP equals equals zero so is our horizontal speed zero and if it is zero or what on earth do we want to do really want to step off sprite index to X player which is our idle sprite that's the default sprite we were using initially because it means we're on the floor and we're not moving anywhere so we just set a sprite index to be our default one and we're going to open up another else statements are going to say else open curly braket close curly bracket oh and remember of course this should say equals one and forgot to put the equal sign in there so if a horizontal speed is not zero whatever we put in here is going to happen this is our else stream so if it's not zero then we want to use our running sprite okay see estranged sprite index equals s player R this time okay that's our running spring so I've speed to zero idle sprite if it's not zero running sprite all right um that's more or less it if I press a fight there is one thing we still need to do but we'll see that in a second so if I learn using a jump I fall and if I run I know Jeeves the running animation now the only problem is if I move left I don't face the wrong direction or you can also see our layering stuff we did earlier is working as well please show up over the top of the walls um so now the last thing we need to do to really soften this offers make it so we actually face the correct direction okay so how on earth we do that well you'll notice all of my sprites face to the right maybe I should have pointed this out earlier in case you're falling on and designed your own sprites but whenever you're doing anything where you think you're going to have to flip the direction or change rotation even if you're doing top-down sprite always design the spray initially facing to the right okay it's very good practice you'll see why later but because we have all these sprites facing to the right um what I could do is draw a separate sprite having them face to the left um especially if I had stuff on him that wasn't going to mirror very well like he had a letter or word on his chest or something like that but maybe I would want to design a proper left facing sprite but because he looks like this I can pretty much just slip in less and like flipping horizontally and I'll probably get away with that it'll look okay so that's all I'm going to do rather than actually making another Sakura sprite um so how do I do that well there's a property another green green word we can use or not in here we'll just do after this whole section um called image X scale okay um image X scale determines our horizontal scaling of our sprite okay if we say it's kind of a percentage sort of based thing or a multiplier based thing so if it's one that's like a 100 percent 100 percent scaling and that's all on normal default scale I'm he'll draw at the same size as the sprite we said to - I can show you what that looks like if you set image X scale or - we'll see that we've got a super wide horizontal sprite okay is just going a bit far you can change Y scale as well to scale and vertically but we don't need that the interesting thing about this being a multiplier is if we set it to a negative number so I said it's a minus 1 it will face the other direction so you can see now he's facing to the left just just constantly it just that horizontally flips the sprite okay now semicolon only and should be there as well but we want to do this based on whether or not we're moving left or right so what I'm going to do is indent it's like if HSP is not zero okay um because we don't want to change our direction if we're not moving we just want to leave it or whatever it was before image and scale equals sign HSP because you can remember sine of anything the returns 1 if it's positive - one of its negativity and tell by now it's a very very useful function gets is quite a lot if it's one now that means we were facing to the right right if we set our image X scale to 1 and that faces to the right as I demonstrated if we say 2 minus 1 it'll flip it around from faces to the left and by just basing that on a horizontal speed when a horizontal speed is positive it's because we're moving to the right and when it's negative or moving to a lap so that's a really perfect elegant way of working out which direction we need to face and setting our image X scale accordingly so now if I run the game we have everything okay we can move left and right we've got running animation jumping falling animation and hitbox works perfectly and you see we overlay properly we don't go underneath the wall and it's all there okay so next open probably on the next episode we will look at giving all guys some arms ok or give them a weapon that you can use to show you how to shoot projectiles make a make a weapon that follows that Mouse and do all sorts of other fun stuff ok thank you very much for watching I'll catch you guys next time as always a big shout out to my patreon supporter whom I couldn't make any of these videos a special shout in particular - in a mule Giles Montgomery Don Angel Rodriguez Harold Guidry rocks on Jason McMillan and Owen Morgan hopefully I didn't mispronouncing of those are sorry if I did thank you again very much for watching and if you enjoyed this video maybe subscribe if you really really like it maybe join these cool kids by supporting me on patreon of course these are just suggestions you can do whatever you want that's what free content is therefore isn't the Internet brilliant thanks for watching guys see you next time

Channel: Shaun Spalding

Views: 457,503

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: Y6l02DcpSR4

Length: 31min 2sec (1862 seconds)

Published: Fri Jul 07 2017