GameMaker Studio 2: Action RPG Tutorial (Part 3: Tile Collision)

hello everybody and welcome to episode three statistically if you made it this far are you doing very well uh-huh if you look at any long-form tutorial series on YouTube there is always a big drop-off after episode one anything that you know any series with a lot of use is always a big drop-off after episode one another big drop-off Africa episode two and smaller or smaller drop off because by the time you get to like four or five you know mostly people there are gonna stick around till the end so if you've got this far us the things look pretty good for you statistically so well done this week we are gonna be looking at collisions okay and we're gonna add just as we did things a little bit differently with our animation we're going to do things slightly differently with our collisions we are going to use a tile collision system this time around I know I've sung the benefits of doing tile based collision before in the past but ie I will say that it's arguable depending on the type of game you're doing whether there really is that much benefit to doing like a tile based system over an object based system but I've never shown how to do a tile based system in a game before and like in a full project anyway so I thought it would be good to to cover that in this series we're actually gonna do a combination of both for aligning with different things but since the bulk of what we're going to be colliding with in the game is just like our background scenery like walls and houses and rocks and stuff like that things that are static and unchanging in the environment I think it makes a decent amount of sense to use a tile based system and we're before our player a player is only going to collide with these tiles based on a single pixel just that bombs just their origin point just this point here it's basically going to be what our player is to the game world in terms of the the tiles that we place we'll use the collision mask that we created for colliding with other entities and things like that that are more specific and make more sense I think to work as collisions between different objects and instances because they'll be less of them to actually calculate the collisions between and for the the rest of the world we're just going to use a super-fast system to check the collisions between just a single point on our feet our bottom center of our player and a tile grid okay just it just makes things super cheap super efficient and easy to look after so we're gonna get started as we usually do by adding a sprite of some kind it seems to be how we start a lot of our episodes so I just got to close everything down and I'm gonna press alt s and bring in a new sprite I'm gonna call it s Cole okay Cole being short for collision and I just do that because I get sick of writing the word collision over and over again so I just call it call you're gonna go to important we've got our own our assets here I'm gonna pick s cold PNG if you're using the the assets available with this series it's really not that much I good I just made a new one really 30 by 30 sprite split into like 60 by 60 squares with just a 16 by 16 transparent red square in the top layer top right corner is exactly 16 pixels low like this yeah you see like selection you can see like a bomb bottom there selection area 16 by 16 okay so make sure it is because we're gonna split this into a tile sir I didn't actually need the space down the bottom here but I thought it helped just for the sake of clarity okay so you can you recreate something like this very quickly if you want to it's really not that difficult you can turn this grid on as well up here to help you with stuff like this when you're making tile sets and set the grid size with whatever you want so the color to be whatever you want and so on that's quite handy as well well as you can see help here the top-right 16 by 16 square you might be wondering why I done this in the top right of a little grid why why isn't it just a single sprite by itself when you make well rather than explain it now I'll just I'll show you I'm gonna make a tile set next okay so I'm gonna go to tile sets right click hit create tile set or just create in a myriad of different ways you can use the interface to create a set however you want you'll end up with this and I'm going to call it t of call and in sprite I'm gonna assign the sprite to Escom okay and I'm just gonna use I'm just using the middle mouse to drag around this and then control the mouse wheel just to zoom right in or you can press this as well oh okay I thought that would seem to fit on a center fit that's the one there we go I'm just to zoom in on it and you'll notice like it's split into three here I don't know if this is the default or if I've changed the default it might be on something like 30 by 32 if it is just makes your tile wet from tile height are 16 by 16 and you'll see this grid appear and you'll notice that there is no square on the top left and whenever you make a tile set it is important to leave a tile blank in the top left of the image okay so you're gonna split into tiles and this is why I couldn't just make this a 16 by 16 square because you need the first tile whatever your tile set is to be blank I don't know all the specifics of why it's just it's an internal thing to do with tile tiles that's are handled and they use this space to store some information I think about I don't know I don't know all I know is it needs to be blank okay he needs to be blind and transparent or rather it doesn't actually like you can put stuff in here if you want it just done it won't matter like that's not a valid tile okay so when we actually come to place at placing this tile around the tile set around our room editor we won't be able to place this tile so you may as well leave it blank because it's it's not gonna do anything okay so just make sure yeah the closer you actually want to use are not in the top line and as I say I could have made it this this size or whatever right I didn't need these two of the bomb I just thought that he'll make it I don't know I just thought it was clear somehow hey don't judge me alright so this is our tile set and all we're gonna use it for is to mark which areas of the game world we want to be collidable and which areas we don't we haven't actually brought in any of our background art yet but it's all gonna be 16 by 16 tiles okay and so Isis just marked out very easily so if we come to room 0 now I'm just gonna see member a bit there with control mouse wheel and in the layers over here I'm gonna add a tile layer okay that's just like Splinter little grid icon with create new tile layer as its tooltip click that I'll get a new layer gonna click it press f2 just to rename it call ok just we'll have a layer called call and it's just going to be the same way that we use in every room just to define our collidable areas where it says no tile set here and layer properties click that select T call to assign the tiles that we want to use and you can see it's automatically adjusted to give us a 16 by 16 grid now assume you have grid turned on in the room editor and we've got this tile library select o whatever you want to call it and as you can see in the top left this we've got this weird checkerboard one here that's just like a null sprite right so that's I say you can't can't use the top left avatar so anyway okay click our red transparent rectangle and just I'm just gonna draw a world I guess eventually we'll make this layer invisible and we actually bring in some of our background are but for now just just paint some stuff around the place ok or whatever you want just so we have a will to walk around and we can test the collisions are working alright so with that in place let's get to work actually making this work so go ahead and close room 0 come to a player go to the create event and right at the top here I'm gonna put a line in to get the ID of that layer okay cuz we're gonna need it I'm gonna type collision map equals layer underscore tile map underscore get underscore ID okay and basically it's gonna reach into a particular layer that we have in the room and find the ID of the tile map that is on that layer assuming there is a tile map on that particular layer but to do that we need to give it a layer ID first of all just to be clear here I'm towing there's a layer call and then the tile map on that layer we're trying to get the ID of the tile map so we need to first of all tell it which layer we're trying to find the tile man above that's what I'm doing so inside the bracket floor tile map get idea I want to type the layer get id Open bracket quotation mark call quotation mark close bracket close bracket semicolon alright that's the full line we just provide the name in as a string here call in to layer ID that provides the ID of the layer we're looking for and then we find the tile map on that layer and we store it in collision map then that's what we're gonna check against when we're looking for collisions and let's maximize this when you're working with a bunch of code so maximize that right click go to add slash open event go back to our step event where we have all of our lovely growing week-by-week logic for off layer and get rid of this section okay this is where we were committing to our movement all right so we've worked out our inputs would work that would calculate where we want to move and then we actually commit to the movement select that our X + H beam y plus B speed just delete it because what we are going to do with our collision and you'll remember this kind of logic if you've done my platform a series or anything like that is we're gonna look for a collision on a horizontal axis and then commit to whatever horizontal movement we want to do as a result of that then check our vertical axis and then move if we still want to move on that axis okay so we're going to be doing the collisions before each particular movement commitment if you will so what I'm gonna replace that with is a player collision open bracket close bracket semicolon and that'll stay grey might even yet provide an error or whatever because we're just going to put a script here just as we did with player animate spring we're going to make a script called player collision and that's going to handle our collision and our movement the reason I'm putting this in the script is eventually we're going to make a state machine um don't worry if you don't know what that is um but eventually we're gonna need to reuse this code in various places and it helps to not have to copy and paste it so we're gonna put it in a script so right click in scripts hit create script and make sure you name it exactly the same otherwise obviously code won't work so play a collision if I then save that come back to here or if I reopen that eventually it will ya it'll eventually turn yellow again so get that script up and with that script up the first thing we want to put in it is var underscore collision equal false again this is something we're not going to use right away but eventually some of our different states and other uses of this script might want to return whether or not there was a collision and to do something about it it won't matter for our basic moving around because it's just going to affect our movement speed that we're going to do in here but it might matter later on in future episode so just get that in for now in fact at the bottom of the code we write return underscore collision okay and then all of our code is gonna be in the middle here to basically determine whether or not there was a collision and then the script will send back whether or not that was a collision as I said not important for this episode but will be important later so get it in now okay so the first thing we're gonna do is check our horizontal axis I mean make a comment horizontal tiles okay to distinguish from horizontal entities that we will do later has a different type of collision check they're just checking our tile mount first of all if Open bracket tilemap underscore get underscore underscore pixel open bracket a collision map that's the variable we store the time map idea in earlier then we just want to provide the coordinates of a particular pixel and we're going to check that pixel on this tile map see what tile is there okay so X + H speed that's the position we are about to move to write and Y is just Y a close bracket close bracket now this will actually return a bunch of info if you've done things like blends and rotates and stuff to your tiles then doing this won't be enough you'll have to then go ahead and get like a tile map get index from this data or something like that icon remember the specifics but since our time map is is very very simple and all we're doing is just placing this one tile around the room basically the the data we're going to get back is either gonna be 0 I will for no tile or 1 for tile 1 if we were using like tiles 2 & 3 and so on so forth then obviously there would be more day like you could get tile you get you you're basically getting the tile index back right but for us in this situation we're either getting 0 which is no tile or we're getting one right which is very handy because then that means we can just do an if with this and it's getting back to 0 or 1 which is equivalent to true or false so if this comes back as 1 then we know we've here red tile and if it comes back as 0 then we haven't hit any tile ok so we know there's going to be a whether or not there's a collision where we want to move horizontally so assuming there is something there is a collision where we want to move horizontally what do we do in here as a result we do X - equal x mod 16 which is the size of our tiles in fact I am going to make that a map for is I'm gonna write tile and discuss size in all caps and go to macros on time - macro tile I'm just go 16 ok that'll turn red whenever game McAfee there we go whatever game maker feels like because that's that's gonna be consistent and if we ever want to change it and just change it there so come back to our script now so what does this line do so for those of you who don't know what mod does is it returns the remainder of a attempted division in two whole numbers right so we're going to take X see how many times tile size goes into it and return whatever is left over so if this since tile size is 16 if our X was 18 16 goes into 18 once with 2 left over right so it would return to what that basically means is it's going to put the the very left of whatever tile were currently in which makes sense if we are running to the left and we're about to hit a wall we're on like pixel 2 of this particular tile in the grid here say we're trying to move into this one we don't want to so we're gonna move to the far left of this tile but you might be thinking well why for moving to the right we want to meet to the far right this time and that's true so what we want to do is say if sign nos nos I sign open bracket H speed close bracket equals 1 close bracket again and so if our H speed is positive then we want to move to the far right of the tile instead okay but that's very easy to do it doesn't matter that we've done this ahead of time anyway we've just we've done that so we're at the far left of the tile regardless but if we were moving to the right we want to be at the far right of the tile so X plus equal tile size minus 1 okay so if we wanted me so we've already moved ourselves 2 pixel zero or pixel 1 rather of they're not the tile so we wanna move to the very far right if we added tile size entirely we'd move to the first pixel of the next tile ok so we want to move that amount minus one we will move 15 pixels to the right after moving to the far left of the tile we're just going to move all the way to the far right okay and so that guarantees is that will be on the the very border of the tile okay that's it's very handy because this just super quick maths and lets us just snap to the appropriate position whereas if we were colliding with objects as you might remember for the platformer we have to kind of do it like a while loop and check every single pixel along the way and move as close as possible to it but since we know exactly where our collisions will take place along a fixed a grid we can do very quick maths by dividing with the size of the size of the tile to position ourselves perfectly it's one of the biggest advantages of doing a tile map collision system after that we obviously want to reduce our horizontal speed to zero so we don't want to move anywhere else the spring so I hate speed equals zero and set our collision to be true because we know we found a collision collision equals the tree then once we've done that so we've checked if there's a collision if there is snap to the correct side of the the tile that we're on set our speed to be zero so they don't move into the next tile set collision to be true so we'll return true at the end of the script okay that's everything we actually need to do as part of colliding horizontally with tiles all we need to do once we've done that collision stuff is commit to our actual horizontal movement so open a comment here and write horizontal move connect and then just replace that line we got rid of earlier X plus equal H speed and we're gonna do the exact same thing underneath so just select all this copy paste scroll all the bottom make sure we don't accidentally change any of the above stuff I change this to vertical tiles change this to vertical move commit remove the plus h speed from the end of X here and put plus V speed on the end of the y here don't just change it around that's the common mistake that leads to a lot of problems make sure you put it on the Y change X minus equal X mod tile size to be Y minus he cool white Mon tile size okay so that's gonna put us at the very top of a frame if sine H speed equals 1 no if sine V speed equals 1 then y plus equal tile size minus 1 V speed equals 0 collision of V speed equals zero collision inkle true and first cool move canet is just V plus equal feed speed so we just swap all those variables around the only one you need to be careful of is up here because like it can be easy if you're just swapping the Y DX's to wise and so on to just just do that up here but you need to make sure you move it across from being where we put the x-coordinate here X plus HB you to being at the far end for y plus B speed yeah okay just be careful with that one then all we need to do is come back to our players step event um I think I closed that a while ago but here we go come back here play a staff event and oh I was gonna say put player collusion in but we already did that earlier it's there waiting for us that's everything then that's everything we need to do so I'm just gonna press ctrl s just a savegame and press f5 to run and Oh what did I screw up a variable Oh player dot V not set before reading it yet V is definitely not a variable when you use some of you will spotted this in the video already but we make these mistakes you know mistakes happen um it's good to show what will happen if you make a mistake so come back to player collision and let's find where did that I should have looked in the area to see where I actually made that mistake but I can see now it's here vertical move commit it's not V Plus V speed it's obviously y plus equal V speed okay mistakes happen okay so save that try running that again here we are running around the world if I run into the walls all right for them cool you can see I'm kind of behind the wall at the moment I guess we can quickly fix that if I come to the room editor just drag called be underneath instances it eventually gonna be invisible anyway but just for now just so you can kind of see how that works you can see using it's it's just based on this one pixel that's our bottom center aloneness decline with these walls while also just sort of appearing in front of them you know resolve 3/4 top-down perspective and it works pretty flawlessly on pixel perfect like it's really easy to do this kind of collision system when you're just working with one pixel and a tile map it's super cheap super efficient you could argue because we're only using fairly small rooms throughout this project you know you're not going to run into a huge cost problem by using objects and entities for collisions if you prefer to do it that way but I thought it was good to show of how you can very very easily write a tile a collision system for a game like this and yeah we're gonna stick with it thanks everybody hope you enjoyed part three remember if you want to get your hands on the source code there's a link in the description that will show you how how to do that you could also while you're in the video description you could go visit my patreon that's who all these cool people are they're the cool people from my patreon who helped me do what I do every week special shout outs in particular to these particular patrons in no particular order are me on the stir ro barbarian Bailey raid Bowser the dog Bertie T cabbage pants dhaka dawned ago Dark Riders zero three one eight do what do be Frederick hey Bella gargoyle Drake Hannah QC hair a youngin James L Andersen James Higgens Jason Christopher king leo maria celeste de oliveira frailing max n Nathan Wilson Owen Morgan pixel mush relentless Rex Reni Dan Robert church's Rovin darlin run roopinder Schaeffer Scott Matthews semion yo like aglow Stephen Hagen T lesson Travis Womack Tyler Hubble Victor Stewart Ville Virtanen Sofia flame xenon may thank you all ever so much and thank you for watching cheers guys catch you all next time

Channel: Shaun Spalding

Views: 64,219

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: sfMNRDzKXtc

Length: 23min 30sec (1410 seconds)

Published: Fri Jan 24 2020