Make an Action RPG in Godot 3.2 (P7 | Background Grass and Dirt Path Autotile)

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to the Godot action RPG series this will be part seven and in this video we're going to be learning about setting up a simple background for our game background tiles and a tile set as well and how to set up Auto tiling for the background there's actually two different methods that I'm going to show off here and then I'll show you which one that I actually prefer so first of all remember how we made our world a why sort node well we're not going to be able to keep that that way because then everything that we put under this would be why sort so let's change this will change its type back to a node 2d and then we'll add a new node as a child of our world we'll make this a Y sort node and then we'll add all of our objects as children to that node so I just selected the player held shift selected the brush or the bush and then grabbed it and dropped grab them all drop them under our Y sore node and now that we've done that our world we can add a new sprite here sprite sprite 2d let's drag this all the way up to the top and it's texture will be inside of world and grass background dot PNG for the offset let's uncheck centered and you can see there is our sprite however we drag this out it's going to stretch it right and that's not what we want so how do we make this sprite fill up the entire area right here without stretching it like that well if we come into region here we can enable region and the first thing you'll notice is that it shrinks all the way down like this and we also get a new tab down here called texture region and we can come into here click on this and we can see then zoom in well let's zoom in here I use middle click Japan you can see we've got some sort of a region here and as we extend around this hour sprite extends here and we can actually select this let's set pixel snap equal to true and we should be able to select our entire sprite quite easily that way okay and this is actually 64 by 64 2 so you could set up a grid snap set this to maybe 16 by 16 and easily easily select it as well like that anyways that doesn't really matter what you can see however is we can extend these out farther too but if we look up at our sprite it kind of stretches it out weird here on the end and so that's not really what we want but when you when you set your region so when we when we set these properties here in the texture region tab what it's actually doing is setting these values over here once we once we have region enabled these values right here are getting set so you can see as we manipulate this the values over here are changing so that's essentially what you're doing if we want this to repeat across a long distance we can come into our texture down here and come into import our import properties we can check or come to the repeat flag right here and set enabled now when we stretch our region out past well we might have to we forgot to click re-import there we go then click re-import now when you stretch out past your actual region you get you can see that the sprite is actually stretching here and we can fill our entire room this way by stretching our region instead of our sprite or we can set our region manually which in this case probably makes the most sense you could turn on centered again and you could stick your sprite in the middle of your of your room by setting its it's offset or its transform here so we do let's see our room size was 320 divided by 2 right that gets exactly in the center and 180 was the height divided by 2 and you can see you can actually do the math right here in the editor and Godot will do that math for you so that's very convenient and then you could set your your region write your where is our region here we go your width and height in your region to be 320 by 180 the exact width and height of the room and that would properly set this up and let's so that's how you can do a backbone that way back ground and this is a pretty good way to do it there's another way so I'm going to hide this node so we can't see anymore we're gonna create another node this is going to be a texture rect right here and with this node we can stretch it to fill the whole room and we'll drag it up here as well call this one texture background and we'll drag our grass background texture and you can see even when we stretch it it doesn't actually stretch the sprite right well if you come into your properties over here you can see stretch mode and we can set this to tile and then it will just automatically stretch so the benefit of this is you can really easily just drag it around here in the editor the problem with this is that it's actually a control type node and they're not really meant to be used like this they're meant to be used for UI related and so this isn't really a UI right this is actually in our game and so that's kind of the problem with this but the benefit is being able to drag it around super easily inside of our room now which one's better I don't actually really know because I don't know how big of a drawback it is to use a control node obviously the control node is more convenient right it's a lot more convenient to use a texture rect like this but maybe there's drawbacks that I haven't run into with using a control node like this so I don't know which one's better I think for this series I'm going to be using the first method so we'll get rid of our control node and just make our background visible and then manually set our erect properties over here if we need this to be bigger and the reason I want to do that is just to kind of be safe because I don't know if I'll run into issues with the control node but I should be fine just using a sprite like this so that's the plan if you guys have any comments on this in in the description just let me know okay so this already makes our game look a lot better because now we've got a nice background to go along with our character let's add one more little bit here we're gonna learn about tiles so let's create a new node attach it to our world and this will be a tile tile map node we'll drag this up I want this to be below our background so that it draws on top of it but above our Y sort stuff so then we can click on our tile map and we can create a new tile map but we're going to we're going to want to set our cell size so let's first let's set this to 16 by 16 that will be the sail size and we'll come to the tile set property here and we'll do new tile set now tile set tile sets in Godot they're relatively new especially the auto tiling stuff and they've changed quite a bit over the last little while so a lot of this stuff in my Godot 3 videos is a little bit out because they've changed like for the platformer series that I did a couple years ago and tile sets because they're relatively new they're they're getting changes quickly and updates quickly they're improving quickly essentially there's kind of a lot going on with them so we'll try and take it slow so these are the properties for your tile map well if we click on the actual tile set resource right here we're going to see some properties for that resource over here now and we're going to get this new tile set window down here as well and you can see there's some buttons here that we can't really interact with yet but we're going to click this button right down here called add textures to tile set well click that will come in to world and we'll select our dirt tile set PNG so we'll open this and we should zoom into this and this tile set I made with a program called tile setter and I have a video on that as well so if you want to learn more about tile setter you can go check out that video I'll probably put it as a card in this video and maybe in the description I think it's a powerful program to simplify making tile sets like this so once we have our tile set here we can actually select we get we can tell what kind of a tiles once we have our tile imported essentially we can tell it what kind of a tile set we're going to be making and there's three different types up here there's a single tile so if you just need one tile that's no I don't use that very often I'm not gonna lie there is an auto tile right here this is what I use the most often and there's a tile atlas this is just like a list of multiple tiles they won't auto tile but you can you know if you have some chairs and a whole bunch of different things that you want in a big list of tiles you can create a tile atlas we're gonna do an auto tile for this and once we click Auto tile we get this region button right here so it wants us to select a region and you can see we also get some snap options right here and if we turn those on we can actually snap and I'm just clicking and dragging so I clicked up here and dragged down here and select this region well this region is too big but you have to do that before you get these new properties over here okay so originally there weren't these properties over here but the minute we created a region for this new Auto tile tile set we got these properties over here so now we can change our snap options we want them to be 16 by 16 as well so then we can redraw our region so click here drag to here and now our region only contains the tiles that we have right here once we've set up this tile set region like this we can do ctrl s to save and if we click on our tile map again we can actually already see this tile set over here but our it doesn't really work right like this isn't what we want right here and so let's double click on our tile set again and then click on the tile right here that we added and we can click in here again to select the region so it's a little bit of a weird process right there pay attention to that process click on the resource click on the exact tile set that we're modifying click on in here to select our region again and if we do selected tile right here you can see some more properties that we can expand and look into and the first property here is the sub tile size and it's 32 by 32 well we want this to be 16 by 16 again and now we can zoom in one more time we're getting a little bit closer to what we actually need now for this for our auto tiling we need to choose an auto tile bit mask mode I don't understand exactly how all of these work but for this tile set right here we need a 3 by 3 minimal basically what it does is if we click on our masks right here if we're in two-by-two you can see each tile square gives you four squares right two by two and there's a three by three minimal which gives you three by three so nine squares total three by three and a three by three non minimal which also gives you three nine squares total I don't understand the difference between these two right here but I do know we need to use minimal for this and once you've done that the bit mask the bit mask is where you tell Godot how to place the tiles so let's look at this middle tile right here and talk about this one okay so this middle tile when do we want this tile to be placed this middle tile well we want this one to be placed when there are tiles all around it okay when there are tiles all around it and a tile right here that's when we want this one to be placed that's the only time that this one should be placed is when there's tiles all around it so using your bit mask right here we're gonna draw okay so we've got imagine this three by three grid right here now shrink that down so that it fits inside this little square so this is the tile that we are talking about right here the middle one right and then around that you have these tiles so imagine these tiles are around it right so you're telling it when should you place this tile well when there's a tile here and when there's a tile here here here here here here here and here all around it so that's when we want to place this tile okay let's look at this top corner here when do we want to place this tile well this tile okay this tile should be placed when there's a tile to the right of it when there's a tile below it and when there's a tile right here bought down into the right okay so these three tiles around it so we're gonna do that same thing we're going to say here's our tile well it should be placed when there's a tile too right of it when there's a tile below it and when there's a tile down into the right of it so that tells you that tells Godot when it should place this tile so hopefully you're following the logic here a little bit right this tile right here should be placed when there's one to the left one to the right and then 300 so here's our tile one to the left one to the right and 300 so that's how the bit masking works the logic behind where we're putting these red squares and hopefully that was enough of an explanation for example this tile right here when would it be placed well you want to place this tile when there's no tiles around it right this is a single lone tile and so what does the bit mask look like for that just a single lone tile in the middle right and so there's a pattern with this and you'll get kind of used to doing the pattern I almost always mess it up still so when I'm placing the bit mask I almost always miss one or forget one and you just kind of have to look over it again and try and get it right so let's play some now all the way we're gonna place these here and I don't have to do the exact logic anymore because I've kind of kind of gotten a feel for what the pattern looks like right and if you just want to follow along with what I'm doing you'll kind of get a feel for this pattern as well and can I turn off I don't know if I can turn off the grid snapping with this tile set it can be a little bit harder to tell where stuff is because these little brown dots are actually indicators of where these need to be placed where these specific tiles need to be placed so we need some here like this oops and like this and like this and like this so you can see those little darker pixels on those I'm not placing tiles over them and that's because those are actually little edge like in this is where these tiles are and well you can see what they're for right like this corner tile is meant to be placed when there's a tile to the right of it and to the left of it just like this one but not a tile right here no tile right here that's where this one's meant to be placed and you can tell that because the little darker pixel here means that's a corner it's this little corner in here so let's do these ones as well okay and they do make some sort of a pattern you can see these this bigger thicker piece coming down through here these bigger thicker ones come over through here as well oops not right there though actually let's see like that and you can see this section right here is like the vertical version of this section right here down here and then we need our weird cases this one's the little this one's our plus case kind of like this is but for these and these come here like that and this is here like that and there I think that's it so you can pause your video right here and copy mine exactly if you need to it gets like I said I tried to explain the logic of how it works but it's actually generally easier just to kind of memorize this pattern and then reapply it and set up all your tile sets so they're like this that makes it a little bit quicker when you're setting them up so let's see if this actually worked now that we set up our bit masks we should be able to come into our tile map and place it in the room and get some Auto tiling and this looks like I got it all right this Auto tile looks like it's working properly so if yours has issues then it means your bit mask is not set up properly and so you'll want to go back you'll want to pause or I said to pause and setup your bit mask to make sure that it matches exactly how mine matches I'm gonna put in some tiles here just so we've got some little paths in our room come this way there we go that's kind of an interesting little path for our game and if we run the game this tile set is now working properly in our game and that looks pretty good and you can see it's really quick once you get the tile set set up it's really quick to create it in the room now this tile right here that represents this Auto tile it doesn't it doesn't it's not very at the corner right so you can actually set that if we click on our tile set resource again click here again click in here again and then we come to this icon tab right here we can select the icon that represents this tile set and I usually use this one because right that is a better representation of the tile set so there we go and these other properties right here we're not going to worry about them right now we'll talk a little bit more about we'll talk about collision and occlusion in the next video and we'll also talk maybe a little bit about priority in the next video as well and kind of what that does but for now we'll just leave it at this because tile sets are a little bit weird in Godot but once you get used to them and you get you know familiar with setting them up and stuff they're really smooth really quick and can increase your speed while creating levels you can create a lot more levels more quickly using Auto tiles like this and I want to put this over here and here so they go off this screen so thank you so much for supporting this series if you enjoy it be sure to check out my one bit Godot course this series was actually part of a Kickstarter and so it's a huge shout out to my Kickstarter backers who made this possible there will be a link for that course and stuff in the description if you enjoyed this video give it a thumbs up give it a like and I don't normally ask you guys to do this but if you could hit that bell you would be notified whenever I release a new video for this series at the times that I'm trying to release right now our Mondays Wednesdays and Fridays so that's what I'm aiming for three times a week you know maybe here and there we'll squeeze in another video or maybe some weeks they'll only be two videos I don't know I'm gonna try for Monday Wednesday Friday though but if you hit the bell you'll be notified right away when the new videos come out so thanks again and I will talk to you all later

Channel: Heartbeast

Views: 211,546

Keywords: Godot Engine, Godot 3.2, Godot 3, Tutorial, Series, Action RPG, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev

Id: v75IMavnRUs

Length: 22min 42sec (1362 seconds)

Published: Wed Mar 25 2020