Pixel Platformer - Godot 3.2

good morning afternoon or evening wherever and whenever you are my name is benjamin and i am here to give you this free video my introduction to Godot video in this video we're going to be creating a simple platform project like this we will set up an auto tile where you can create your levels very quickly with the Auto tile system and we'll also set up a small character that you can control and move around the room with and the collisions will automatically be set up with the auto tile system this is a great introduction to the Godot engine if you are already familiar with some programming basics if you've never programmed before this isn't a good video for you let's get started so I have Godot engine open right here I'm going to create a new project I'm going to browse to the folder that I want to create this in and I'm going to name it heart platform heart platformer we'll do create folder and create and edit and that will open up a new Godot project and the first thing we want to do here is import the assets from our files here so I'm going to grab those real quick ok you can see I've navigated to the folder where my files are I'm just going to click and drag on the player drop it in here in my file system inside of Godot and I'm going to click and drag on the tile set as well let me get that and drop it into Godot as well so now that we have those two resources we can close out of our file system now if you drag these into our room here you can see or into our scene here you can see they're all blurry so we need to unfix that because these are pixel art assets so we'll come in to import right here and make sure your image is selected and we can turn off filter and that will remove the filter from those files let's do it with the tile set as well re-import now both of them should be nice and clean we can click on these and delete them from our scene right here and zoom out and now that we've got our assets imported we need to set up our window because currently it's too large for a pix Larkin so we're going to come up into our project project settings and in order to set up your window we're going to come scroll down we'll be in general scroll down to display window and our height will be 320 and our width will be 320 and our height will be 180 I found that this is a pretty good width and height for small pixel art games but we also want to make sure that this gets scaled up on to the screen or else our game window will be tiny right 320 by 180 is a very tiny window we can set the test width and test height to 1280 by 720 and that will scale it up and we want to make sure that we set our hour mode here to 2d and our aspect to keep that way if you're putting this on a mobile device like say Android if you have multiple different resolutions it will put black bars on the side of the top in order to try and scale properly for that device this is the simplest way to get it up and running well press close you can see our little we've got a little blue window here that indicates our view and that has shrunk down significantly so the first thing you need in order to create a game in Godot is you need a scene now a scene is we've already got one up here it's an empty scene Godot creates one for you by default a scene is kind of like your game level it's what it's what runs it has a camera associated with it and the scene also is composed of what are called nodes and you can see it wants us to create a root node and that's because the nodes are organized in a hierarchy a tree hierarchy and so we need a root node here and we're just going to do a 2d scene and we're gonna double-click on this note over here and name it world and you can see it has some properties over here when we click on this node we've got some properties we've got to transform and a z-index and some other things that we don't really need to worry about right now you can see we can't actually move this around in the world if we wanted to but we don't want to we want it to just stay at 0 0 for now and if we do ctrl s we can save this scene right here save that scene that's already looking pretty good now we want to create our player let's click on our world and we'll click this little plus button and this will allow us to create another node now for a player character like a platformer character if you want to have lots of control over the physics of the character you're going to want to use a kinematic body 2d this is a great body for doing platformer characters and we'll call this player and you can see it also has some properties over here we've got a collision emotion we've got a transform and you can see that this kinematic body node inherits from all these other nodes it inherits from physics body collision object to the node 2d and so you can see it actually inherits from node to T at some point and that's why it also has a transform so now we're going to attach a sprite to this character so that we can actually see our character here so let's attach we'll click on our player and we'll click plus attach a sprite come in here and search sprite now we've attached the sprite node and it needs a texture so that we can actually see it so we'll drag our player dot PNG texture on to the texture property there and that's that's our character but this is a sprite sheet right it has a lot of different frames in it for the characters animations so how do we fix that well if we come in to make sure your sprite note is selected again and we come into animation we can go into r/h frames here and count these one two three four five six seven seven H frames we can set this to seven and now it only has the first frame and we can actually cycle through these frames by nipping manipulating the frame property just like that so once we've got our sprite our character also well we're going to want to move this up a little bit too but I want to turn on snap so up here at the top we can come click these little three dots and we can use pixel snap and using pixel snap will allow us when removing the character it will snap at pixel increments which is really useful for pixel art games obviously so we're going to move it up so our little character looks like he's standing right on the origin just like that so we've got our player but make sure you move the sprite the sprite node and not actually the player the player node is actually still at this base position right here it's the sprite that we moved up now we're going to click on our player node again and we're going to attach a collision shape to it so we'll do a collision shape 2d and this is going to be what determines the collision box for our player and just like most classic platformers of the pixel art era the older platformers we're going to be using a rectangle shape and this simplifies collisions for us quite a bit so we can shrink this down there we go I'll do one more and we've got a nice little collision shape for our player and this is all looking really good so far for our character and so let's set up our tile set we've got our character we haven't attached any scripts to the character yet but we've got the basics in there so let's let's move on to our tile set so we're going to click on our world because we want this node to be a child of the world not the player and we're going to do add node and do tile mat so a tile map node is what is used for creating tiles you can see these are gonna be way too big so we want to come into our cell and set this to sixteen by sixteen that's much better and we'll come up to our tile set property and click on that and we'll do new tile set okay and then we need to click on that after we've created a new one and that will take us into the tile set so we could go back this is our tile map that we were just in the properties for the tile map node now we're coming into a tile set now a tile set is a resource it's not actually a node so we have scenes in the game that are made up of nodes and the nodes can hold different resources in them so you can see this is a resource type and when we when we click on the tile set it opens up this new window down here this little tile set window this is where we can create our tile set and our auto Tyler so we're going to click this plus button to add a texture we'll select our tile set and we'll use these little this plus button over here to zoom in now this tile set I made in about five minutes using a program called tile setter so if you want to look that up you should be able to find it on Twitter highly recommend it it really makes the process of creating tiles that's a lot easier once we have this we need to select new Auto tile and we'll turn on snap and we need some properties over here but in order to get them we actually have to click in here first so once we click with what when region is selected we click in here we should get these properties over here you can see we have snap options and we want to set these the step 216 for both the X and y and for selected tile we want sub tile size to be 16 and 16 as well and once you do that if you're still on the region here and you still have snap-on you can easily click and drag and select it will select a region that only contains the image it fits perfectly around the image like this you don't want something like this that won't have all the tiles you want to make sure that you get all of them just like that and once you've done that we can come to our icon and this sets the icon for the tiles for the tile for the Auto tile and we'll just select this one right here because that's the single block tile and you can see there's a lot of information you can set up right here bit mask stuff navigation if you have a navigation a character that needs to navigate a type like a level occlusion this is for lighting z-index that's for depths ordering stuff but all we need to worry about is the the icon which we already set and our collisions so we have to create a collision for each of these tiles I found that it's pretty easy to click on the collision and then instead of clicking on the tile that we're on double click on the next tile and what that does is whenever you when you have a selected tile and you click this you can actually click anywhere in here and it will create a collision for that tile so I could click clear over here creates a collision for that title right and then the next click actually selects the next tile so that's why I'm able to double click so we do create a new rectangle double click on the next tile and so on okay you can see I have created a collision box for every single tile now that's a little bit of setup work right but once you set that up then you can easily draw your auto tiles inside of the room and and they'll automatically have collisions associated with them so there's a little bit of setup initially but once you get it set up then it's easy from there on out so the bitmask is actually important and the bitmask is how we tell these tiles how to auto tile so this is a little bit tricky and so to explain it we're gonna zoom in a little bit more and we need to make sure that our aisle tat our auto tile bitmap is set to 3x3 minimum okay and so that just tells the bitmask how many tile how many elements to have in each tile so if we do two by two you can see we've got one two and one two right so two by two if we do three by three then we've got three tiles acrost right and that's what we need each of these little squares that we're drawing on here is going to tell it where it needs to place new tiles so let's let's use the single tile for example if we play we just need one tile here in the center why is that because this should be the tile when there's not a tile over it there's not a tile here there's not a tile here and there's not a tile here right and so you leave these spaces empty because that kind of represents what this tile is it's a single tile right now this one right here is like this why is that well that's because it's a it's a tile that you would place when you have nothing around the top but you do have something under it and so you can see we put this here to represent that being under it so that's the simplest way that I can explain bit masks you kind of learn to get a feel for how to place them and oops don't want them over there and so then it gets quite a bit easier once you get used to it but you can see this tile right here this one's black right this is the one you want to place when there's tiles all around it and so you can see that's why we fill in the entire thing because there's tiles all around this Center one here so fill in the entire thing that way and like I said it gets a little bit you get you do get used to where to put these and there's a little bit of a pattern to it so you can kind of learn that pattern there we go so we've got all of our bit masks set up and now we can just hit ctrl s to save and if we come back into our world and click on the tile map we can easily you have to select you click on the town up you select the auto tile right here and you can easily set up an auto tile oh and look we've got a if you get something messed up like that you've got a bit mask that's not quite right and so that looks like our one of our tiles isn't quite right let's come back into our tile set so you just click on tile map click on the tile set right here that'll open up here we click on this image over here to get our tile set we click anywhere in here and that will open up our bit mask so let's look and see where where I messed this up and it looks like aha I missed this corner see that we needed that corner there there's nothing there it needs to match down here so there we go then we should be able to come back into here and it's not going to be oh we'll hit ctrl s to save it's not going to be working yet we have to right-click to get rid of it but then now it should work and you can see that now it's working just like it should so we can set up this little level like this really easily supercool and save now we need to make our character actually move around in this level so first though I want to show you something which is that you may want to put your player character in multiple different levels right and so that would mean putting the character in multiple different scenes well we wouldn't have to recreate our node every time right that would be a huge pain so instead of recreating the note every time we can actually save the player as its own scene so we can click on the player right here and we can do save branch as scene and we'll save it as player dot Tsun save and now it puts this little icon right here and hides those nodes and if we click on the icon it actually opens up the player and it's a very own scene with those nodes now why is that useful well it's useful because if we click on the world right here we can now come down into our file system we can select our player scene that we just created we can put this player anywhere and have multiple player scenes and if we update this right here it will update all of these players in here so that's called so you that's called instancing the scene inside of another scene and you can see we still get the little icon here to show that that is a scene so I'm gonna select all of those with shift hit delete remove them because we don't need them but we do want to select our player and move the player over into our room somewhere like here and save and we come into our player scene here we're still at the origin because that's because don't this one is an instance of this one right here and we've altered the position on this instance so let's run our game actually right now we can press the play button and it says we need to select a main scene so we'll select one and we want to select world now when it runs we get our scene here and I actually want to make sure that we go all the way down here as well and save because then that will that will look nicer when we run the game we won't get an edge chopped off there so perfect it's looking great if we come into our player we're going to assign our first script so press this little button right here well make sure you select the player press this little button and it will bring up attach node script and this will be the path player Don Gd that looks good and Godot uses a scripting language called GD script which is based off of Python and it's quite powerful it actually has optional typing if you want to do strict typing so we're going to get rid of some of this stuff right here and we'll actually do do ctrl K on this to uncomment that so well let's just actually get rid of that because we're going to make the physics process so the physics process is a built-in function that is part of physics objects and our player as a kinematic body so it does have those physics properties right this will allow us to control our player character we're going to get some properties for our player here first so let's create some constants up here Const acceleration we'll set this equal to 512 Const max speed we'll set this equal to 64 now you might be going wait a minute why is the acceleration so much faster than the max speed that doesn't make sense right and that's a really good question but I'll explain that in just a minute okay and we'll do Const friction we'll set this equal to 0.25 Const gravity set this equal to 200 jump force set this equal to 128 and and that's good for now now we'll make a variable var motion this will be a vector 2 vector 2 ok just an empty vector 2 in fact we'll use vector 2.0 to be more clear perfect now inside of our physics process we can actually move our character around in the room right so what's the first thing we might want to do well we might want to apply a gravity to this character so we could say motion dot Y so that's our motion vector and the y-value plus equals gravity right but since this gravity is being it's plus equals right it's being added every single frame we need to multiply it by Delta there we go and there's a special function that we can use to actually update the position of our player I mean you could manually update it position right but inside of a kinematic body there's a special function that we can use called move and slide and then you pass in the motion that's the vector that we want it to move by the amount that we want it to move by right so we've got move in slide in our motion and we can save where does this function come from what does it do if we go into our documentation you can do search help right here inside the editor lookup kinematic well just like up move in slide and you'll see that that is a function of kinematic body right here's our kinematic body so we can just click on that and it opens up to that function gives us a nice detailed description some of the optional parameters that we can pass in and a detailed description of this function and if we scroll up you can see that kinematic body inherits from physics body collision object node TD we already talked about this right we saw that and here are its properties and its methods and descriptions on on these properties and methods so the documentation is really easy to use right here in the script editor I really like that about it so let's press the play button here and watch and there we go our character Falls and immediately collides with our tile set and you might be like well we haven't done collisions at all why is it magically working well that's the power of using move in slide and a kinematic a body and then having our tile map set up with collisions Godot is smart enough to automatically handle those collisions for you and their pixel perfect collisions so they look amazing okay so we've added our gravity right that's cool let's add some movement so we're gonna get we're gonna get an input vector we'll call it X input well it won't be a vector it will just be the X input we'll set this equal to input get action strengths and these actions are built-in so we'll use UI right and then we'll say - input get action strength UI left okay so what does that do get action strength will will be one if we're pressing the right key for the right one and for the left one it will be one if we're pressing the left key right so our X input is going to equal either one zero or negative one if these are both 1 it will be 0 if this one's one and this one's zero then we'll be 1 if this one's one and this one zero then we'll be negative 1 and that will tell us which direction we're moving and whether or not we are moving so we can say we can check to see if we're moving by saying if X input does not equal 0 right because that means it's either 1 or its negative 1 which would be we're either moving to the right or we're moving to the left so if it's not equal to 0 we're moving what do we want to do we want to say motion dot X plus equals X input times acceleration because this is our acceleration times Delta just like gravity we need to multiply our acceleration by Delta because it's accumulating every frame it's getting stronger and stronger it's getting faster right then we can clamp this to our Mac speed motion dot x equals clamp motion x- max speed and max speed this clamp function just prevents our motion variable from ever getting slow ever going faster than negative max speed or faster than max speed right negative max speed would be new max speed to the left max speed would be max speed to the right simple enough this should allow us to move to the left and to the right let's actually run the game and show this so we can now move to the left and to the right that was weird though right our gravity all this sudden we don't have any friction and our our gravity seems to never forget like it doesn't reset when we hit the ground so we immediately jump faster down so how do we fix that well move in slide actually returns the leftover motion and so if we set our motion equal to move n slide motion that will return the leftover motion the leftover vector and so if we hit a collision then there won't be any leftover motion downwards right so that will make sure in reset our fall speed and so if we run that will immediately solve that problem now let's add our friction right we want to make sure we get that friction in else so I'm going to use the alert function fresh friction so motion x equals Lert motion x0 and friction so the lerp function is lit for linear interpolation it will take this value and it will attempt to make it approach zero by our friction amount so by 25% so our our motion will get 25% slower every frame but only if we're not moving and there we go we've already got that working it's pretty easy now we want to add jumping jumping is also pretty easy in fact there is we'll do this after our motion there's a special function that we can use inside of kinematic body to check to see if we're on the ground if is on floor amazing right we can just use that real quick we can say if we're on the floor if input is action just pressed so this lets us to check to see if they just barely press the up key and not if they're holding it though only if they just pressed it and we'll use UI up right so if the action was just pressed UI up then we'll say motion dot y equals negative jump force simple enough right so let's run the game here and uh-oh we can't jump okay why can't we jump well our our is in is on floor function actually isn't working and I know this because I know what's going on here because I set this up intentionally so the reason it's not working is because in order for the is on floor function to work we actually have to tell move and slide which direction is up and that's the second parameter and it's an optional parameter it starts off set to 0 by default basically saying there's no up direction but we want to tell it which direction is up so we can pass that into it like this vector to up the up direction on the vector to that's the direction we want to be up you know maybe you want your game to have you able to change the gravity and walk on ceilings and stuff then you could change the direction of this value that gets passed in to move inside and change which reorient the game to which direction is up so if we set that up then we should now be able to jump and you can see that and we can only jump when they're on the grant when we're on the ground so dating we've made a lot of progress already we can already control our character it doesn't feel very good so let's work on that just a little bit and we're going to do this by setting up our friction right here we're going to move this we're going to say if we're on the floor and if X input is equal to zero so if we're not moving then apply this friction right but we want to do an else here so we'll say else if in X input equals zero as well right then motion we're gonna copy this right here only we'll set this amount to our own base amount here real quick 0.02 so let's talk about this logic if we're on the floor and we're not pressing anything add our normal friction else if we're in the air and we're not pressing anything at a very very low friction and so what's that going to be it's not going to be friction it's going to be air resist and I don't know if I spelled that right air resistance and we'll call this 0.02 like this and we'll paste that right here we're good okay so we've got our air resistance right slightly different from our friction and now our character has less friction in the air and that feels a lot better feels more realistic we want to control our character's jump height too and that's pretty easy to do inside of our else right here so if we're in the air we can say if input is action just released UI up so if they just release the up key and motion dot Y is less than negative jump force divided by 2 so what is that doing well that's just checking to make sure that we're actually moving upwards and that our upward speed is is is not less than basically we're still moving pretty quickly upwards right because as it starts to get greater and greater that means we're slowing down because negative is up in the Y we want to say in motion dot y equals negative jump force divided by 2 so if we're still moving up pretty quickly and we release the Y key then set our jump force a negative 2 so go half the height that we would have before this allows us to control our jump height and get nice variable jump height depending on how quickly we release the jump key after pressing up perfect now we need to make sure our character faces the direction that we're moving in this part we get to learn how to get access to other nodes in our scenes so our character has a sprite node right here and our sprite has a special property called flip h and if we turn that on he turns around so we want to get access to that property right here but that's in our sprite we're inside of the player script so how do we get access to it well there's a neat little way to do that called on ready VAR now you have to put the on ready beforehand because we have to make sure that these nodes are ready in the scene before we can try and access them so on ready var make sure that they are we can say sprite equals and then do the dollar sign and we'll get a list of the children of our player node and we'll just select sprite right here and there we go now we have access to the sprite so inside of our input does not equal zero here we can actually set sprite dot flip H and we'll set it equal to X input is less than zero so if our X input is less than zero this will be true and remember true flips the character and make some face left-right otherwise it'll be false and then it will face the right and so that's all we need to get our character to face the direction that we're moving the last thing we want to set up for our little game here is an is the characters animations so we're going to click on our player we're going to add a new node and we're going to search animation player and Godot has a very powerful animation playing system so we can create new animations in this animation player create a new one call this one stand [Music] and we'll make it point one in length so that's how long the animation is we're gonna click here and zoom in a little bit so we can see this better and you can pretty much animate any anything you want to so we're gonna go into our sprite and remember a little while back when I told you about the frames here we're going to key our first frame because this is just the character standing so you just press the little key here when your animation tab is open you know when you've after you've selected the animation player and that keys that frame now we're gonna create a new animation again call this one run and it will be point six I think frames there we go and make sure the sprite selected come to our frames we want to go to frame 1 here key that great and we have to go to the next frame in the sequence the next tick in our sequence here I've got snap set to zero point one we go to the next frame frame two and we'll key that and the first time you have to do it manually but now you can just press the key button over and over now this is our jump frame we don't want to key that one here we want to Kia nother one of these so we'll come to this right here click on this right click and duplicate and that keys that frame okay and we want this one to loop and now we can actually play this and watch our character run make sure that that run animation works so it's really quite simple to setup and like I said the first frame that you do in an animation you have to manually move to the second one because it it comes up with a little do you want to create the Bezier curves thing and then it doesn't move to the second frame so you have to do that manually and set it here but once you do that then all the others you can do it right away so we'll create another animation this will be jump and we'll set it to 0.1 and we'll find our very less frame and we'll key it there we go we've got some errors in our output here that's because we tried to go past the number of actual frames we have Godot was like you don't have that many frames you can't go there but it's just basically a warning okay once we clear that now our animation player has these different animations how do we access them well it's very similar to what we did this is with the sprite so we come into up here we say on ready VAR animation player equals to our dollar sign animation player this is the variable name this is the actual node we're accessing right and we can save and this parts really nice and easy we can come into here if we're moving right we want to use the run animation so animation dot play our animation player dot play run and then otherwise so we want to add our else here animation player dot Play stand so that gets us running and standing how do we do jumping essence should be pretty obvious right so this is if we are on the floor and this is else so inside of here we'll want to say animation player dot play jump because we're actually in the air there and because of the order that this is set up and it will jump will get priority over the other two so that's important and so this code is it would be nice to clean this up with some functions and stuff but for the sake of simplicity we'll just leave it this way but you can create your own functions and clean up all this code and now our character is moving around in this world with animations colliding and oh that you know what you know how that right there was just a little bit too high well watch this if we come into our debugger here and you can see that sink scene changes and sink script changes are on so if we actually run this and we're like oh man those are too high we can come back into our editor come into the world click 2d here and we can say well these ones were too high so let's let's um let's make it make them lower like about this high right okay and then you just hit control s and save and guess what our game now has that already updated so it updates in real time so as you as you change stuff in the editor right here it will update in real time in your game and if we close then it saves it that way it keeps it that way so there we go I hope you enjoyed this video and you learn something from it learn something new about Godot engine and the very basics we talked about scenes how scenes are kind of the levels for your game and how they're made up of a group of different nodes and all of those nodes have different properties right here and sometimes they have resources associated with them like this right here has a resource oh and then the one last thing that I don't want to forget to explain here is why is our acceleration so much higher than our max speed and the answer to that deals with the move and slide here and also why aren't we applying Delta to our speed to our motion and that also applies with the move inside if you come look at move and slide here you can see that Delta is automatically applied to move n slide it says right here you should not multiply it by Delta the linear velocity that you pass into it that's what we're passing in our motion is our linear velocity don't apply it by Delta the physics engine handles applying the velocity so it already applies Delta to that and so that's why we're only applying Delta to our change in velocity right our our gravity or our acceleration because that's the change in velocity and because Delta is such a small number that requires us to have a really quick acceleration right here but not a super quick max speed because the physics engine already calculates for Delta and compensates for that so that is the answer that is why our acceleration is so much faster and our gravity as well is so much faster than our max speed so once again I hope you guys enjoyed this and it got you interested in Godot as an engine it's a very powerful engine I love using it I'm going to have a link in this video that you can click on if you're interested in learning more I have a Godot course it was funded on Kickstarter it was funded by over I think 250 or 350 backers on Kickstarter that raised over $14,000 I'm very grateful to them the course has like 16 hours of video content it's taken me eight months of recording and preparing I'm really happy with how it turned out and actually this wasn't planned in the Kickstarter but the very last project for the course is a small Metroidvania game that you can learn to me in the same one bit style that I that I have right here and that Metroidvania has a lot of stuff in it like a boss multiple different kinds of enemies and AI is saving and loading collision slopes and moving platforms it's got a lot of stuff packed into it and it's what it's the what makes up the majority of that course so if you're interested in learning more click the link to go find out more about that thank you for watching this video I hope you enjoyed it and I will talk to you all later

Channel: HeartBeast

Views: 91,304

Keywords:

Id: 0713nlQxU7I

Length: 43min 19sec (2599 seconds)

Published: Fri Feb 21 2020