Godot Engine 3 - Platformer Game Tutorial P2 - Tiles and Animated Sprites

good morning afternoon or evening wherever and whenever you are my name is Ben and welcome to part two to my Godot tutorial series on building a platformer now if this is the second time you're watching part two it's because I'm going to I'm basically redoing part two so I I decided to make some changes to how I did the last video so I'm gonna be taking that one down and just redoing the whole video for this because I feel like it could just be done better so I've I've zoomed in here so you can see the code better so if in the last video it was too small for you to see the code you should now be able to see it quite a bit better and copy that over so I'm gonna come back into our world and in your project you probably have a lot of walls down here that you've created so you're just going to delete those walls and once you've done that you should have the exact same project as me now in the description I'm going to provide a download link to some some sprite some sprites and these sprites come from open pixel project comm so I'm going to be using these lovely sprites that have been provided their public domain very very cool so you'll want to check these out once again open pixel project comm now I have changed the sprites a little bit to make them so that they work better for our purposes basically setting up I did some setup so you're going to have a folder that you can download they'll be a link in the description and it's just going to be called sprites and let me pull it up here real quick so it will have sprites and be a folder like this and it will have a player with some animation stuff right here and then it will have tiles with just a single tile set so you're going to download that extract it and then you're going to copy that and go into your project folder so you can see I've found my project folder mini platform game right here I'm just gonna paste that in here so now the sprites should be included inside of our Jex folder and then when we click on Godot again it will import these assets and we're good to go mm-hmm so we're gonna cover tiles in this and in order to create a tile set let's do that very first we'll create a new scene so click this plus button right here Oh before we get started though I want to show you kind of what it's gonna look like when we're done so let me open let me pull up the project here that I've got as an example project and run it so this video is going to be a little bit longer but I hope you'll stick around because this is what we're going to have by the end of the project have a little character that can run around and move in in this world animated with a nice looking tile set I think this looks really good this will be the end product after only two videos and we won't be while doing it we'll be doing a little bit of coding but not really a lot of coding so it's gonna be a really good start with very little effort I feel like on our part so let's create a new scene and we'll just click this plus button right here and we need to use this scene to create our tile set so I'm gonna add a note here just do a basic node and we're gonna name this jungle dirt tile wall just do tiles jungle dirt tiles okay now we need to add a sprite here so add a node and do sprite like this just sprite and we'll drag our tiles into here as the texture now you can see these are blurred right here so Godot when you need to import the assets it will it will apply certain information to the asset and the reason these are blurred is because it's it's either filtered or mipmap sauron I'm not sure which one it is by default but it's designed for a 3d game but we're doing a 2-d game so the way to fix this is come into the import tab right here select your preset and do 2d pixel then click re-import okay and you can see now we've got it correctly they're no longer blurred it's nice pixel art so we can come back to our scene tab and down in our inspector here we're going to we're going to do two things we're gonna turn off centered because we want it to be the left corner like that and then we're going to go come to region and turn on region now it's gonna disappear and you're going to be like where'd our sprite go well when you have a single tile set like this you can turn on region and then down here in the bottom it'll show texture region so we can click on this and we can draw a region for it to show and we'll turn on snap mode grid snap this particular asset has a grid size of 32 by 32 so come into your step right here and instead of 10 do 32 whoops not 320 32 and 32 press ENTER and now you can see we can easily you can use middle click to kind of come around and here to navigate we can easily select tiles that we want so we'll do this tile first and the reason I'm doing this tile first I'll show you in a you'll kind of see as we get done but we need to add a collision to this tile and we're going to be adding a we're going to be adding a static body collision so I'm going to do a mini challenge here which is I want you to pause the video and then on this sprite right here you'll add a static body node and then on that node you'll add as a child of it you'll add a collision shape and then you'll get your collision shape to be the same size as this square here so pause your video and give that a try okay if you didn't pause your video or if you were ran into some problems I'm back I'm going to show you how to do it so let's add a node here we'll just do a static I'm searching here static body 2d and we're gonna add an ode to that and we'll do a collision shape 2d and this should be familiar to you from the last video so closure shape 2d then we need to come down here to shape do create new rectangle shape now we're gonna set its transform so that's the position it's at two 16 and 16 because that's the middle and then we should be able to grab these inside ones right here remember don't grab the outside grab the inside ones right here to drag it and make it fit the correct shape and we'll save this scene I'm gonna do control s and jungle dirt tiles that looks good we'll save it okay now what you're going to want to do is you might as well just set the collision shape to be not visible so we don't see it anymore then click on your sprite here and click this little icon right here that way we can move the sprite around without selecting the other the other nodes that are children of it now what we're gonna do is we're gonna do ctrl D and that will duplicate it you can see Oh actually delete that I'm gonna hit delete we're going to name this sprite zero just because it's our first tile so I'm going to name it zero and I'm saving too soon after changing it okay there we go so now do control D and the next one should be named one then we can drag it over and we're gonna select this one right here do control D drag it over we'll select this one right here okay do control D now I'm going to drag this one down to here and you'll see why I'm doing them in kind of this order in a minute and we'll do this edge right here control the drag it over we'll do the black center right there control D again grab this edge control D again and now we need the bottom which is up right here and control D this one and control D this one there we go and the reason we set up the collision first is so that now all of our other one's already have collisions on them we don't have to do that again and you can see this kind of makes the the if you put all these together it makes the the ground that we're trying to create it kind of works together this way once you've done this we need to save it as an actual tile set so go to scene convert to if I can if I can hit it okay tile set and we'll just name this jungle dirt tile set oh we got to add an extension I'm gonna do TR es there we go and we can close out of this scene now in here we can add a new node and you'll use a tile map node this is the node that contains tiles so add this node to the scene and I always like to lock my tile map nodes I'm using this button right here so I so I don't accidentally select them when I'm trying to select the player you have to click on it to actually select it and then we'll drag we'll come to our resources tab up here and we'll drag our jungle dirt tile set into the tile set to use for this now if you drag this out just enough boom it creates the the dirt tiles it kind of looks nice that way it makes it easier to find the one you want so and obviously it doesn't work if you drag it out farther but I think it's useful to do this now we need to set the cell size because this is not the right cell size so we need to set this to 32 and 32 and we should be good to go so I'm going to we're actually going to change the size of our room here very first so save the game come up to project and project settings now there's a lot of information in here so if you feel like digging around in this you can probably learn some new things like where they you where they use the input map room or how we had UI right and left and stuff that's where this stuff is created but we're just going to be in general and we're going to choose display and then come to window we'll set our games width to 640 and the height to 360 it's an 16 by 9 aspect ratio and close and you can see the little the little blue line blue and purple lines here changed so we can select our player move them up here and start creating our tiles so let's just do here like this obviously I do want to eventually show you guys how to do Auto tiling but I'm not ready for that yet so we'll just do this real quick I'll set up an auto tile and stuff for all this later and then teach you guys I mean for the sprites then teach you guys how to do it so we can save the game and run it and we're going good our our screen here is pretty small though I'd like this to be bigger so let me show you guys how we do that so if you come into your project settings again come into Windows or display window right here what you want to do is you want to set the test width to 1280 and the test height to 720 okay close run the game again now you're gonna see this doesn't quite work how we want it to and it you can see that it's scaled the window here but it didn't actually scale the the world inside of the window so if we come this project again project settings then we can do mode you're gonna do two D and then aspect you're going to do expand I think so let's run it and test that if I remember correctly that's what you should do and there you go now we're looking good it's scaled up in everything save your game the next step is going to be animating our character so let's get doing that the first thing we want to do let's get rid of the output here and select our player so we don't have the tile map selected anymore let's scroll in on our player a little bit zoom in with scroll first thing we need to do is change this from a sprite because we're actually not going to be using a sprite anymore we're going to be using an animated sprite so right click on this node and come down to change type and search sprite and you should see animated sprite okay now we don't have a sprite anymore we have a thing called frames and if you just click on that and then do new sprite frames then when you select the node oh then you click on that right there I lied and it brings up this sprite frames tab down here after you've so you've created it should be right here and then you just click on it now over here on the Left these are animations and in here are the frames for each animation so we're going to change this from default to idle come into our sprites into our player sprite and we'll drag over idle drop it right there now you can see this one's blurry too so I don't know exactly how to get it to just grab everything and re-import it there might be a way to do it but the easy way to do it here is just to select this hold shift select all of them like that come up to import switch to 2d pixel again and do re import' and that should fix all of them I think ok so now our characters looking good let's create our other animations so click here for new animation we'll name this one run and just do run zero why is that run seven pretty sure that should be run six but oh well so run zero run one two three four it should be five actually jeez account count I can't count today okay now if we come into our scene and we select our sprite again we can change the animation to run and we can actually see it running and then set it to play like that there we go that's kind of slow though so click on our sprite frames again and let's up our speed here to ten that's a better speed ten seems like a much better speed now let's create our jump animation jump and with this one I'm just gonna drag in jump frame one and leave it at that I won't do any more we might use the rest of the jump frames later but for now we're just gonna use this one okay so we've got our idle and run and our jump so we'll save click on the animated sprite and switch it back to idle for now now we need to update our collision shape right here so I've already updated the collision shape on my example project and so we can kind of just do that but if you click on it click on the shape that's weird that it shows world I don't know whatever okay so our extents are gonna be 14 on the or 14 on the X and 28 on here there we go so you can see I just had the shape right here I clicked on the shape and it opened up an X in stab I clicked on that and then I altered the extents and that just changes the size so now we're going to change the offset so come in to transform and we're gonna want to go into the position and we're gonna just set our Y to 4 there now we've got a nice perfect shape around our character and you don't have to use a square you could use if you wanted to use a capsule or something too depending on the type of game you're trying to make let me use a square for now and call it good now if we run our game we can move around in this nice lovely world but our character doesn't animate so we're gonna have to program that obviously so come click on the script right here they'll open up your character's script and we're going to create some we're gonna we're gonna let's let's start with the very basic so currently this script is attached to the player who is a kinematic body 2d right but we need to we need to run code on the sprite right here this node so in order to run code on the sprite we need to get access to it and in Godot 3.0 there's a really way to get there's a really easy way to get access to it let me show you how you do that you can just do the dollar sign and then sprite okay that lets us get access to this node and then we can do whatever we want like sprite dot let's do let's do what's something that will be using probably flip H flip h equals true so that flips the sprite horizontally okay sprite dot flip h equals true you get the general idea so let's first of all let's try setting it so inside of input is action pressed UI right let's do let's do that we'll do sprite don't flip h equals false we don't want to flip the sprite there because it's already right and then for left we'll do sprite dot flip age equals true right and run the game let's see if this works we'll just start with the very basics and it's working our sprite is now flipping left and right so we've got the basics down we're looking good we're looking good we know how to access the sprite node and flip it so how do we play our animations well let's go to the docks again I want to really emphasize the emphasize using the docks so we know the animation is going to be part of the sprite node so let's come into search help and we'll just type in animated sprite class now let's look at the functions we have we have frames we have a string called animation well that's useful I didn't know that we have an int which is the current frame were on we have whether we're playing whether we're centered our methods here we have is playing play and stop and you can see play takes an a string that's the animation so if you remember if we come back into our animated sprite here and we click on the frames these are the names that we would pass into that function idle jump and run because we created them right here so let's click on our help again here animation well let's not worry about signals yet so the one that we're probably going to be using is mainly going to be play so let's click on it and read what it says it says right here play the animation set and a parameter if no parameter is provided the current animation is played so let's go to so animation must be the current animation so let's go to our code let's see if we can use this we're gonna create a function though well let's just try using play first okay so come into run right and we'll do sprite dot play run there we go so we'll try running for both of these and then obviously when our motion is equal to zero we'll just try idle and see how this works okay we'll save and are in the game and it's working it's awesome and that's about as easy as it gets right like not too hard there so now let's we're gonna have to make some changes though and it's because of the way our jump works because you saw we can't really just have him play the animation right there because it can mess it up when we when we're trying to play the jump animation so if we're on the floor let's look at our code here let's I'm gonna press return a few times here so I can get centered on the screen a little better so if we're on the floor we can jump however if we're not on the floor else that means we're in the air so if we're in the air we're going to set our sprites animation sprite dot play jump right that's what we'd want to do just run the game well that looks really good and that's all the code we needed to write apparently to get it working so I'm really glad I took the time to to do it this way real fast because the way that I'd planned out and my example is not quite as clean as this so I'm pretty happy about that now if you don't want to access the node like this every time first of all there's an there's actually a function you can use instead so instead of doing sprite you could do get node sprite like this and that's the same thing as this this is just a shortcut for getting access to the sprite here and obviously the name of this makes it different for this so if this was called sprite 57 we would have to do sprite 57 here we wouldn't be able to just do sprite so you can get access to this node and save it in a variable as well which we may cover later but for now I think we should just use this because it's actually pretty clear and pretty easy to understand so there you go we actually did we made quite a few big steps today and we've got a pretty cool looking game for only two videos um we're just pretending like the other video didn't happen so for only two videos this is looking really good I hope you guys enjoyed it thank you guys so much for watching and I will see you guys in the next video

Channel: HeartBeast

Views: 207,115

Keywords: Indie Game, Game Design, Game Development, Gamedev, Godot 3, Learn Godot 3, Simple Platform Game, Platform Game, Animation, Tilesets, Tiles, Open Pixel Project

Id: BfQGXtlmE7k

Length: 25min 15sec (1515 seconds)

Published: Wed Feb 07 2018