GameMaker Studio 2: Tile Collisions

hello so I'm guessing you've made a lovely level and gaming studio to using the new tileset system and now you want to learn how to get an object to collide directly with that tile map rather than the usual method which is to create a wall object of some kind and spray that all over your level how do we do how do we use the tile layers to just create a nice collision mask that we can collide against doing this isn't a whole lot harder or really all that different to do in collision checks against wall objects but it is a bit less flexible in the long run but it does run way faster and it makes level editing and room editing a lot more bearable as a number of advantages in that regard so let's get in there all I have at the moment is a basic environment not even platformer physics just a rectangle hitbox I can move around just so I can demonstrate the collision it's not even even I think the central routes over here somewhere just so we can show that it works with any kind of arbitrary rectangle shape and that's all we really need we don't really need to if you want to wrap this you could it works exactly the same if you're going to do a top-down game or a platformer game whatever it's just collisions right and so this is all we really need first of all though I'm gonna make it layer dedicated specifically to collision that's just gonna keep things easier to control and I just have a simple tile set for doing this so if I come into my room here I'm just gonna add another tile there you see I've already scoped kind of a basic thing with the tiles and trees and mangroves just to sort of have something that looks vaguely like a video game I'm gonna create a new tile and we're gonna f2 and call that collision and I'm gonna select a tile layer of god this literally only got a tile set rather I've got that only got one pile in it just a saw semi-transparent Blue Square you can use whatever you like really yeah if you want to make your collision stuff more advanced later on you may have slope masks or something in here later but this layer isn't actually going to be visible to the player we're just gonna use it to mask out the shape of the level so I'm going to do that now okay so that's everything we need um I'd say I can just click this little eyeball up here just to turn the visibility on and off for this tile layer and while it's off it's still gonna work okay our code is still gonna find the tiles there it's still gonna work with the tile map data it doesn't care whether or not it's actually visible so we can use that just to be able to create the mask of our level in the level editor and then it won't actually appear in the game just the same as when we were using objects for collision with the other system okay so let's come to our player object now that's good of the workspace of already got a movement over here and just in the create event the first thing I want to do is get the ID of the tile map that we just created okay cuz I mean this is a tile layer and on that layer is a tile map and we need to get the ID of that tile map for our player to be able to work with we only need to get it once unless we were updating the tile map and changing it mid game or whatever then we would need to update it every time we did that but for now we're just going to assume that our time map is fixed throughout and we're just gonna get it once at the start so I'm going to type tile map just as a variable equals layer underscore tile map the score gets and just got ie D and then open brackets and I named a layer collision so I'm gonna type in quotation marks collision all may involve the layer okay and they'll get the tile map ID from that layer and now it's just stored in this variable and we don't need to call this again we just call it once when the player is played when a player is created and we're set to go okay so that's all we need from the create event I'm gonna call the staff about now I'm gonna maximize this and bring this away because it's basically worker we're gonna be doing everything else okay and we want to be able to see what we're doing so as you can see my movement code in here is incredibly basic I just I get my inputs we work out where we want to move and we move that and so if you've done in collision stuff before you'll know that once we know where we want to move what we do is check to see if we can move there and if we can then then do it and if we can't then reduce our speed to zero and move as close as we can okay in this case with our 32 by 32 grid we're gonna basically snap ourselves to the grid in the direction that we're moving when we find a collision what we want to do is detect basically when we're moving in any direction we want to check two points okay we want to take the pens in which direction we're moving if we're moving to the right we want to check the top right and bottom right of the collision hitbox the bounding box of our object okay if we're moving down or when I check the bottom left and the bottom right if we're moving left or when I checked the top left and the bottom left or if we're moving up or an object top left and top right okay just those two points and each one okay this does mean that I check in it this way you kind of want to keep the collision box smaller or either the same size or smaller than the size of your tiles okay mine's like 30 by 32 just arbitrary kind of square rectangle thing but it's in a 30 by 32 to make sure it's this size or smaller okay the reason I say that is because otherwise you could end up with situations you could avoid it with level design but like you could end up with situations where you could if the top and the bomb goes off over and under a collision you could stop move through a block and so on if you want to make hit boxes are bigger than your tile set then you could do that you just have to work a work in like an extra point check so you have to check this all the middle and as well as the tops and bottoms and so on okay and so let's do this for horizontal first because it's on top here first of all we want to check to see which direction we're moving in if we're moving left or right because as I say that effects um which points we want to use in fact before I do this right the top here I'm gonna write VAR b box side okay and does the variable that's just gonna help us track which side of the bounding box we want to check if we're moving left and it's left right then it's right up then up and down it down you know so so first of all just a horizontal stuff then if HSP greater than zero okay so if a horizontally is greater than zero then we know we're moving to the right otherwise reason not moving at all or moving left if we're not moving at all that none of this will matter because obviously it's not gonna be our eternal collision then if there's less actually less than zero then obviously it's negative or we're moving to the left so if we're moving to the right B box side is gonna equal B box right you see that one turns green that's a built in thing vandenBosch right gives you the exposition of the very right edge of your bounding box okay really really useful and that's no matter where you are in the room they will return the x-coordinate of the right edge of your bounding box and there's a similar one for left top and bottom which we'll be using throughout this okay I'm going to semicolon there which ends that if statement but then right else on the end of it so that's not true then we do not factor which is B box side equals B box underscore left okay so either we're moving right in case we want this to be our right side otherwise we want it to be the left side okay simple stuff next up I'm gonna check the actual tile map okay from their tip if Open bracket I'll map get pixel some of you more advanced among you the moment you see that this command exists you probably already know what to do the further hole the rest of this so go ahead of the rest of you stick around atomic get a pixel title map comma key box underscore side plus HSP okay similar to what we do with our regular collisions when we just check a position okay but we're checking the specific pixel yeah and the y-coordinate is B box oh okay and we say that's not if that's not equal to zero so let me explain this line a bit better so a tile map get a pixel basically we take a random pixel but not random because when we take a given pixel that's this coordinate in our room and we compare it to the tile map and we work out what cell of the tile grid that is it just does some very simple maths to work that out it's really quite a quick check simple math works out whereabouts in the grid that pixel lies of what tile from your tile set is in it okay the actual returns of their data so it returns like whether or not it says the index of the tile security of what tile is that but if the tile is flipped or rotated as well which is something you can do with tile sets and so on it will return that data which will make this more complicated than just an integer but where since this is just a collision layer I'm going to assume that you're just gonna use just one tile you're not gonna be flipping I'm rotating it or doing anything particularly weird with it okay so it's fair enough just to check if it does not equal zero so if it's not zero then we know that there's something in that entire okay simple as that and if there is something in that tile on tile map which is our collision layer that we know it's one reads and we know that that's somewhere where we're going to collide okay the position for that is I say say the very top of our bounding box for the y-coordinate and whatever side we're using so either be box right or be box left plus our horizontal speed so that's the position basically the top right of the box if we're moving to the right okay and the top left of the bounding boxes were moving slowly okay but we also need to check the bottom so let's type in or command in here that's to the cool lines like that or the or command I'm pretty sure works just the same open bracket tile map yeah pixel it's the same command again tile map gearbox side plus HSP key box bottom this time okay does not equal zero again as well so we can see the whole line of code let's check I've got my brackets correct there yeah okay so it's the same line twice that one is just checking the top right and one is just taking the bomb right or if I move in left be books itis left so the top left or the bottom line okay so if one of those is one then we know we've got collision either the top right of the box or the bottom right of the box is here hello wall so we we know if either of those are true then we're colliding okay both of them can be true or either one of them can be true and if neither of them were true then why not and we can go ahead and just do X plus equals HSP so normally in here what we do is like a with a regular collision we do like a while loop right and we've moved like the object closer and closer we're not going to do that we're gonna be a bit more clever about it and we're just going to quickly in one step snap ourselves to the 32 by 32 grit because we know that our tiles are always going to be 32 by 32 blocks in the 32 by 32 grid so all we need to do is snap the edge of our bounding box just against against the grid okay so how are we to that well basically we're just gonna do a little bit of clever maths HS if HS be greater than zero again you'll spot for out this by the way that there are little optimizations I could do like I could calculate this just once and put it in a variable but I do things like this but for two reasons to keep the logic laid as bare as possible to make it easy to understand and also to cut down on extra lines of code writing for efficiency reasons and just to make the video shorter cleaner and easier to understand so sometimes you might see me write things so I'm not necessarily the best way to write things but it has been thought about okay has been thought about and has been done in a specific way to help you learn the best things possible so if HS B is greater than 0 again so if we moon go to write it again x equals x minus Open bracket X more 32 okay so this is new this is a fun little maths function you can also do it by using the percent symbol which is basically it's like it's meant to look like the divided sample cuz it's very similar to divide what mod does is it divides the first number by the second number but instead of returning the answer of the division so X divided by 32 it returns the remainder of that division okay so it's just some examples a 13-month 32 32 goes into 30 0 the whole times okay it's 2 off going into it one whole time so with 30 left over okay 42 mod 32 with 32 goes into 42 once with an extra time left over Oh cakes it's 10 more than 32 64 132 or even 32 mark 32 with both equals 0 because they 2 goes into 30 once with nan left over 32 goes in 64 twice with 0 left over ok they we go into it 66 however 132 would go into it twice with two left over because it's two more than 64 okay so hopefully that gives you an idea about how mod works okay is division our integer division sort of like the whole number time you go again and then it just produces the remainder of that division okay the reason that's useful to us is because by taking our current x-coordinate and removing X mod 32 from it it snaps us to a 32 by 32 grid left of wherever we are so if our exposition is currently say that's it's 38 okay we take 38 minus 38 mod 32 okay and that will give us 38 minus 30 goes into it once with 6 left over 6 which gives us 32 right so that snaps us to the 32 by 32 great that's what Bank does always to the left side of it but we're moving to the right so we actually want to snap to the right-hand side of this so how do I do that well pretty easily actually I just add 31 okay so if we're at 0 if we end up snapping to 0 we go to 31 if we're at 32 we're not going to 63 and so on so why am i adding 31 well because that's the actual width of the the tile set the tile grid rather from the top left of the tile greatest pixels 0 and the far right of that first cell is pixel 31 that's the far right edge if it would be 32 that would actually put one pixel into the next so okay now put it on the far left of the next set which is not what we want one far right of the Sun we're currently in service they want just one pixel less okay I hope that makes sense and then that's basically in terms of putting our x coordinate in the right place but our x coordinate is where our origin is and I think of look the place right like it's in the middle here so it's going to put in that point on the edge which is actually she's not gonna be quite right what we want is to line the D if we're going right one a line up the right edge this edge here with with the edge of the tile not this point so let's come back into here now all we need to do is adjust this position now by however whatever the difference is between our origins rx corner and the the bounding box on the right okay so we can generally do minus key box right minus X okay so that's the very right edge minus X which will give us the difference between the two and then we just subtract that just to move as a bit further left there just by the right amount by however wide our rectangle happens to be I'm gonna do a few of these in brackets and technically it was another sort of optimization thing you won't want to do them every single frame because this is gonna be the same no matter where we are in the room this value will always return the same amount it's because it's literally just gonna be the difference between this position and this position like in whole pixels no matter where we are in the room so if you want to optimize further you could put this into a variable and the creative that Bursa and I'll skip that for reasons of keeping it clear what we're doing so next line but this handles whether when we're moving to the right okay exactly what we want to do and we'll remove their left we almost want to do exactly the same thing but it's just a little bit different than the right else underneath yeah so if that's name is true then do that but if it's not then we do this which is x equals X minus X mod 32 so the same thing again but this time we actually want the left edge so we're not gonna add the you want we don't need to add the 31 on because we've got the left edge that we were after instead all we need to do is do the same thing again but where we're subtracting this difference but instead of getting the right-hand side we get the left and side okay because it might be different and you can see it is by the pixel here is a slip the origin is slightly more leaning towards the left on here we want be able to work no matter what shape our box is what come out what sort of size our boxes rather dimensions of it whatever is the most accurate thing you feel think to say that Sophie box underscore left minus X okay this is the exact same thing it's just it's just the different sake about okay and that snaps us to the grid that's all we actually need to do that other than just I'll speak to zero okay and that's the last thing we did the last time we did a clear anything now should be everything then I'm just gonna comment that with horizontal collision and quickly run this just as check that this is all working and I've not forgotten anything done and you see I mean I've left left the tile on display me here but that's perfectly good just by highlighting that it's working properly and if I move vertically it's not gonna work and it'll do some weird stuff because the horizontal collision will be working but the vertical isn't doing anything yeah okay that's all working as expected oh my look did I leave a gap yeah look like I left a little gap in that vision oh yeah okay that's still bad and so it looks proper good and while we're here I'm gonna make this invisible yes and then that'll demonstrate that it works regardless of whether it's visible so for vertical collision you might have guell guest we're just literally gonna do the same thing copy that whole chunk of code except the bottom line obviously changes to vertical collision change every instance of HSP to a VSG then that's already gone the bomb and there's one thing here you may have already noticed which will come back to budget change although the HSBC BSP for obvious reasons change all the wise they access to wise right so all the same values otherwise but in here where we're checking the the tile map of the first place we want to check the actually before that will comfortable will do it from the top that's probably makes more sense so be box side in this case isn't going to be laughs that's gonna be top or bottom so if IV SB is greater than zero we're moving down so we've oxide once a Vav box bomb or bi oxide wants the VB box top okay and then we really want the bottom left and bottom right or we want the top left and top right so let's swap this around put it there and fill this with so we'll check the left side B box left so the top left or the bottom left here plus lot of current vertical speed and do the same thing on this side let's pick this up actually sure done that before cut that paste not the B box right okay see that the top left or the top right or the bottom left or the bottom right okay just otherwise just the same thing okay so then once we've done that let's come down here we need to change this because if we're moving to the right we want to check the difference between if I'm moving down sorry if the SP is greater than zero you wanna check the difference between the bottom edge and the like Oh honest it's change big all right keep the box bottom and here change B box left to be box oh okay it's top this the negative direction and less is the negative direction and right is the positive direction and bottom that's the positive direction okay and that's everything now should cover everything that should be pixel perfect clean collision handles corners handles everything so yeah just neatly pixel perfect just snaps you to the grid if you would collide okay which is a lot cleaner a lot more efficient than doing sort of a while loop with object collisions and doing moving like one pixel at a time on a single step until you get like right to the edge and all the logic we used to use before and let's just it's a far more efficient track in general in just the tilemap just just checking a grid and just using simple math like the whole thing is just very simple in maths based it doesn't really have to get much data from like any specific pixels or anything like that really so game maker just crashed but the last thing I was going to show you is that this really doesn't work with any kind of shape of player sprite or what it well any kind of rectangle that you can imagine so let's make it a bit bland even sided as well and just so it's a bit of a different shape to I've been working with so far you will want to make sure though that your origin is still sort of inside the bounding box doesn't have to be perfectly centered or anything like that but just make sure it's in it if it's outside it they can create some issues with how we worked out so the difference between positions and so on but as long as the origin is we're inside your bounding box it should work just fine obviously a bounding box is automatically calculate from the shape and that's why I'm just using a square it's not precision mask or anything so if I run that I should just work in the exact same way yeah all collides perfectly pixel perfect and flush against the mask that we created nice and clean so yeah that's how you do it that's how you create um that's how you create collisions between a player object and a tile based collision mask thank you very much for watching I'll catch you guys next week on platformer part 6 I think something like that platformer yeah I think it's bit think it's part 6 anyway I'll see you guys then thanks for watching catch you guys next time a big thank you as ever to my patreon supporters who selected the topic for this week's video a special shout out in particular to in a mule Alex Ray Charles Montgomery dan angel rodriguez Harold Guidry Ron some Stephen Hagen Jason McMillan and Owen Morgan I hope I've been saying all your names right this whole time I apologize if I haven't I'll see you guys next week

Channel: Shaun Spalding

Views: 87,078

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

Length: 23min 39sec (1419 seconds)

Published: Fri Sep 01 2017