Godot 3.2: Let's Build a 2D Platformer!: Part 5 (TileMaps & TileSets) #godotengine

hello and welcome part 5 of let's create a 2d platformer in the Godot game engine my name is Colin and this tutorial not so many series were creating this 2d platformer video game of course in this game you control the player on screen using keys on your keyboard of course you can walk run jump and fall you can squash enemies get hurt by enemies and lose lives you can collect coins collect keys to unlock doors do wall jumps shoot fireballs all that great 2d platformer game action of course this is part 5 in this mini-series on how to create this entire game from start to finish if you have not seen parts one two three and four I'll put a link to this whole playlist up on the screen right now so you can go ahead and follow along from the beginning so right now in this mini series we have a character and we have a couple of really not great looking platforms or floor objects in the game in this video we're gonna scrap those not create looking floor objects and in their place we're gonna add what's called a tile map and this is a node in Godot a tile map and with this tile map you can create a tile set which will allow you to bring in pictures which act as tiles that you can make act like static body physics objects and with a tile map you can use these tiles and just paint your level and choose which tiles go in which spot on a grid in your level and so it's really fast and really fun to create a whole large world that just looks great this is really the most creative part of this whole story Ulm in e-series excluding all the code we're writing to make our game as well in fact making a tile map like this requires absolutely no code whatsoever so no code in this video today okay let's go ahead and jump in of course if you like this video or learn something it please go ahead and click on that like below this video it really helps up me and my channel and if you want to see more videos like this one in Godot or blender or other technology click on that subscribe button as well and click the Bell icon to be notified whenever I upload a new tutorial so first things first let's get rid of these not create looking platforms they are called floor one and floor two also like each one right-click on it say delete node when I do that it'll make sure that I actually want to get rid of that whole branch of nodes and I'll press ok because each floor is made up of several no it's okay so right-click and delete and okay in their place we're gonna add a tile map to our level one so I'm gonna select level one and I'll press + and from are available nodes I'm gonna search for tile and here it is it's blue it's called tile map if you want to know where this is actually located if I clear my search under no 2d it's just right there okay so I'll select that and press create and because I had the level one node selected when I added it it's now a child of level one as you can see if I have this new tile map node selected I get a orange grid on my screen in my level if I'm in the 2d workspace these weren't squares this orange grid shows me where my tiles can be placed if I don't like the size of these tiles if I want to change it that is with a table map selected over here in the inspector the properties of that tom map undersell the default size is 64 by 64 pixels per tile this will depend on the size of the images that you use for your tile set speaking of which I'm gonna be giving you a link to download this folder of tile images these are created by Kenny at triple W Kenny and L Kenny if you're not aware is an amazing resource he's a Creator who makes a ton of game assets that means sprites vector art 3d models sounds music everything you need to make a simple starter game he gives away lots of his assets for free but he also sells them in packs and when you download I think any of us assets you're allowed to use them in your projects including for-profit projects because all of his art as far as I'm aware is royalty-free Creative Commons 0 public domain so that's why I'm able to give these away to you in the link below this video on YouTube so I'm gonna take this folder called world tiles you'll get it in as file from the download link blows video on YouTube need to unzip it and then I'm going to right-click and copy this whole folder I'm gonna go into my game project folder I've got an assets folder I'll go in there and I'll right-click and paste now I've got all of those PNG images in my project folder just so you are aware if I right-click and go to the properties in Windows for any of these pictures most of them anyways they are for the most part if I go to details 64 by 64 pixels lots of the tiles that Kenny makes and publishes are 70 by 70 pixels and so if you have a different size that's not 64 by 64 for all of your tiles you'll need to change a setting I'll show you it in a sec but if you decide to make your own tiles you need to make sure that they are seamless together and that's quite a tricky thing to do because if you start with a larger picture file let's say in Photoshop or and you scale the picture down depending on your settings you might get like a transparent or blurred row of pixels on the sides depending on your original resolution and what you scaling you're doing okay so just keep that in mind these ones fit very perfectly well together so you might want to start off with these ones okay so back into the Godot editor if you don't have and by the way you saw hopefully just there in a blink of an eye it imported all of those pictures that I put into my project folder so now I've got all these world tile images over here if your tiles are not 64 by 64 you need to change this cell size over here but now we need to make a tile set for our tile map this is essentially going to be our palette are available tiles that we can use to draw or paint our whole level to create a tile set I've got to select my tile map node and then over in the right inspector next to tile set I'm going to click on little down arrow and I'll select new tile set I've got a new tile set resource now in Godot if I want to edit it I'm gonna click on its name and a tile set dock will appear on the bottom of the editor it's very much like that animation editor for the animation sprite that we edited the last video for our character animations imposes we've got a sidebar and a main kind of working area in this sidebar we need to bring in the images that we're gonna use to create tiles for our tile map so I'm gonna press this little plus button and I'm gonna go into if I'm not into my project assets folder into my world tiles folder I'm gonna select all of the pictures of all click on the first tile image I'll hold shift and I'll click on the last one to select them all and I'll press open when I do that it will list for me all of my tiles and I'll select the first one actually this sidebar does not list tiles it lists pictures and that's a distinction because you can actually bring in an image if you find one on the Internet or you create it for yourself that actually will contain lots of tiles like a tile sheet and over in the right side of this dock you can divide that image that sprite or tile sheet into separate tile so these are images we create the actual tiles over here in my case I'm gonna make one tile for each picture okay so to do that I'm gonna select the first image and I'm gonna press new single tile when I do that I have to define two things I have to define the region for the tile in other words what part of this picture is gonna be the square tile in my game in my case the whole thing for all these pictures is gonna be the tile so I collect new single tile I have region selected I'm gonna make sure that snapping is turned on that's gonna help me define the area because you can see I can just click and drag but I'm not getting a perfect square or perfectly 64 by 64 so snapping helps me out with that with the grid I can now click and drag ups click and drag if I make a mistake I can just redo that you'll notice that my grid these purple lines I'll make this bigger on my screen are 32 pixels by 32 pixels per grid square the snapping options in Godot are a little bit funny you actually can't change these snap options how big your snapping grid is until after you define our regions let's say you define a region and it's not you want because you want to make these purple lines spaced out differently you need to make a region first and then you can go over to the inspector of a tile set and change the step under snap options to different number in this case I'm gonna use 64 by 64 so I can just snap to the four corners so now if I click and drag it'll just snap me to the corners of this picture so now we have a tile with a region that's what we can see in the tile but now we have to go over to collision and define where that tile is going to act like a static body physics object so under the collision tab I'm gonna create a new rectangle shape you actually have to click on this little rectangle and with snapping turned on I'm gonna click and drag and it'll make those little pink handles those little pink dots and you'll see that it fills the area with that aqua color again just like our player collision shape okay this tile is done I'll do the same thing a few more times so I'll click on this next picture I have to create a new single tile I have to create a region I've got snapping turned on I'll click and drag easy I'll make a collision area make sure you click on the rectangle that's easy to forget and I'll click and drag and let go there that one's done a few more this middle a tile object will be for the top of the ground anywhere that's not on an end so new single tile I'll click and drag collision rectangle click and drag one or two more I'll select this one new single tile and I'll click and drag and make a collision area rectangle click and drag I'm gonna skip over several of these tiles and talk about the platform ends which by the way these two and at the end these two are the ends that use a middle platform if you like of this one so you can make along the platform that looks like it's floating if you use the ends and this one so for this tile and all the ends of my platforms I don't necessarily want the character to hit this platform in this area so when I have this image selected and I press new single tile the region I create will be the same 64 by 64 pixel so I'll click and drag but the collision area is not gonna be including this area I don't want to make just a square so I'm gonna select collision and I'm not gonna select a rectangle shape I'm gonna create a new polygon when I do that the polygon I want to snap to my sides again so I'm defining a nice you know square shape with a corner cutoff but in this case I'm gonna change my step options for my snap options in this case I'm gonna make the snapping grid set to 16 by 16 pixel squares so now I'll have more places where I can snap and create my collision polygon so under collision I'll click on a polygon and I'll click and I'll click and click and I'm gonna go to this one here and then I'll cut up to right about there I think and then I'll close the polygon you have to click on the first dot that you created in order to close it so you get that aqua fill area in there I'll do that a couple more times I'll select this one I'll make a new single tile and now that the region it'll be the same square that's 64 by 64 the collision shape will be a polygon again I'll click in the top corner click they're there they're there and I'll close the shape so at this point I want to save my work my tile set is a resource in Godot but it's not been saved so I'm going to click I'll make this bottom area shorter on my tile map again that'll actually let me see its properties in the inspector this tile set is a resource in Godot it'll end when I save it with GREs that's a good oral resource so I'll click on that little arrow and I'll select save and I'm gonna call this in my project folder world tile set so I'll get rid of the word new and type world there okay so I'll save that in my project folder this is the fun part with the tile map selected you'll see that I have this pallet area I call it the pallet over on the right side of my 2d workspace I can make this area wider or narrower depending on what I like and as you can see when hover my mouse over my or 2d workspace the tile that I have selected is sticking to my mouse and if I click I can place that tile in my world and it's there it'll act like a static body 2d physics object of course I don't have to just click and click and click I can just click and drag it is really that easy if I don't like a tile that I've placed I can simply right click or right click and drag to erase so what I'll do here is I'll create a new platform top with the middle piece there I will click and drag to create my platform I want a couple of ends on it so I'll click there and click and create that tile I'll select this tile create this end and I want it to continue downwards so I'll use this green tile and click and drag and maybe I'll make this a little bit taller there it's really that easy and of course you can scroll down on your mouse most likely and you can create a very large world before I try this game out I'm gonna create a platform so I'm gonna select each platform and maybe there and I'll select this one and maybe there and in the middle of those two and it should just work if I press play seem of course my character will fall it'll land on the platform of course I can walk around and I can jump hopefully I can jump on and land on the platform you should be aware though that these platforms because they are static body objects they are the kind of platforms that you would bonk your head into you can't jump over them and expect that you'll go through them and then man nicely like in front of them will create one-way platforms like that where you can jump through them and then land back on them in a future video but as you can see this works quite well a couple of more things about using a tile map and a tile set you have options for these tiles in terms of their orientation up on the top of this pallet area you have options to rotate all of your tiles and you can flip them around horizontally or even vertically so if I want to create a sideways wall in my game I can rotate or flip in fact this last button that looks like a paintbrush will clear anything that you've done with the rotating or flipping so now they're out there default if I want to create a sideways wall well I can just rotate all of these tiles around that I can paint well a sideways well if I like and I'll put a couple of ends on them as well just like that so now if I go ahead and play this scene I will bump into that sideways platform just like a wall two more quick things as we finish off this video you'll notice that my little character is going behind this wall in other words my character's a collision shape his Little Pill shape doesn't include his arms so his arms actually go behind the platforms or this wall so to fix the order of our character if we want the character to be in front of the tiles well what we can do is we can change the order of our nodes in our scene docked right now our Steve object is at the top in our level and the tile map is next but the way Godot draws things in your scene is it draws the objects in order from top to bottom in other words it'll draw Steve into your game and then it'll draw the tile map meaning that the time app will be in front of Steve so what I can do is I can just drag Steve down to below the time app make sure you're not dragging it on to the tile map but just below and now their order is switched around so now if I play my scene and go back over to that wall well see how my little character's arm is in front of the wall and that's what I want the very last thing I'll show you in this video is if you do not like the size of your grid in other words you think that these tiles are too big or too small and you don't want to go through the hassle of changing the size of all of these sprite files on your computer which really wouldn't work out well anyways what you can do is you can scale your entire tile map your entire grid to do that you would select your tile map node and then in the inspector under the transform section you can change the entire tile Maps scale here so if I change this to 0.5 and 0.5 well all the tiles will now be half as wide at half as tall that means they'll be 32 by 32 and it will just work if I move my character up to let's say there he's now in miniature world and I can press the play scene button and he'll fall and then and full and obviously this is too small for the character but that's how you could do it so I'm gonna go ahead and change it back to the tile map to one and one okay you can also in this transform area change the position of your tiles if you want to nudge them around a bit you can change these x and y values so if I want to move my tiles over by thirty two each that's how I would do it but I'm gonna leave them alone okay so that will be it for this video go ahead and create a large world for your game going off the sides of your screens because in the next video I'll be showing you how to create a camera that follows you nicely around your level including bounds or limits for that camera so your camera can't follow you if you fall into the abyss but that will be it for this video thanks for watching of course if you like this video if you're lonesome in it please go ahead and click that like button below this video it really helps out me in my channel if you want to see more videos like this one in Godot or a blender or other technology click on that subscribe button as well and click the bell icon to be notified whenever I upload a new tutorial check out my facebook page and my Instagram page in those two places I post sneak peeks and previews of what I'm working on next that's where I interact with you guys the most but that'll be it for this one thanks for watching [Music] you

Channel: BornCG

Views: 39,618

Keywords: tutorial, lesson, beginner, godot, godotengine, game, engine, sprite, jump, platform, platformer, character, land, tile, tileset, tilesheet

Id: 6i7CBU9MsvI

Length: 19min 30sec (1170 seconds)

Published: Tue May 19 2020

Reddit Comments

[u/VRbandwagon]

Today is a great day!

[u/VRbandwagon]

Just finished watching it. It is so easy to understand and follow, as always.

Also, because your videos are short and only cover one main point, it is easy to go back to if we forgot how to do that specific thing.

By the way, do you intend to cover tilesheet mapping? I know you mentioned it quickly during this video, but it might be useful to dedicate a whole video on it at one point, as I believe this is a very popular way people create their 2D games.

Also, working from a tilesheet makes the whole process really confusing and frustrating. Somehow, the properties of each tile are copied and if I change one (like collision, or the size of a "stamp"), it will change the rest.