Godot Engine 3 - Platformer Game Tutorial P5 - Autotiles

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to part 5 for Godot 3 platformer series in this video I'm going to be showing you how to set up an auto tile in Godot 3 by the end of the video you'll have you'll have an auto tile tile map like this or you can click and you see when I'm doing this it automatically creates tiles in those places and then we'll also have collision setup so that when you run the game that you will get your player will be able to collide with the tile sets that you just set up so let's get started a small disclaimer here well first of all you'll need to download a sprite resource for the auto tile it'll be called jungle grass Auto tile even though it's not grass maybe I'll have it renamed but yeah download the sprite that'll be in the description that's despite we're going to be using and then the other little disclaimer here is that here's the project here it's this process is a little bit fiddly still so it's not quite perfect yet it's a newer feature in Godot 3 and I think they're they're still kind of polishing the features the best way to put it so come to open up your project and once you get that sprite file drag and drop it into your project folder I'm gonna put mine under sprites and then under tiles so then you should have it here like this I might actually rename it if it'll let me do that so let's name it jungle let's just name it dirt dirt Auto tile 3x3 rename okay Riaan ported it you can actually delete this one now well I don't know maybe you'll want that still it has some grass and stuff that you could potentially use so ok so we've got our tile so you're going to delete I already did this unfortunately when I was doing it but you're going to right on both your dirt tileset not the sprite but remember the resource that we had created before you're going to right-click on those and delete them both the the the tile set dot tre s and the tile set scene technically you don't have to delete them so it's fine if you don't but i deleted mine and you can see in my world now there's no tile sets it's just the player and the end of the world complete note so then we're going to create a new scene and we're gonna add a base node to this and we'll just call this dirt Auto tile and you can click on that and come to your tiles and drop our sprite into the world make sure that you import it correctly so if you have to re-import it click on import and then select a preset select 2d pixel re-import it so that it's nice and pixelated and not blurry and then click on this we're gonna set centered to false so uncheck centered on your sprite and under transform make sure it's set to 0-0 save this scene that's dirt Auto tile dot t sen and then i'm going to convert to tile set dirt Auto tile dot TR es okay now we can close out of this scene come in to world 1 and if we come back into our resources folder up here we should have our dirt auto auto tile TR yes so then we're gonna add a new tile map node tilemap we're gonna drag over our dirt Auto tile put it right there you can see then undersell not undersell when you click on when you click on the tile set right here inside of our tile map so click on that it's gonna open up a new window and then here under 0 there's one called lot is Auto tile we're gonna click yes and then that should add this little tab down here once you've clicked is Auto tile that should add this little tab down here called Auto tiles click on that and you can see now we've got an auto tile window and we can select a let's come into icon we can select an icon so we're gonna select this one right here because that's a great one for icon now we're gonna go into bitmask oh so this is important to bit mask mode should be set to 3 by 3 so that's important and then tile size 60 for spacing zero because this is a 3 by 3 Auto tile for the bit mask mode okay now once you've selected the bit mask tab right here you can just start drawing in these and you're going to draw them only where it's dark so don't draw on the edges okay and you need to use this exact layout for your Auto tile there might be other layouts you can use but this is the one that I was able to get working so yeah I know this one works so this right here doesn't take too long honestly to do this it's pretty quick but you have to make sure that you set it up exactly the same way that I do and you're just gonna color in all of the dark oops don't get those corners those corners are the ones that'll get you oops got a corner again okay I'm double-checking it right here everything looks good your pattern should be exactly the same as mine if you missed a single square like that the Auto tile won't work so that's important okay so we should be able to save now click on tile map and we should get working on a tile perfect so this doesn't have collisions yet though so if we run our game you're gonna see our player is gonna fall right through this it's not gonna work that's not what we want so how do we set up the collisions for this let's get working on that I'm just gonna set up a little bit of a level here let's do that there we go okay so collisions this was the tricky part for me so click on tile map again click on the tile set dirt Auto tile bring up the inspector a little bit more okay click on Auto tiles and you'll see there's a spot for collisions here but you don't want to start creating your collisions yet because you need to set a collision shape well first of all you also need to come into the tile map and under collision set use kinematic I think we might not actually need that let's test it without it so let's try it without that first so let's go into tiles tile map and click on the dirt tile set and then click on collision now we need to create a shape so click right here and we're gonna use a new convex polygon shape to D so click on that so once you've assigned a shape then you can start creating your collisions and this process is a little bit tedious I'm not gonna lie but once it's set up it will be worth it because you'll be able to create levels very quickly so I'm gonna just bring this up here and then you need to see it created a little collision up here in the corner on this tile that's terrible we do not want one there so just press this trash can to delete it then we're gonna we're gonna do this kind of column at a time I'll click on this this one right here and [Music] make sure you have this snap checked on right here so we get snapping and 64 by 64 is probably fine like that okay once you've setup the collision it should be yellow like that and then you can do the next one you can do the next one I I do wish there was a hotkey because once you finish the first collision you can it switches to this automatically so you can immediately click the next one but then you have to come up and click this if there is a hotkey for this it would it would be a lot faster but you can see it's not too bad and we don't actually have to do every single one either we only have to do the ones with an outside edge which is admittedly still a lot of them but we don't have to do any of these that's good ok got these ones done there's actually quite a few over here we don't have to do so it gets faster once we get through this first part yeah they're just a few little things that I could see in this where it could be polished still but like this is as far as I know this feature was pretty new it's very very I was kind of like a last-minute addition a little bit not last-minute that's probably a little bit extreme wording there but it was definitely very recently added to the engine and so it still feels a little bit like there's some areas that could be improved in the process for getting it set up but once you do get it set up it's really nice and the set up makes it work the benefit that you get out of the setup makes it worth the process for setting it up even if it's a little bit tedious so now we just do these top ones over here you don't have to worry about any of the ones that just have corners only only a tile with an edge needs needs a collision and we're really closer see if there's a hotkey for that I could do this about twice as fast oops dang it oops now wait wait did I unclick it no I'm working okay okay that works I guess hopefully and I'm just clicking each corner here and maybe there's a way to make this process faster that I don't know about that's possible too it's relatively new so there's not a lot of information on it okay once you're done it should look like this you can save again and hopefully you created this first because if you didn't create the the shape first then none of this is gonna work okay save again click on our tile map and try running the game we may need this set uses kinematic I don't know nope doesn't look like we do and you can see this is now working so let's create another one inside of our world - once it's all set up you can just add the tile map drag over your dirt Auto tile TR yes and put it in the room let's do maybe some up here something like this that looks pretty cool save the game load errors again run the game and we're working and all the collisions seem to be working correctly sweet now if you got if you got any sort of an error when you collided with your room complete world complete it might mean that one of your world scenes has a dependency issue from deleting the old tile set so just make sure that you get rid of like I said at the start if you just delete both the old tile Maps and the tile set and the scene that that can help with that a little bit so you don't have a dependency issue they're not hard to solve even if you do have one but you just need to open up the scene and fix it tell Godot basically Godot doesn't know where the file is because you deleted it so it's like where is this file it's was used in the scene and you just basically can tell it to ignore that and then delete the file delete the tile map okay now we're gonna do one last thing here real fast I'm going to open up the player scene we're gonna do a basic basic very simple camera it's not going to be advanced at all but I did want to show you guys how to set up a basic one so just come to your player scene in the player scene click on player add a new node I had a camera 2d now the most important part of this that I'm going to tell you right now is that you need to set current make sure you check current that will enable this camera then I usually turn off drag margins as well we can save the game run it again there's my run button right here and now we have a basic camera following our player as well it's a very very simple camera but it's it's you know that's so easy to do it's ridiculous so then as one last thing that we're going to do here before I end the video we're gonna add a new background so if you come into your backgrounds well let me there's going to be a sprite in the description for this as well so let me come into my resources here and drag in the sprite okay drag it in we'll put it in sprites and then put it that's fine we'll just leave it right there in sprites and we'll come to our player and we'll add a new layer on our player and for this we're going to add a parallax background it's under canvas layer and all we need to do is attach our sprites our sky sprite to this so we can just drop it in the room and I think it needs to be both of them need to be at 0 0 so let's try that here make sure your trance Oh so this transform turn off centered and then set your position to zero zero and actually we might give it a little bit of offset we'll see what that looks like but parallax background a sprite of the sky underneath the background is it did it import it's blurry you can see it's blurry so let's go to import presets 2d pixel re-import there we go and then run the game and there you go the background follows the player exactly and maybe maybe that's not what you want but this is a simple way to to set it up so let's say let's give it a little bit of offset and by offset I mean just like position Y is not actually how it follows the player you could mess around at the parallax settings here if you want to try and get that to work like if you set your if you set your base offset what's the canvas layer like what if we do point five and point five here does it follow the player at half the speed this won't work though because our background isn't infinite so we'll have issues but no it doesn't seem to do that so maybe it's because I made it a child of the player I don't I don't know if that's why either way just we'll just set this back to 1:1 wait it was zero zero wasn't it yeah and then we'll do we'll come back into our sky and we'll set our white offset to negative 64 let's try a negative 128 no 64 there we go run the game again and like I said this is a very simple simple background solution and a very simple camera but it does get you started and I might go into more depth detail about cameras and setting it stuff for cameras later but this is a great way to get you guys started so thank you guys so much for watching this video hopefully enjoyed it I honestly feel like the auto tiling was tricky to figure out but once I finally did get it figured out it's it's really cool and it works very well thank you guys so much again and I will see you guys later

Channel: HeartBeast

Views: 87,179

Keywords: Game Design, Game Development, Indie Game, Godot 3, Auto Tile, Autotile, Autotiling, Platform Game, Simple, Godot Engine

Id: uV5WKocIycY

Length: 20min 33sec (1233 seconds)

Published: Thu Mar 01 2018