Creating A Top Down Platformer in Game Maker Studio 2 (Part1)

greetings and welcome my name is aaron craig with let's learn this together and this tutorial is going to be a little bit different than my other ones which you can probably already tell by the length so this is the project we're going to make it is a top down two and a half d platformer with tile collisions and object collisions so you can see here that you can walk in front you can go behind for both of these things and you can move up and jump and then you can fall off and now you're on the ground and you can't jump up to them you can move underneath these ones and same thing you can jump up all of that that you would expect from a platformer but in a two and a half d style now the reason this is going to be just a longer video is because it's really difficult for me to find natural breaks in this tutorial there's just so much that's connected and i need to explain it all building upon itself then i'm just going to have it be one very long video the project will be available to download so if you just want to tear apart my code and my project to use in your own game go for it you don't have to credit me a lot of this i've just worked on over a long period of time worked out exactly how to do it it is not perfect there are issues with it so if you're going to put it in your own game you're going to have to do some work but i tried to leave lots of comments and make it as accessible as possible and this video is just trying to explain what i went through what i discovered along the way because there was a lot that i had to discover and dissect that and give it to you in a way that then you can replicate and build your own system or modify mine if you want to so without further ado let's go ahead and dive in this is an empty project except for the camera object which i've added i don't want to cover all of this stuff because i have a long form series that covers how to do custom cameras but this is it if you need it you can pause right here copy the code all i did was create a custom camera that we're going to use to follow the player because in our game we're actually going to be jumping based on a z axis not on the normal y and when we jump without a custom camera it's not going to follow us up it's going to look weird and if you get too high on the z-axis your player will actually completely disappear without a custom camera here so here's the code for it and that's all i want to say about it it's already in my room so i don't need to place it there now the first thing we got to talk about is the sprites we're going to use so i'm going to go ahead and right click and create a couple of sprites i'm going to call this spr player i'm going to duplicate it and call this spr solid now on this sprite we need to resize this i'm going to change this so it's not a 64 by 64. it says it's going to be 24 by 36 and then we need to actually draw a very specific way so we're going to put the origin down here in the middle and it'll make more sense once we actually draw it so let's go ahead and do that i'm going to click on this blue i'm going to fill this in and then i'm going to take a fill rectangle choose a different blue and then at the halfway point which would be 12 or 18 since its height of 36 i'm going to make this a darker blue now the thing that i discovered which confused me for most of the time is when you're doing this you must have specific sprites that are designed for top down two and a half d you cannot just use regular sprites because this is a 3d world that you're only seeing from a certain perspective and that means you need to have sprites like this that has a clear front so this blue right here is the front of the sprite and this is the top of the sprite and then you can imagine that it extends and that there's more to it in a three-dimensional space so we are actually going to be doing most of our collision checks based on this portion of our sprite so what that means is we want our origin to be essentially right in the middle of what would be the front of our player so this is that right there let's go ahead and open up the solid and do the same thing now the solid can be a different size i'm actually going to make this 32 by 32 then we're going to put this sprite also the origin will be in the middle bottom but first we'll go ahead and make it we're going to do a dark red and then we want a darker red so i'm just going to go ahead and click on this i'll make it darker and then we're going to go to 16 which is right here and fill that in so this is the same idea top front origin right in the middle or at least as close to it as you can this is going to make a big difference on how we calculate everything and how we collide with everything so your sprites must have this kind of aspect ratio and that's why i'm using these custom build sprites that we're drawing right here because finding your own is actually pretty hard there's not a lot out there for top down two and a half d platformers otherwise i would have used nicer looking sprites but this part is important and something that i just did not figure out until closer to the end after i had a lot of it working and little things kept making issues i figured out this is very very important which is why i keep talking about it then we're going to make two more sprites and these are going to be the shadows so i'm going to do spr player shadow duplicate this spr solid shadow we're going to have objects that can float up and we need to indicate that they are floating up the z axis not just like up the y axis which would still be on the ground we're going to indicate that with a shadow so the player shadow is going to be essentially the exact same size so come in here 24 by 36 and we're going to create just a small shadow at the bottom so i'm going to grab this gray i'm going to make it semi-transparent fill in and we're just going to put it right down here now we're going to take the origin and again put it right there in the middle now we go to spr solid shadow and we're going to do the same thing so 32 by 32 come here that gray disappeared that's unfortunate we'll grab a different one and down here with the rectangle tool move the custom origin okay those are all the sprites that we're going to need for right now the other one that we're going to throw in eventually is the title set when we start doing tile collisions because i want to tackle that as well now let's make the objects for these two so we're going to do obj player and assign the player sprite to them and we're going to do obj solid and assign that sprite to the solid now let's go ahead and set up the player i'm not going to take the time to show you how to set up a movement system i'm just going to copy what i have except where it does differ then i'll take the time to explain what we're doing so this is going to be the player data now we're going to have three ways of movement so the goal here is to figure out how fast we're moving say which way we're going to move and then check to see if there is a collision in that spot so you've probably seen this system before with an x speed a y speed and then a while loop checking collisions we're going to be doing that but now we're also going to add in a z speed because we can go up and down and essentially we have three axes to work with here not just one so because we have jumping we're gonna have regular move speed we're gonna have a jump speed be a negative 3.5 and the game gravity equals 0.25 that all kind of makes sense and you've probably seen this before so i'm not going to dive into that this however is going to be specifically for the z-axis so the z is going to be where we're at on the axis the z height is going to be the height of our sprites collision mask so remember we set this up so half the sprite is actually the front of what we're looking at which means that's what we actually want to collide with we imagine the sprite is standing up on the z-axis so when we collide with it we're only checking that darker portion so we can do that by just saying negative sprite height divided by 2 which i did not spell sprite correctly at all so sprite height negative sprite height divided by 2 will get us exactly what we want that way if you change the sprite this will still work then we have z floor which is where we're landing so when we jump up we're going to change our z but we also need to check to see the bottom that we can land on and this is going to be useful for where we place the shadow at because if we're high up in the sky and we're jumping between places the z floor is going to change whether we're hovering over something in the air or we're going to go all the way back down to the bottom by default we're going to start it at 0 as well and that's everything we need inside of here for object collisions which is what we're going to tackle first later on we'll come in and we'll do tile collisions which will come in and we'll add some data inside of here now let's go ahead and add a step event and i'm going to paste inside of here what i already have so you can see it i've got controls as local variables for wasd i've got checking to see if i'm pressing any of those controls and then i'm changing my x and my y speed and then i'm checking to see if we are not pressing up or down left or right and we stop moving super basic simple stuff the last thing in here to actually make it work so that we move is going to be the move us along those so we add our x speed to our x and our y speed to our y eventually we're also going to need to add our z speed to our z axis so i'm just going to go ahead and put that in right here now in our room throw our object in here we're gonna have a custom camera which we already do so i think this should already all be set up and working the only thing i think we're gonna need is in the obj player we need to add a begin step and then i'm going to copy and paste this in again all of this code you can find on my long form series on cameras and using them all over and for lots of different things so this is exactly what that code is just to follow the player and that's all we need to do right here okay i can move camera follows me perfect so we have a moving player and that's all we need to do right now just want to make sure i didn't mess up any of that basic code before we jump into the more complex stuff now let's come down here and let's tackle jumping i'm going to go ahead and full screen this so you're probably familiar with jumping and when they press jump you change their y speed and then when they're in the air you add gravity to them and so on and that's what jumping normally is and that's actually what it's going to be here the only difference is instead of doing the y speed we're going to put everything on the z speed and when we move the player we're actually just going to draw them at a moved place instead of actually moving them up because we're not moving along the y axis we're moving along the z axis and that means something just a few pixels up along the y we're not actually colliding with because we're jumping straight up so we have to wrap our minds around those three axes so i'm going to say if jump and z speed is equal to zero then z speed equals to jump speed and now we can start moving so now then we've got gravity so if z doesn't equal our z floor so we are changing our z we're going to add our game gravity to our z speed so remember jump speed is negative this is positive it's going to eventually bring us back down then when we are close to the ground we're going to check to see if we're going to go through the floor and if we are we're going to stop right there so if z plus our z speed is greater than our z floor z speed is going to be equal to zero and z will be equal to z floor now this is not going to work without adding in the draw event that we're going to need because what we're actually going to be doing is drawing our sprite instead of moving them so when we jump we're going to draw it at a different spot so we're going to take over drawing completely i'm going to add this into the player event here and what we're going to do is we're going to draw ourselves so we're going to say draw sprite and we're going to draw ourself we're going to draw the first image so if you have an animated player you'll need to actually take care of this image index increasing and then we're going to say x y plus our z and then we also want to draw our shadow so this is going to be our shadow draw sprite spr player shadow zero x y plus z floor so this is always going to be that z floor so we can see when we're above things now when we do this we should be able to come in here and we can jump you can see our camera follows us if we move around our shadow goes up and down left and right and now we can visually see that we are above now our character is technically still down here because we're just drawing them up but that's okay because then we're going to check all of the collisions based on our z and our z speed not of where we actually are at so now let's return to our step event and now it's time to actually set up the collisions that we need here so i'm going to say collisions and if this is where we're going to create a custom script so you're used to using place meeting or you probably are but we are going to make a script called place meeting 3d and it's going to take the same arguments and work exactly the same so we can pass in our x-coordinate which is x plus our x-speed our y and whatever we're looking for which is obj solid and then if we are meeting there then we can say same thing as we normally do which is while we're not meeting at that spot one pixel away from where we're moving then we move one pixel at a time so x plus equals the sine of our x speed and when we're done there we set our x speed equal to zero and we do the same thing for our y so i'm going to copy this put this here and then instead of x plus our x speed we need to come in here and say y plus our y speed and get rid of this portion and replace it with plus the sine of our y speed and we do y plus equal the sine of y speed and set y speed equal to zero and that is the normal collisions that will work exactly the way you'd expect but in 3d space so now let's go ahead and jump into that script that we need to make so i'm going to create a new script called collisions because we're going to have several inside of here including the tile collisions we do this one's going to be called place meeting 3d it's going to take our new x-coordinate our new y and the solid object we're looking for and we can use constants and built-in variables as arguments names which is pretty cool i wouldn't recommend doing it all the time but here i'm not going to be using the built-in variable solid for anything so i feel just fine overwriting that so the first thing we're going to do is create a local variable called block and set it equal to instance place new x new y and our solid now if you're not familiar with instance place this is actually going to return a real number or the keyword no one so if there is a collision we have a number and if there's not then it returns no one so we can use that to check to see we don't care what solid we're colliding with we just need to know if there is a collision specifically with a block and what we're looking for if our block is equal to no one we're going to add some more in there in just a second but if that or some other cases then we're just going to return false but if we make it all the way through there we'll return true that there is a collision so block gets to see if there's an xy collision if there's none there then we're not going to have any collision at all but we also need to check to see the actual z-axis so if there's no block or we're going to add some parenthesis here because we're going to check two things we're going to check to see if our z is less than or equal to block.z so we have to have block be equal to something which is why we're checking that it's not so if this is true then this is just going to return false immediately but if this is false then our if statement will come and check over here and then we actually have a block to check this against so if we're underneath the block and we're jumping up and colliding with it or our z height is greater than or equal to that block dot z so we're underneath it so we don't need to worry about it or we are above it and we don't need to worry about it right now then we are not colliding with it and this is all the code we're going to need inside of here to test this out our block needs to have a z so let's open up our obj solid and add a create event so we need to add in a z variable here now this is also one of the most confusing things that took me forever to figure out and i want to have you avoid that trouble z cannot just be any value here it has to be half the size of our sprite so if i set z equal to negative 16 that is half the size of our 32 by 32 and then it's actually going to work because the collisions we're looking for remember are only right here or right here we're only looking at the top half when we're colliding on these so we can run right into this now this part is essential if you have a sprite of a different size you must then change the z i'm going to show you that as we go along i'm going to stretch this out we'll have larger blocks and solids and then we'll change the z accordingly but this is essential that it'd be half the size of your sprite otherwise the collisions will work but they'll be completely off and in the wrong place and you might be hovering in midair or colliding with something that doesn't even look like it's there so remember that must be half the size of the sprite and i comment that very thoroughly in the project if you downloaded it okay let's try that throw our blocks in here and run this now it's not going to be hovering or anything yet but if we run into it we now have a collision with it now the collision is actually working all the way here and you can't even get closer and that's because the sprites we've set these here but we need to actually set the collision masks to also be that so let's go to manual and let's set the collision masks to now be the front of the sprite that we have if we do this and we run it now we'll be able to collide with it in a way that looks a lot nicer that is at least for the back because we don't have a good depth system yet now there are tutorials on full depth sorting systems for a game like this i'm going to take the easier route and i'm just going to open up our player and i am going to go to the draw event and i'm just going to say depth equals negative b box bottom plus z times 2. then i'm going to grab this go into our solid and i'm going to place it here but take out the times 2 portion now if we run this our depth system is going to work fairly well so we can move in front of it and then we can move behind it now this will start to break down after you have more complex interactions things floating jumping falling all of that but this is a really good starter system and it allows you to do that now you can see that we don't have collisions underneath us yet because we only have our x and y collisions so let's go ahead and set that up next inside of obj player let's go back to the step event so these are the x and y we've done those that makes sense now what we have to do is do a z check underneath us for if we're going to be on something so underneath our collisions what we actually need to update is our z floor because our snapping and our gravity are all checking against z floor which is where we're going to land when we fall so we're going to do z floor snapping and this is how we're going to write this if we are colliding with an obj solid where we are so remember in the game when we jump we actually are drawing our sprite up here but we're still down here in the collision zone so if we are colliding with something and even though we might be above it that we know that so we can use that information to say if we are colliding with it then we need to update our z floor we're going to get exactly what we're colliding with by saying var block equals instance place x y obj solid and then if we're higher than it we're going to say if block.z is greater than or equal to rz then z floor is going to be equal to that block so we get the top of the block and that's where we're going to stop if we're not colliding with anything then our z floor is going to be equal to 0. and that's all we have to do for that so we check to see if we're colliding with something because remember when we jump we don't actually jump we don't actually move our x and y so we can still be colliding with it so if we jump up now we are colliding but we know that and so we stay right above it and our place 3d checking is coming out clear because we're above the object and that's fine so now we can jump we can fall off it on the back we can fall off it on the side and we can fall off it on the front now the thing you might notice is when you're moving front it might kind of look like you're on nothing here but remember we're checking this collision mask because this is kind of the front this is the top and when you're on it still it still makes sense right there as soon as you fall off you're no longer on it now i want to show you what happens if we adjust our z or we change it to any other value this is going to mess up all of our checks in lots of different ways so now it's actually we can't even collide with it at all because all of our collisions are based on that z check and then if you don't set your collision mask to where it's supposed to be this is also going to mess up your collisions but in a different kind of way so we can jump on this but now all of a sudden we're floating and it doesn't look good and we fall off all the way up there even though we still fall off right about there so all of these things must be exactly like this otherwise you're going to run into a lot of different problems now let's tackle floating solids so that we can actually put them up in the air so in obj solid we're going to add a draw event we're going to do kind of the same thing we did for the player it's actually going to be floating up higher and we're going to draw that so let's go ahead and draw self and the shadow so the first thing we'll draw is the shadow and we don't need a shadow if we're at negative 16. so we're going to check to see if our z is not equal to negative 16 then we draw our shadow sprite because if it is negative 16 that means we're on the ground we don't need to worry about that at all so we're going to do spr solid shadow and this is just going to be where we're at so x and then we're going to specifically use y start so the system i have here does not work for moving objects if that's something you want to do you'll need to actually put a variable inside of here and figure out where to draw the shadow at as your object moves because we're going to do something in a moment here that moves the object the solid after the game starts but only one time so we need to remember where we started the object at and that's where we're going to draw the sprite if we need to now we're going to draw a self but inside here if we are moving which we are going to do we actually want to make sure we adjust our depth so i'm going to take this out of our create event and put this here and then i'm going to draw sprite extended this time because we're going to come into our room and i'm going to add like one of these here and then i'm going to be able to grow this and now we have a much larger sprite but we need to continue drawing it the correct way and the correct way can be using this function by taking into account our image x and y scale which is what we're going to do so we're drawing our sprite 0 x y star plus our z so how much we've gone up and then we're going to take into our count our scales the rotation is going to be 0 c white and 1 for alpha so we're not messing up anything here at the end we just need to account for our image x and y scale otherwise it's not going to look very good now back in the create event i'm going to set alarm 0 equal to 1 then i'm going to add that event and all we're going to do here is say y plus equal z and so this will move our solid up the amount that our z is so that means for any objects that are of different sizes we need to open them up like in this and edit the creation code and our image x scale here is two and two so we're just going to say z equals negative 32. now we this now has a drop shadow which granted needs to be fixed let's go ahead and come into the solid and we're going to say draw sprite extended here as well and we're going to take into account our image scales and that should make it look much better let's give that a shot there we go so now we have this object that's a lot higher up and we can walk underneath it and we can jump right through it for now because we don't have a collision when we're jumping up but we'll set that up in a minute and we can jump on this as well so this looks really weird though like jumping all the way up here and that's because where you place these objects in the room matter a lot so even though we want this object to be floating we want it to be down here when it starts so that it's about at the right the same spot and then we're going to take care of it floating in code so this is where it needs to be to then look like we can access it right there so now it's on the same plane and we can hit it and it functions exactly as you would expect and so that's the system we're using here if you want to add more blocks you can you can change their size i experimented around with coming up with a way of getting these blocks to be this size and change their z and adding like a z height like kind of like we have for the player i know there's a way to do that that was a little bit beyond what i was able to discover here so if you want to have higher up blocks you are going to have to just change their size and then you can have them up higher by changing their z as well so we can set the z equal to negative 48 here and now this block is going to be up much higher as well for us to jump on so you can see we actually have to move up and because of that we have to make sure we place it in the right area which is right here and then that will work correctly so if you come up with a better system to be able to do this and have them all be the same size but put them anywhere on the map definitely let me know i would love to see that and add maybe a follow-up video to this tutorial but now let's jump back into our collision code here there's a quick thing we can do to just update our depth so when we do have a collision so we're going to just say we can update depth right here if block so if there is a collision and block.z is less than rz depth equals negative b box bottom so in this case we don't want to appear inside of that block when we're actually underneath it this little code snippet here will make it so when we walk underneath it changes to where we're underneath it now so that's pretty cool next let's add in a quick check to see if we are jumping and colliding with a block that is above us because right now we just go right through them which isn't exactly ideal so down here i'm going to say collide with bottom of block and it's going to be very similar to what we just did in the z floor snapping so if instance place x y obj solid of our block we get that but this time we're going to say if block and block dot z is greater than our z plus z speed and oh i did not spell block right over here and our z floor is greater than or equal to block.z so we're making sure we're underneath the block then we want to do a quick check that we're not uh above this block in any form of way like with our z speed where we're moving and such so we're going to say if z speed is less than or equal to zero and z block dot z is or z is greater than block.z then we just set our z speed equal to game gravity so if we're moving up which is what we would be doing here if our z speed is less than zero because we're moving up then we're just going to say set it equal to a positive number so it's like you hit it and then you come right back down i have one too many parenthetical marks on that line and this will stop us from colliding with that block now to check it out we're going to go in and we're going to change our jump speed to 6.5 because we can't really tell with our negative 3.5 so now we can jump super high and if but if we come in here we hit it and we fall back down immediately now we can jump right here because we're in front of the block and right here it even looks like we are underneath it but we're not quite this is one of the glitches that i just haven't been able to fix with the depth system because i didn't want to put that much time into creating an entire perfect depth sorting system here but again you can find lots of those videos on here youtube for free and you can apply them to what we've got right here so i'm going to put down our jumping and now that code is working exactly as we would expect and this is actually a really great place to end this video and the next one i'm going to take what we've got here and throw in tile collision so i'm going to add an auto tiled tile set into our project that we can create on different tile layers and have it be a collision based on those tiles so again it's going to look like this so this is a this is a tile that is auto tiled at the first one so it's at negative 16. the next one's at negative 32 and then at negative 48 and you can see that we can jump onto each one we can't jump onto that one because it's too high same for this but we can jump onto that one we'll be able to move behind these tiles and we'll be able to have these collisions set up basically automatically with our auto tiling which is really cool really powerful and probably the most useful part of this because well when you're doing collisions in the top down platformer they're probably going to be tiles so this is what will make it really easy to do that stick around for my next video when i cover that but if you enjoyed this please leave a like it lets me know that this content is appreciated and helps me to continue making more but as i always say keep making keep learning and i'll talk to you later a huge thank you to all of the awesome people who support me over on patreon their names are on the screen now and every dollar pledged helps me create more awesome content you can support me for as little as one dollar a month and get access to exclusive perks like my discord server your name in the credits early access to my youtube videos and courses and more check it out at patreon.com letslearnthistogether.com or find the link in the description below and become a patron today [Music] you

Channel: Let's Learn This Together

Views: 2,483

Keywords: GameMaker Studio, Game Maker Studio 2, GameMaker Studio Tutorial, Game Maker Studio 2 Tutorial, GMS, GMS 2, GMS Tutorial, GMS 2 Tutorial, LLTT, Let's Learn This Together, GameMaker 2, GameMaker Projects, Creating a top down platformer, top down platformer, game maker studio top down, game maker studio platformer, game maker studio 2 top down, game maker studio 2 tutorial 2021, draw sprites, set up objects, common pitfalls, game maker tips, game maker studio tips, game dev

Id: R2Qn4-8DYnE

Length: 34min 54sec (2094 seconds)

Published: Fri Apr 09 2021