TileMap Navigation - Isometric and Hex! (Godot 3.1)

in this tutorial I'll be demonstrating how to set up navigation using tile maps now often people get confused when setting up navigation especially when they're using non orthogonal tiles like the isometric ones you see here or hex shape tiles for example but whatever tile shape you're using there are a few simple rules you need to follow to make sure your navigation works well now one thing I won't be covering in this video is the code required to move your character through the map for that part I've partnered up with Nathan at GD Quest I'll link to his video at the end and in the comments below and you can go there to learn how to use the navigation once you have it set up to begin you can download the starter project from the link below it contains the art assets we'll be using for our tiles unzip the file and then import the project in the project manager navigation 2d works by using navigation polygons here I've drawn a big navigation polygon just by itself as long as I click inside the polygon the navigation 2d will be able to find a path to that position now when you have a tile map you're not going to be drawing one big polygon instead you're going to have a polygon assigned to each tile and then at runtime the tile map node will combine all of those individual polygons into one large one that covers your whole map here's our setup for our navigation scene I have a navigation 2d node with a tile map as a child of it the sprite and the line 2d are going to be for the character that moves around and again you can go over to Nathan's video to see how the code works to make the movement we're going to stick to the tom app for this one now to make the tile set that goes in your Tom app you can use the new editor in goodö 3.1 which lets you chop up your image file into the tiles and assign polygons and all that kind of thing however I'm not going to use this I'm going to use the old-fashioned to create a scene and export it as a tile set and I'll explain why as we get a little further into this demo so let's drag our isometric tile out here to create a sprite and I'm going to make sure to set its position at zero zero because I want to be able to keep this thing centered so here's our isometric tile and unlike a square tile you're gonna want to make sure that your spacing is correct for example if I were to duplicate this and you saw a second tile when they're in the tile map we don't want these laid out in a grid and all spaced out we want them to overlap a certain amount so that the tile behind is covered by the tile in front all right they're gonna line up like that or over on this side and so that means that our polygons are going to have be affected by that too but let's start by getting our tile map working so I'm gonna choose convert to tile set I'm going to call this isometric tile set te R est re s stands for text resource in Godot so it's a resource file stored in a text format hit save we go over to our isometric example and we're going to load that into our tile set property of our timeout I'm just gonna load here isometric Taos there's my tile now obviously I can't just start laying them out because my tile map has to be configured properly so you click on the cell and expand it and we're gonna need to make a couple changes over here first we're going to change the mode to isometric and then for the cell size I need the size of this top piece of my tile the this parallelogram up here which in the case of my tiles here is 120 wide and 70 tall and now when I put my tiles out here they line up as I would expect so here's a quick map I drew out that'll give us a good test to see that our navigation is working that it finds a path around and for example these little islands here in the middle should be unreachable because there's no path to them so now we need to create our navigation polygons on our tile and this is really the reason for this entire tutorial is I very often encounter users on the QA forums or on the discord who are trying to do navigation in tile maps especially in non-square time apps and can't figure out why their navigation doesn't work and it's because you have to create the polygons in a specific way to make sure that they are processed correctly so let's go over to our tile here so this is where we want to make our navigation polygon that covers the top of the tile so it's gonna need to be 120 wide and 70 tall and so over here on my tile I'm going to add a navigation polygon instance and I'm going to just click on the screen and it's gonna ask me if I want to create a new polygon for this and I do and I'm not gonna worry about the points at the moment I'm just gonna draw four of them so there's a navigation polygon and I need these to be aligned exactly and since we've turned on grid snapping which I've set to one pixel then each one of these points is I'm gonna make sure that they are at whole-number pixels as I move them around and that's going to be really important and the other thing is I need to get these aligned exactly now if this whole height here is 70 how can I tell that I've lined them up right well one thing you can do is use the ruler over here I'm going to take the the entire sprite and I'm going to shift it down so that it's centered on the x-axis make it a little easier to for us to do the lining up now we want to use the ruler so one thing you can do is you can zoom in really far and you can pull these things up and put them at exactly 35 right that's half of if you can see over here here's 34 and 36 you can even move over like this put it right next to the ruler if you're concerned about getting it lined up just right but we want that at 35 just half of 70 and then down here we want this one on the x-axis and then we want it at 60 pixels again right there lined up at 60 same on this side we want this to go over to the 60 line and finally clicked away from the polygon we want this last one to be down at minus 35 which if we zoom over here you can see I am at 35 now I know that my polygon ish is sized exactly right and this is really important because when you have two tiles let's duplicate this for a second just to look at it when you have two tiles and they're the tiles are aligned like this if the two polygons don't align exactly and by exactly I mean whole number amounts if you don't have snap-on and your pixel or your position of your vertex here is at you know negative thirty five point three to one then they're not going to align exactly right if they don't align exactly right the tile map will not be able to blend these into one large polygon and you'll find that you can move around on this tile but you can't cross over into this tile you click over here you get no movement so let's convert this to tile set again this time it has polygons on it make sure you have the merge with existing over here set to OFF that way when you save it or it'll overwrite the tile set you did before instead of trying to merge them together which can sometimes cause issues when you're changing individual tiles I mean save over right now if we go over to our isometric example here everything should be good let's hit run and let's see what happens there we go you can see it's finding the path around winding around between if I click on the little island there's no path to there so it doesn't it's not able to move and everything is working as expected now I'm just gonna show you real quick what would happen if you didn't do this right like let's say that this was this one was off just even one pixel all right so now this polygon is not gonna line up with an adjacent one now I'm clicking nothing happens it's the only time I move is when I'm in the same clicking in the same tile so if you have this problem it could very well be because of your navigation polygons not aligning now in Godot 3.1 you can use the tile set editor to edit your tiles it looks like this you have the individual tiles and you can click on edit here and change around their various polygons the problem with this when trying to do precise measurements like we needed to do for the isometric tile is as you can see there's no rulers so while you can turn on grid snapping and configure it to one pixel and all that it's really hard to measure it out if you know you exactly need you know something to be sixty pixels wide or something like that because of that I found it easier for this particular project to use the scene export to tile set method instead of using the new editor hopefully over time this editor will improve and give us some more functionality where it makes it easier to do those kinds of precise polygons drawing so now that we've looked at isometric tiles let's briefly move over and take a look at hexagon shape tiles so here are a couple of hex tiles ones gonna be our clear space and one has an obstacle in it so we'll add a nav poly to this tile so we can walk through it and we won't add 1 to this tile so it'll be an obstacle that we can't walk through first let's go over and set up the tile map node so here we have the same exact scene set up as we did for the isometric demo the only difference is going to be how we configure the tile map the code will be the same everything else will be the same so for the tile map there isn't a mode for hex but that's ok we're gonna stick with square and we're gonna enable 1/2 offset in the x-axis that's going to make alternating rows offset from each other sort of in a brick pattern like a brick wall I don't know if you can see this on the video the orange the pale orange grid lines don't show up too well so hopefully you can see that but you'll see it when we start laying them out and then we'll go ahead and load the hex tiles just so we can see what they look like so obviously this isn't the right layout right so we need to set the size now the size of these hexes is 120 wide by 140 tall but if I put that in there 120 by 140 then we're gonna get the horizontal spacing fine but then the vertical spacing is gonna be too far apart right there to spread out because each individual square doesn't overlap any so we need this height to be smaller if you look at the tile this distance here from the top to this corner right here is 35 pixels so we would if we took away 35 pixels this would shift up that far so 140 minus 35 we're gonna put this to 105 now you can see they moved up and they meet but there is some lines that you can see between the tiles and that's because these tiles have some if you zoom in have some aliasing going on here on the edges so what we can actually do is set this to 104 it actually shifted up one more pixel and that's gonna blend those lines together so that when we run it this is gonna be very hard to see right obviously when you zoom in we can see it a little bit but looks a little nicer so now we can you know draw our tiles they blend together just fine we can have our obstacles you know we make a big area to run around in just paint this up and then we'll put some obstacles that we have to kind of avoid and walk around and when we run it you'll see this looks nice and smooth so now we just need to make those navigation polygons and so this is going to be the same situation as with the isometric tile which is that we need these points to be aligned with the corner so we started with this one right here being at zero in the y-axis and these over here are at 35 just like we counted before so this line comes down to 35 the width over here is 120 and then I did the same thing here where I moved it up one pixel so instead of being at 35 up from the bottom it's 36 up from the bottom so that the height will be 104 and that's going to make these again aligned exactly the same way the tiles are aligned and the polygons will be blended together just fine so if we go over here and run the hex example with that tile set we get the same kind of that we would get in any other kind of tileset so hopefully this helps you out when you're making your own navigation on your tile sets and prevents you from having any of those frustrating issues of not being able to figure out why things won't move and that's for the code for calculating the path through the navigation tile set I will direct you over to Nathan's video at GD quest and you can see how that's done as well thanks for watching and I'll see you in future videos

Channel: KidsCanCode

Views: 48,976

Keywords: programming, coding, tutorial, lesson, godot, godot engine, gamedev, game development

Id: OYn49ghh9k0

Length: 15min 40sec (940 seconds)

Published: Wed Jan 23 2019