Top Down DnD Tutorial in Gamemaker #1 Movement & Collisions

would you like to know how to make collisions for a top-down game where you might be able to turn something like this into something that looks like this we'll keep watching and i'll show you how [Music] good a gamers in this tutorial i'm going to show you how to do collisions for a top down game now by top down i mean we can move left right up down and we're not affected by gravity essentially it's the camera above the player at some sort of angle and we can move around like a bird's eye view so i've created a new drag and drop project i'm just going to start by changing my view to custom order so that i get a view that's not set at alphabetical order that's just up to personal preference now the first thing i want to do is create a player but we'll need a sprite to represent what the player looks like so right click on sprites go to create and go down to sprite and let's name this s underscore player now i don't want this size so click on the size and we'll change it to 16 and just tab to 16 press apply and let's edit that and set it as a color i'm just going to choose a blue color and select the fill tool and then fill that in lastly we want to center the origin and the origin is the center of the sprite so we can just use the drop down box and set it at middle center let's close that down now we need an object to represent our sprite in the room so right click on objects go to create and just go to object let's call this o underscore player so the o stands for object whereas the s up here stands for sprites that's just a naming convention that helps us identify the assets so we can assign this sprite to the player and we can just move this up here now i'm going to create an event and an event is basically a when action for the player you have various events that will enable things to happen at certain times and when we create an event for example a step event we then set actions in that event and they will run when the event occurs now a step event happens 60 times a second so the code in here will run 60 times a second and what i want to do is capture the movement for our player so if we type over here key we can see the mouse and keyboard movement and i'm just going to have one that says if key is down which means that whatever we set here and it's going to be the movement so i want to use the a key to move left rather than the arrow keys so i can go to a and that means when this key is being pressed we want to do something and in this case i'm going to set a variable i'm just going to call it left and we'll assign the value to that variable of one so when a is being pressed left will equal one now this will be useful later when we actually calculate the movement of the player but for now let's just capture all the keys so i'm going to take a copy and a paste of that and ensure it's dragged under this one and we're going to change it from a to d and this will be for the right key now i'm going to paste it again and this time i'm going to capture the w so you can even just type it in here and w is for up so we're capturing the up press and click on this click paste again and this time we want to capture the s key now make sure these are in capitals and if that's down we want to capture down so every time a key is pressed we're setting this variable to one now what can happen is the step event can get quite lengthy so our get input here is quite long so instead of having this represented in the step event i'm going to move this to a function and that way we can call the function when we want to get the input so over here under scripts i'm going to right click and go to create and create a script and scripts can be used to hold functions so we want to hold the function of get underscore input now we can have multiple functions per script but i'm going to name the script this and i'm going to have just one function in the script so back at the player we want to take all of this so i can click the bottom click the top and press ctrl x to cut it out go back to our git input and paste it in now you notice that this line indicates that this code is not connected to this function this this indicates that it runs after that function runs if we want this code to be part of the function we need to drag it to this side so select the bottom select the code just below the function call and i'm going to drag that over here and now all of that code is part of the get input function so back in the player we've lost our code but we can call a function or a script you can do it as a function call but because we are doing one function per script we can just execute the script and therefore we can just select it rather than having to type it in so we're just going to execute that script and that will be just like we're running it in the player here now if we look at git input you'll notice that where we're setting these values we're never setting them back to zero so they're always going to be equal to one so we also need to ensure that when they're not being pressed they're set to zero and we can do that a few ways we could have an else here where we set them to zero or we could actually have another script that does it for us and we'll just call this reset variables so all we want to do here is reset our left to zero our right to zero now up and our down so now we have that function we can go back to our player and we can drag across another execute script and this time we'll just reset those variables before we go and get them so every step they're being reset to zero and if we're pressing the keys they're being set again now i want to use those variables to allow the player to move but we need to calculate the movement of where we're going to go so capturing this movement will allow us to move our player let's go have a look at a room and a room is basically what you'll see when you run the game you could think of it as a level now i'm going to change the size of the room initially and down here is the room settings i'm going to set the width of the room to be 360 and the height of the room to be 240 so you can use the middle mouse to scroll around and control in wheel mouse to zoom in and now that we've set our room i'm going to set up a camera which will enable our room to scale which means it'll be bigger when we run the game so just under viewports and cameras let's enable a viewport go to our viewport zero we'll enable this and make it visible and our camera properties as you can see initially our camera is really large so we need to change it to be the same as our room here so 360 by 240. can click this up button to bring it back into the middle now that our camera's set the viewport enables us to scale the game up so i want to make this three times what our camera view is three times 360 is 1080 3 times 240 is 720. so i'm just going to drag the player across and put them in the room make sure you're dragging the object of the player now you'll notice with the player there are some coordinates here there's an x and a y position if we move to the right the x position gets larger if we move to the left the x position gets smaller all the way down to zero now the same with the y if we move down though the y gets bigger and if we move up the y gets smaller all the way to the top left position of zero zero so we can use that information to move our player to the right left up or down based on what the user is pressing so after captured our input let's calculate that movement for the player and we can do so in a script so right click on scripts go to create and go to script and we'll type in calc underscore movement now let's just make this bigger and here we'll be able to calculate the movement of the player now if you remember if we're pressing right then the right variable is set to one if we're pressing left left is set to one now i'm going to go and drag across the declare temp code block and i'm going to set a temporary variable called underscore h move now i like to use underscore to indicate that this is just a temporary variable it just means at the end of this function it actually gets deleted so h move will hold the value of our horizontal movement and we can set it to right minus left and what that means is if we're pressing right then this becomes one minus zero so h move is one if we're pressing left then this is zero minus one so h move is minus one and if we're pressing both or pressing none the value of h move is zero so it's just a tricky way to allow us to set some horizontal movement based on what we're pressing now we can use a similar thing for our vertical movement and this time we have underscore v move and we're going to set it to down minus up and what that means is when we're pressing down v move is going to be one minus zero so it's going to be one and for game maker if we have a vertical movement of one it means we're moving down the screen whereas if we're pressing up the value becomes -1 which means we're moving up the screen so that's how we're going to determine our vertical and our horizontal movement so if one of these is being pressed then we want to move the player so i'm going to go over to an if expression code block drag this across and we're going to ask a question i'm going to say if h move is not equal to 0 or v move is not equal to zero so this symbol of an exclamation mark and an equals means not so we're asking if these two are not equal to zero and we're using an or to say if any of these are true then we'll run the condition now if these are true then we want to calculate which direction we need to move so what i want to do is get the direction that we're trying to move to so i'm going to go over to a function call drag it to this side so that it runs if this is true and we're going to look at a function called point underscore direction and point direction will take an x and a y and it will give you the direction to another x and y so we can use that with our h move and our v move to calculate the direction we're trying to move to and we can do that by saying imagine our starting point is 0 0 and we're trying to move to h move and v move so if we're starting at 0 0 and these are going to be a 1 or a minus 1 this will give us the direction the way that we're moving and let's store that in a temporary variable i'm just going to call that underscore dir so once again underscore represent a temporary variable we're not going to keep this at the end so now we have the direction we want to move we can calculate how far we should move based on our player's walk speed so let's just go back to the player and we'll just add a create event and we'll just add a variable code block and let's set up a walk speed variable and we'll just set it to two so that's how far the player is going to walk per step so back in our calc movement let's do a function call and we need to calculate the distance we need to move along the x and the distance we need to move along the y to move in this direction so if the direction is this way how far are we moving on the x how far we're moving on the y to get to the point we need to get to and we can use another function called length to underscore x and what that takes in is a length and a direction so our length is going to be our walk speed and our direction is going to be our underscore der and this length x will calculate the distance along the x that we need to travel to get to this point so in saying that we can copy and paste that and we can change this to length to y and that will calculate the y components so now that we know the length of the x and length of the y we just want to store them back into this h move and v move so we can use those variables so our target's going to be h move and we'll store that as a temporary and our target's going to be v move and we'll store that as a temp as well so h move is the distance we need to move horizontally and v moves the distance we need to move vertically so knowing that our h move is our horizontal movement let's just set the player's expedition to that h move value relative which means we're adding it on to the player's expedition and we can do the same thing for the y let's look at the y coordinate and add on the v move so now what we can do is go back to the player and ensure that we run that calc movement script so execute script and we'll select the calc movement so let's test that out and we can do so by up here pressing run or pressing f5 and we find our player moves so let's add some solid objects that the player can collide with so right click on sprites go to create select sprite and i'm going to call this s underscore solid go to edit and let's set it to a red color i'm going to change the alpha to a lower value select the fill and fill that in now you can leave the origin there but i'm going to change the size once again to 16 by 16. let's close that down now we can go and create an object for that solid to represent it in the room so go to objects type o underscore solid and let's assign that sprite to the object great we can close that down we don't need to do anything else with that but we can go to our room and i'm going to start adding those solid objects here so let's make a new layer that they can sit on and i'll just call this collisions and i'm just going to change the grid for the collisions layer to be 16 by 16. so ensure you're selecting the o solid object and if you hold down alt you can actually start to drop in the object so what you want to do is place one and then grab it and drag it out you can drop individual ones around but it's a bit of a waste of resources to do that when you could just drag these out so undo that and we'll just place more here and just build up a wall around the outside the player can move around in so let's have some more down here and just something in the middle there the player to walk into something here as well and that should do so if we run the game now we'll find that we have no way of getting stopped when we touch those solid objects so the player just goes straight through them so we need to set up a collision that stops us when we touch them so back in our workspace gonna go back to our player so let's set up another event and this time it's a collision event with the solid object now this code will run when we make contact with this solid so if you remember we are calculating our movement and we are instantly moving to where we want to go at no point are we looking to see if we're going to collide with something we are just moving there so we might move to a position and then find we're in a wall and then what will happen is this will run this collision check will run and it's in here that we need to then move back to our position that we were in and maybe we'll move as far as we can to the wall before we run into a collision again so let's make another script and i'm going to call it collision and what we can do is move that with our player into here so this script will run when we collide with the solid and i'm doing that so that you can use this same method in other objects you create a collision with those solid you place the collision script reference here and the collision will just work for that object as well so what are we going to do in here what is going to happen in our collision well like i mentioned we have already moved to where we want to go so let's go and create some temporary variables and i'm going to call the first one underscore tx and that stands for the out target x so this is where we want to move to and we'll set it at x because that's where we currently are now let's set another variable called target y and we'll just set it to y so these are representing where we want to go so we can comment on this and say these are our target values now that we've captured where we want to go let's move back to where we were last step we know we're in a collision now and we don't want to be so let's go and set our current x to be our x previous and x previous is something that can be used in a collision event or in a draw event and it will grab the value of what x was in the previous step so we can do the same for our y and now y is going to be our y previous so now we've actually moved out of the collision we are no longer colliding with the object and if i run this now we'll see that we can no longer collide with these solids and there we go now that seems pretty simple but it's not that simple because it's not a great method you can see that i can't slide along i've actually left a little gap there between us and the wall sometimes you'll get a larger gap like that it just depends on what your speed is as you're approaching you're not moved close to the object you're just stopped from going any closer so it's not a great solution you also if i press two keys i can't slide along the wall it's kind of clunky so that's not great let's go and improve on it so how we can improve on it is we can look at our x and see where we are trying to get to compared to where we are and move one pixel at a time until we can no longer move and the same for the y we'll look at where we want to go we'll look at where we are and we'll move one pixel at a time until we can no longer move anymore or we're at our target value so let's get the distance between our current x and our target x because that's how far we want to move and i'm going to store it in a temporary variable and we're going to call it underscore dis underscore x and the value is going to be the difference between x and target x but it could be a negative value but what we can do is use a function called abs and that will return just a positive number so if it's a negative number it'll just give us the positive part there won't be any sign associated with it so we can just have the target x minus x so that's our distance we want to move in the x let's add also the distance we want to move for the y and that will be the same thing it'll be the abs of our target y minus our y so now that we know how far we want to move in our x and our y we can use a repeat to move a pixel at a time testing if we're in a collision at each pixel so we can just repeat this distance x times so if our distance is five we want to repeat this five times for each pixel to ensure that we can move as close as we can to the wall so what we can do is just use our object to place test drag it to the right side and we want to look for our solid object and we want to move just one pixel but it could be a minus one we could be moving to the left or we could be moving to the right so we need to ensure we're testing in the right direction and we can use another function to work out which way we're going so if we do the sine of our target x minus our x this will return either 1 or minus 1 depending if our target x is on the left or our target x is on the right now i need to ensure we take relative so that it will add it onto our x our y is going to be relative at 0 and we're looking for not a collision if we're not in a collision well then we can move this single pixel so let's take a copy of that and if we are not in a collision well then we want to move our x so our x becomes either 1 or minus 1 relative so we're adding or we're subtracting 1 to our x if we're not in a collision and we're repeating that however many times we're trying to move now we want to do the same thing for the y so i'm going to take a copy of this and paste it and then we're going to change this for y so this is going to be our distance y this is going to be our target y minus y and we'll just cut that out and ensure that we place 0 there and paste it down here because we are moving in the y and here this is our y and this is target y minus y so if we want to just put a comment here we can say that we want to move as far as we can in x and here we want to move as far as we can in y so now let's test that out press play and there we go so now we can slide along the walls and we also find that we are directly next to the object we no longer have that small gap that we had before because we're being pushed all the way to it and the sliding along the wall is actually really important for the game it just makes it feel a lot better when you're playing that you don't get stuck on walls when you're moving so that's all i wanted to show you is basically a movement system that you can start off with to make a top-down game you could then go add some graphics to this make the player fire and you've got a nice little shooter i have other tutorials that show you how to do some of those things so maybe check those out now hang around after the patreon credits because there's some really cool content that some of my patreons have been producing my patreon support has enabled me to put out content like this so i want to give a huge thank you to these legendary supporters dylan jackson fox and ravenent keizer ho andy kaye emre cos and tom frankie i also appreciate the kindness of these epic supporters as well skydevil palm sheldon entp salvatore capolino and dan half and these rare supporters also enabling me to continue to produce content so thank you to them now if you contribute twenty dollars to my patreon you get access to my latest release which is a game maker project you can use to build your own game i've already done the hard work and have the collisions moving platforms player and enemy setup but you can use this as a base to build your own game it's also available to purchase directly so look in the description for a link now lastly some of these guys who are following me are starting to produce their own games so you really should check out someone like skydevilpalm on twitter he has a really cool game made in game maker called victory heat rally it's a car rally game that nods back to the 80s so check it out as well as that we have salvatore capolino who's released a steam game called eternal dungeon these are guys who started out in game maker just like yourself and are now releasing their own games so it's always good to start programming you just never know where it's going to take you so thanks for joining me i'll talk to you in the next one you

Channel: Slyddar

Views: 20,371

Keywords: gamemaker, studio, platform, platformer, drag, drop, dnd, dragndrop, drag n drop, tutorial, peter morgan, one way, oneway, fall, make games, shaun spalding, heartbeast, spalding, yoyo, gms2, gms, advanced, learn, drag and drop, collision, make game, jump on head, enemy ai, horizontal, collisions, coins, collectible, items, objects, slyddar, peter, morgan, 1.4, top down, first game, movement

Id: rUN7e-UFbSk

Length: 27min 7sec (1627 seconds)

Published: Sun Nov 01 2020