Faking 3D Using Collision Layers -- GameMaker Tutorial

hello Joe welcome to another game maker tutorial my name is Alex let's get creating alright so in this video I'm going to be showing you how we can create a fake three dimensions in two dimensions using collision layers and how we can set up a very neat organized system that will allow us to toggle between these layers whenever we want and to create this look here on this screen so I'm going to show you this project I have one other example and then we're gonna get into how to create everything so just to demonstrate what I mean by this let's take a look at this project and here you can see I have this little player moving around pretty straightforward and I have collisions defined for the player to follow okay so I can't go off the bridge I can't walk through walls but if I come over here now I can come down this staircase and now now that I'm in the water when I come back over here not only am i under the bridge the collisions aren't the same I actually can't even go this way and I've now opened myself up with a player to this whole new world of you know exploration and movement that wasn't available before and now I can come back over here I'm back on the land I come up again through here and I can't go into the water we can even go explore over here some more and again I was able to go under the bridge and now let's go up here and now I go over the bridge and I can't step off of it so this is this is a really easy and simple straightforward way to kind of create this illusion of three dimensions using collision layers so we're gonna get jumping into that in just a second I'm gonna go ahead and show off one more example of how you can use this technique in implementation this example I'm gonna be showing you is from the game makers toolkit game jam of 2019 that I just did with a couple friends and I'm just gonna kind of demonstrate real quick how I use the same technique to create a very cool effect so in this game it's the theme was only one and you basically just have to race to get to the bathroom and only have one but one thing that I wanted to do is I wanted to add ability for the physics objects that exist in the world to kind of be compartmentalized to the bathroom and then the real world so in a second once turbulence hits and you're on the toilet you'll see that you know crap starts flying everywhere real mature humor Alex I know but what's I'll demonstrate what this effect looks like in just a second okay so here you can see that a bunch of physics objects have been created up in this room that we have and when I get up they fall through the door and now they're in this airplane so and then if I go back into the bathroom well it looks like everything fell out and there are some bugs here but what happens is it allows us to by setting up these collision layers that I did it allows these objects to transfer from one room quote-unquote to the other even though this is all being taken this is all taking place in one GameMaker room so the way this is happening is there's just different collisions on different layers and as the player transitions from the bathroom to the airplane we toggle on these collisions and that allows the objects the physics objects to move around in the world and behave differently and so that's just another application of this feature and how you can use in your game that's kind of a little bit more of an abstract implementation and was a little more complicated to implement but for this example here that we're gonna be going over in this tutorial I think it's a little more straightforward and makes a little bit more sense okay cool let's close it let's get started now I am gonna be working off of this base level project so if you don't have something to work off of I recommend you check out another YouTube tutorial and get yourself just a basic top-down RPG style game with basic top-down movement the art assets that I'm using in this video I will link to in the description down below it is an asset pack on itch that you can purchase for $5 okay so the first thing that we need to take a look at is our room setup here so we're just going to quickly go over all the layers that I have set up preemptively explain what they do and then we will get started with some programming so controllers instances and background are pretty common to a lot of projects we worked on before so I'm not going to for them the only thing you need to know is on our controllers we have an object called obj game which is our game controller and on our instances layer we have obj player which is obviously our player object background is just this blue color and so the only other thing I really want to cover are these tile layers now these tile layers are important because in this game we are creating two game layers so to speak so what I mean by this is we have the player on the land the top of the land when they're walking around up top and then we have the player when they're in the water now keep in mind that this area over here this dock and this ladder is all part of this top land layer so we're just gonna call it the land so to speak and then everything else is this water now I named them land top land bottom because this doesn't necessarily have to be water per se it can be anything it could be lava it could be more land it could be grasslands it could be I don't know whatever you want on this second bottom layer and you can reproduce this concept over and over and over again to create as many different game layers as you want but just know it is gonna get a little more complex the more layers that you have but for this demo we're going to be showcasing just to the top land area that you're gonna walk on and the water and the reason I chose water is just so it's very clear the distinction between when we're on one layer the land and when we're on the other layer the water so because of this I have two layers called tiles land top tiles land bottom and if we take a look at tiles land top this looks pretty straightforward these are all the things that are going to be under the player when the player is on that top layer of the land but then as we transition down into the bottom layer of the land these are all the tiles that are going to be under the player when they're in the water so if the player swims up to this wall we still want the wall to fall behind the player in depth and so that's why we have these separated off into this separate layer now this is going to make sense because we're gonna start to create new layers in between these and so that it's gonna make sense why we have these split off instead of just combining them into one for now we're starting with them just like this but like I said we will be creating new layers so that's pretty much all we have for room setup I recommend that you just take a moment pause the video and make sure that your project that you're working is set up similarly because we're gonna be building off of this moving forward all right so let's get jumping into some code so what we need to do is we need to first kind of set up our collisions so our player already has some code for movement and navigating through these collisions I'm not going to be going over them but we basically just have everything split up into two states a move state and a swim state and so they're going to be looking out for a collision object and that's going to be determining where the player stops moving so just to demonstrate this let's go ahead and create our collision object I'm gonna call it solid just because we use that name solid a lot in the past and I'm going to make sure that yep we were using obj solid for this project as well so we've created an object called obj solid I'm going to give it a sprite and perfect so now we have our obj solid so the first thing that we should do is we should just come in here and create our collisions and place them where they need to be so I'm gonna create a new layer and I'm gonna just call this rename layer and I'm gonna call it collisions land and for simplicity let's just rename these I'm gonna rename these tile layers to tiles land and rename two tiles water just to keep the distinction between land and water very clear so okay so we've created a new layer called collisions land and let's go ahead and in here we're gonna come in and drag our collision object everywhere that we need it to be so I'm gonna resize our grid just to make it a little bit smaller since our collision object is 16 by 16 I come to resources and I'm gonna start to drag my oops let's specify our collisions land is where we want to draw this I'm going to start to drag and drop my collision object into my level to set up and define the collisions for the player okay so we've placed all of our collisions everywhere the only ones I have left to place or the ladder and I and I just wanted to point these out that these are going to be on the outside because we are going to restrict the players movement to be just inside of the ladder and for our intents and purposes in our perspective this chunk of water right here is going to be a you know quote unquote solid and we're gonna do the same for this bridge over here so we've essentially and so we've successfully laid out all of our collisions for our normal land and if I go ahead and hit play we should be able to move around and collide with the environment correctly and everything's gonna look just fine alright so you'll see that we can walk around we can collide with the walls just fine but when we come down here we're still walking on the water we're colliding with the bridge even though we aren't on the bridge we're underneath the bridge supposedly so now we need to start setting up multiple layers so we can achieve this visual effect so the first thing I think is the easiest to do is to come in and create a new layer and we need to define it as collisions water so this is where the whole what I call this video the collision layers comes from is because we're essentially creating two layers with two separate sets of collisions and we're gonna toggle between which one is active and which one is inactive and then that way the player will just only interact with whatever collision layer is currently active so in order to achieve this we've already to our collision I'll and collisions let's go ahead and define our water collisions so we know where the player can and cannot move when they're on the water layer so I'm going to do the same thing I created a new layer called water collisions water I'm gonna come in here and I'm gonna drag and drop my collision pieces into a place that makes sense for water collisions all right so we've successfully placed all of our collision boxes everywhere on our water layer and now if we look we can see that we've not defined any sort of collisions here on this water space right here so the player would theoretically be able to come right through here and move right through here without any issues whatsoever but they'll still collide with these walls and this is essentially what we want to happen when the player is swimming around so we have both of these collision layers on but if we just hit play right now the player is in a collision object so it's not gonna move anywhere but it would just start colliding with everything so what we need to do is we need to find a way to turn on one layer and turn off the other layer whenever we want to so let's go ahead and do that right now so inside of our obj game object we're gonna open it up and we're going to create a new variable and we're gonna call it global dot collision layer and this is going to be keeping track of the current layer that is active in our game in order to do this we're gonna create an enum called layer and these are going to keep track of the two options land or water so we're gonna just specify on create which one is active and we're gonna say layer dot layer dot land and this is the current collision layer that we want to be active now what we can do is we can now look at this variable and we can update this variable whenever we want to and then update our collision layers based off of the state of this variable so let's go ahead and create a new script that is going to do this for us so we're gonna create a script we're going to come in here and we're gonna say updates collision layers okay so now this script is gonna do this is going to do all of the toggling between the layers so how do we do that well the first function that we need to know in order to understand this concept is a built in game maker function called instance activate layer and instance deactivate layer both of these scripts are built into game maker and they're going to be the core of this whole project so what we can do is we can pass in a layer ID or a layer string name and this is going to be the layer that is activated or deactivated so if we Ord come in here and say collisions land and collisions water now whenever we call this update collision layers script we would just turn off collisions water and turn on collisions land so let's test that out so in our game events step event I'm just gonna put in a debug I'm just gonna say if keyboard check breasts and I'm just gonna tie this to P because that's been my go-to debug key so far and I'm just gonna say update collision layers alright so both of the layers are currently active if I hit P we can see that we turn off the we deactivate the water collisions layer and we activate the land collisions layer so now we're getting a little bit closer if I keep hitting P it doesn't really do anything so it looks like it only just turns off that one layer once but we can update our script to react to that global collision layer variable that we just created this one right here we can update our script to react to this variable and to toggle between them depending on which one this is so if we come into our update collision script here all we have to do is we can just say if global dot collision layer is equal to layer dot land so that means the land layer is currently active that means we want to turn off the land layer so I'm gonna say deactivate and we want to activate the water layer else if global dot collision layer equal two layer dot water this means the water layer is currently active then we want to do the opposite we want to activate the land layer and we want to deactivate the collision the collisions water layer so let's go ahead and hit play and we press P and we press P again and now what's going on we just have this one layer and we can't toggle again and what's going on well we need to also update our collision layer when we call this so we're gonna say on update collision layers we also want to change which collision layer is currently active so in this section right here if global collision layer equals layer dot land well we want to set the new layer we say global dot collision layer is now going to be equal to layer dot water and then we update the we update the layers so let's go ahead and pop this in here as well so now we're updating the variable when we toggle and we are toggling the different layers so now we should be able to toggle indefinitely between the two so if I press P so both of them start active which we should obviously fix but we see we can you see here that if I press P I can toggle between the two collision layers whenever I want so I can walk down here I can come into the water I can press P and now I have the water collision setup now you'll notice a couple things number one we have to manually trigger this with a keyboard press and we have depth issues where the player is not going underneath the ladder so how do we fix this issue well the easiest thing that we can do and this is the approach we're going to take is just create a new layer for the player and put that player on that new layer which is going to be underneath these tiles now the reason this is the easiest is because these this bridge piece right here is tiles and they aren't objects so it's really kind of hard to work with a depth sorting of layered tile and objects together so it's easier just for us to create a new layer move our player to that layer and then just toggle between those two whenever we need to so let's first start off the game by saying update collision layers and this is going to only set one set of collision layers to be true at the beginning of the game and I'm going to set this equal to water because of what's gonna happen is it's going to look at its water it's gonna deactivate the water it's gonna set the current layer tool and it's going to deactivate the water and it's gonna activate the land so by setting it to water we actually are saying set it to land to begin with kind of a sloppy solution but we can always optimize this later and make it a little bit neater but let's move on to the more important part which is setting up the depth sorting properly so I'm going to go ahead and open up my room and this is where we have to start creating some new layers like I mentioned earlier so let's go ahead and actually rename this instances layer and let's rename this to instances land and now we're going to create a new layer and we're going to rename it to instances water and these are obviously going to represent the current instances on the current layers now all we have to do is just drag this instances layer in between the tiles land and tiles water and now whatever instances are on this instance this water layer are going to be in between these two tiles and whatever instances are on the instance land layer are going to be above all of the tiles so all we have to do is when we update the layers is move the player in between these two layers as well and it will automatically do our depth sorting for us okay so we actually need to create one more object before we get into the actual transitioning of the player from one layer to another and this object we're just gonna call obj transition and this object is going to be the object that is the trigger from one layer to the other so whenever the player touches this object it's going to automatically trick transition everything that we need so let's go ahead and give this just a sprite and we're going to come into the room and inside of collisions water and land let's go ahead and turn off one and let's just work on the land I'm going to drag this obj transition object into the room and I can specify where I want the transitions to happen so obviously we want these transition to happen on the staircase here and we want the transition to happen in the dock here so I'm going to go ahead and drag these around just to specify that whenever the player touches these points we are transitioning from land into water now if we go back and turn off the land and turn on the water move to the water layer now we can start to specify the same thing for the opposite direction so when how do we want to where do we want to transition from the water back into the land and that's going to be these points right here so now we've specified our transition objects what we're gonna do is we're gonna go ahead and create a new state for our player and we're gonna call it player state transition all right perfect and in our player state transition and we're going to before we make that we're gonna open up obj player and in our step event we're gonna say if place meeting of XY obj transition where say state equals to player state transition all right so now we're saying whenever the player touches in transition object let's move into our transition state and this is going to be pretty straight forward state machine logic if you aren't familiar with it check out state machine videos and learn how to do that before moving forward otherwise this might be a little confusing again we are working off of a base level framework project so we are not doing covering everything necessary in this video so game maker offers a great built-in function for us that allows us to move an instance from one layer to the other and this is very simply layer ad instance now I don't love the name of this because this implies that it's adding a new instance or adding another one or creating some sort of object onto the layer but this is simply moving an object from one layer to the other so all we have to do is here if we look at our parameters the bottom we need layer ID we need instance so our layer ID is going to be instances water and we're gonna pass in our self as our ID now we want to move to the water only if we're on the land state and we want to move to the land state only for on the water so first we need to check if global collision layer equals layer dot land then we're gonna move to the water state and we're gonna say else if global dot collision layer equals layer dot water let's move to the land state so now we're gonna move our object from one layer to the other when we touch the transition object and not only that whenever we touch the transition object instead of pressing P to toggle between our water and land collisions we're just gonna call update collision players so now if we hit f5 and we run our game we should see that when we touch our transition object so let's actually turn them back on just for the sake of clarity so we can see everything that is happening all right so when we walk down here we're gonna come down we're gonna touch our object and oh what is happening okay so the that we're quickly transitioning between the two layers instantaneously and the game is freaking out and you can see this because our our layers are starting to flicker so how do we prevent this from happening well the first thing we want to do is this is a pretty hacky solution and I recommend that you find a way to try to improve on this if you can but we want to make sure that the player has moved through the transition object all of the way before they before the layers start to transition so we're gonna just set up a quick little chunk of code that's going to do this for us so I'm going to say switch facing I'm gonna get the direction that our player is facing and I'm gonna say if facing left we want to just lock our Y X movement position into a left movement if facing dot rights we want to lock our X movement into a right facing movement and we're gonna repeat this for our other directions why - equal one now this is very specific to this project depending on how you implement this feature might be a little bit different in your game but basically we're saying when we're in our state transition States we need to just keep moving and then if not place meeting XY obj transition now we want to do all of this code that we just created okay so let's go ahead and run this project again so I move down here and all right so we have we aren't ever moving out of the States so I'm just gonna have my player transition itself out of this state now again this is stuff that I've pre specified for this project but I'm just going to say state equals player State swim state equals player's States move okay so now we will transition out of this state we don't get locked in here forever let's run this one more time all right so now what we do is whenever we touch one of these green transition blocks our character gets locked into that movement it's already facing and then once it's no longer touching that transition block all of the code that we wrote triggers automatically so now we can move between these layers just fine without any issues and as you can see our layer ad instance is working properly because our player is now getting added to the layer that is underneath the bridge tiles so that's pretty much everything for this video now there are some bugs with this code like for example if you walk right here you get locked in this movement forever all the way through the ends and it's pretty buggy and not great but as I mentioned this is just kind of an example to show off how you can use this feature I recommend finding a ways the very simple fix for this and we're not going to do in this video but if you are curious the very simple fix for this would instead of using a if not place meeting condition here we set up some sort of fixed timer you can only move through a transition object for you know ten frames at that point you are out of the transition object we trigger everything and it's a fixed timer you don't have to worry about weird collisions with these types of objects now like I said this project was a little convoluted and a little might have been confusing at times because I was using a pre-existing project but hopefully the concept itself came across pretty clear that by using just a couple functions this layer at instance and this this instance activate layer and instance deactivate layer we get a lot of customization of where we move our objects how they're interacting with the world and all of this happens instantaneously so we don't have to worry about any sort of loads and all of this happens instantaneously so we get to see these effects happen in real time it creates a nice visual illusion and it gives that perception of 3d now you can take this concept and blow it up into 20 layers I mean that would be chaotic but you could totally do it it's totally possible and it allows you to add that extra layer of depth to your two-dimensional game to give it that 3-dimensional feeling and three dimensional layers so that's pretty much it for this video if you found it helpful please let me know I would love to see how you implement this idea into your own project as I showed in the beginning I showed this example and I showed the airplane example two different types of games want to top-down RPG action style RPG the other one a side-scrolling physics based platformer both of them use this concept to create different effects by just toggling which collisions are currently active and then by having the code for your entities interacting with collisions they will do all of the automatic collision detection automatically for you you just have to say hey these collisions are active these collisions are unactive so thank you so much guys for sticking through this video I hope you enjoyed it please smash that like button smash that subscribe button leave me a comment let me know what you think and I will see you in the next tutorial [Music] [Music]

Channel: GentooGames

Views: 2,059

Keywords: gamemaker, how, to, make, collision, collisions, layers, layer, toggle, switch, in, fake, faking, 3d, three, dimensions, dimension, 2d, shaun spalding, shaun, shawn spalding, shawn, spalding, heartbeast, heart, beast, heart beast, pixelated pope, pixelatedpope, pixel, pixelated, pope, friendly, cosmonaut, friendly cosmonaut, zelda, legend, of, game, maker, game maker studio 2, studio, tutorial, lesson, tutor, tutoring, teach, teaching, teacher, instance, activate, deactivate, add, instance_layer, instance layer, top, down

Id: DyVYZUWl0bY

Length: 28min 9sec (1689 seconds)

Published: Sat Aug 31 2019