Smart Isometric Maps Using YSort | Godot Tutorial 3.2

hey guys and welcome to the next tutorial in this tutorial we'll be taking a look at the isometric tile map that we created in the last episode and what we can do with it to make it really interactive let's get started we're gonna start this episode with this tile set that we created in the last episode if you haven't seen that one yet I'll put a link up there now before we really get started into making this world interactive I first want to share with you the problem that we'll be facing if we try to do that through the tile map system now I want to emphasize what I'm gonna say you now is specifically for isometric towels for forward angled tiles or top-down towels you don't have this problem this is a specific find symmetric so please keep that in mind when you watch this video and when you apply these lessons to your own game world now when I got the map selected I'll add a player to it I made this player before I start this tutorial we'll get back into this player specifically to it later what we want this is when the play were to walk behind these bookcases that the player disappears now the tile map system in god is very powerful and gives you the option to do that if you would drag this player to library and under library the tile map you have this option wise sword and if that is true the towel Maps children so in this case the player will be drawn in order that y-coordinates so with that selected I could move this play now and I can move in behind the bookcases so that's all looks good now is it really good no not actually isn't because if the player player would to approach is a little bit lower you can see that it's now popping in and out between closets and that is because of the y-coordinate of the actual town now we can change this too we can change the towel region I've already put at the center instead of top left we can put it to the bottom left and then we could take this player and have a look at how this works and now if this works fine but now I've broken this bookcase or this sword case I should say because this is a other angle tau it's a little bit elongated so there are some issues there because of the diamond shape of the isometric tau so we need different solution than we can get through the town map system we need to be adding them as props and that's what we're doing next and that's where this tutorial really starts do you want to learn how to design and make games or maybe you just want to learn more about go dub subscribe this channel and don't forget to hit that little bell I can to make sure you don't miss out in many videos also if you're curious about the game development that I do myself I'm live-streaming my own game development sessions every Tuesday and Thursday on Twitch the link the schedule the description the details everything down in that description box below now let's continue now the note that we're gonna need for our solution is a wise sword note this pretty much does exactly the same as the wise sword that we were just testing out on the on the town map only this one doesn't take only a Talmud this one takes every sort of to denote kinematic body rigid body static body to D position note to the you name it if it's a to denote you put it in the wise sword it's gonna be sorted you could pretty much guarantee I've already made another one that's for a whole demo set up I've made a little bit to the southeast of this town map stick around I'll show you that one too so on the big test I'm gonna be making a new child I'll be making a static body we're gonna be recreating this display case with sword but then through a prop instead of a towel system so I'm gonna renaming it this is gonna be the display case with sword orientated East and I'm immediately going to save this branch ass because I just don't want to add one prop I want to be able to this to be reusable so I can use it again and again and again just I can use a towel set so I'll be saving it in my scenes props library I've already made not a couple of props and out of a couple of scenes for that demo which we'll get into in a moment so we have it saved as a scene and now we can open that scene so we've got pretty much an empty static body here so we need to add some information to this we need to add a sprite note and it will also require us to have a coalition shape and we're gonna go for a polygon because we're working to find symmetric art so we don't really got any use for rectangle and stuff so for the Sprint I'm gonna go into the assets of the town set that we have been using in the last episode so we're basically using exactly the same images that Kenny provides in this towel set assets so we're going to take that display case sword east and we will be dragging it to the texture right here I need to get back to my zero zero so here we are right now right Weishaupt how does it work that's gonna be up next so while I sort how does it work how is this gonna help us well last time when we were working on the towel set we were ordering all our different props and rolls through basically ordering the different nodes within the node tree the wine sword it doesn't really matter how it's ordered or how it's sorted all the cares about is the y-coordinate of that specific node so to make sure that this always gonna work together we need to make sure that we got a fixed reference point from which we can work up and go to pretty much gifts that at our zero zero coordinate between X and the y-axis so what we'll be doing or what is actually happening with this case if the player is walking around this case you want the player when it's drawn in front of this or walking in front of this case we want to be drawn in front and when it's walking behind this case we want it to be walking behind now if we take a look at the player here this player is also by the way provided in the assets of the dungeon tile set or the dungeon tile set asses from Kenny so you can also find that a character in there so if you want to use this one you can just get it from the same place that I showed you in the previous tutorials and tile maps so I've drawn my character or I've actually that dragged the sprite of this character a hundred and ninety pixels upwards so that will put it into the negative in the ink go to that's positive Y is down and I've interacted in such a way that the heels of the characters are exactly on the zero zero point on the X zero this way it will be in a fixed reference point so what we need to be doing with our display case is we're going to be dragging this sprite up and we can say okay as long as the feed of the player are gonna be standing in front of this case the Y of that player is going to be higher than the Y of this bookcase because it will not be able if we if we add a coalition shape to it and it won't be able to enter through the case anymore it's never it's why his feet are always gonna be below in this X reference point that we have for the player so that the feet will always be below that that's the chest or the display case now we also of course have to make sure that the player can move around on this side because we've got a little bit of space here but we can't put it like this like how now we would make sure that the player can't get behind there but now the player if the feet will be standing on this side of the image it will be drawn behind the kick oh that's not what we want so a reference point where our good practice or good guideline I guess is if you have a rectangular shape isometric piece of art always put the corner which is sort of in the distance so the third is the way corner which will be this corner for this display case always put that about equal with the X line now we're gonna be going back and forth to this closet a couple of times but now just this safe we only need to put a polygon a polygon in here so let's quickly draw something out we'll change that a little bit later save that again now who go back to this map and this display case is now somewhere in the corner because it will be spawned in at 0 0 we're just going to delete it don't need it right now because we got our scenes now and in our scenes our props our library we not got that this place support West or wiffs ward and now you can just drag it in because put it in the world however many you want doesn't matter it works just like a towel set just add more and more and more and more now if we take this player we're gonna be dragging this one around you let's see now it's strong behind this case and now oh well now of course that's not in front yet we need to put this player in so on this test Y so as well and all these points need to be in this test wise sort as well so now they're all in the Y sword and the Y sword is gonna be fitting around out okay how should I draw this and as you can see the plate now the player know each player this player is behind here you can see here it pops out that we need to fix that but it's now drawn behind it and if you were to put two bookcases close to each other you can see that it will be drawn in front of one and behind the other and that's exactly the sort of 3d faking that you want to be doing when you're making a 2-d game now how can you make sure that the player doesn't accidentally hit that one spot there that we missed out that we have identified as a problem as we're working with a rectangular shape another square shape so we're gonna go back into this display and we're gonna be working with the coalition shape so I already got a : shape and we'll be adding this normally in a perfect world you would make the coalition shape equal to where the case hits the floor you don't want to drag it out all the way because then it won't be able to walk behind anymore so you want to sort of have the footprint of that specific piece of that or assets and you can make it a little bit you know it's better to be safe than sorry so right now the player has a collision shape as well and as you can see I put a little bit of margin around the player because we don't want these hands or these arms to glitch into walls or something like that so I made sure that the collation shape of the player is a little bit wider than what it would normally need now that we'll make sure that when the player comes down here its coalition shape we'll hit this coalition shape before it would be able to move below this X line there by drawing it in front of the case however we got a little bit too much space here this is too much for D this this is too much space for the collision shape to be enough buffer and the heels will get below this point and the player will be drawn in front and that's the sort of glitch order sort of artifact that we saw just a moment ago now what you're very often seen in 2d isometric games the allo to being a perfect example is that you can't approach objects from the back as much as you would have expected it to be able and that's because they put a little bit of extra coalition shape there so basically what they do is they make the coalition a little bit like this now you wouldn't necessarily maybe have to track out this last point but if you don't drag out this last point just sort of not gonna be walking parallel with the closet if you would be hugging it and that would create a really weird feeling so it's better to just drag out both points a little bit the bind the play doesn't really get this strange feeling so now with this extra little bit of space here the margin of the player is enough to make sure that we don't hit a weird artifact walking on this side of the closet so if that's how we can save this now all these clauses as you can see all have updated their shape so as soon as you make one update in this single scene as their own instance they'll all update automatically all of them and that makes it really easy to do something before example all your bookcases or your sword displays everything you you do you can do through that one scene now if we're play this this player also has a camera to D this camera to do is also set to current in the in the inspector so when we play this we should be able to move around with this with this player yes we can so now when we woke up here you can see we got a movement slide function at a moving collide so we're sliding past this bookcase and we can move around it and as you can see I can't approach this closet from the back enough to glitch in front of the closet I can only get there right there so this margin that we've created on the feet of the player are enough and as you can see account approach the display as much from the back as you maybe naturally feel like it's possible but in action-rpg you don't really know this is because you're way too busy pointing enemies and all that kind of stuff I mean this feels close enough to feel natural as you can see we're missing a little bit there and this of course works for all of these closets at the same time now with that done you know how to make a prop and you can do exactly the same with these barrels you can do exactly the same with these walls with these closets and that's what I've been working on and that's where that that demonstration Weishaupt is for so let's switch that one and look at how you can use this actually build some levels and I'll have some tips for you and how you can actually make sure that you snap those wolves together super neatly so you can get exactly the same effect that you do in the town map system let's get started on that now let's move away from this old town set and go to the demonstration that I was talking about I've already removed the Y's sort that we renamed to test as we no longer need it right here we got a little bit of a demo and as you can see it from all the collation shapes these are all props the only towels that are still in this section are the floor tiles I don't see any reason why not to use them for the floor it works perfectly fine and isometric art as long as you don't need to Weiss or those four styles you're good you can also add coalition shape to the floor towels for example if you want to have any sort of rivers or lakes for example in outside environment that works perfectly fine as well also together with all these props and I'll probably give a demonstration of that maybe in another video maybe already the next one so right here we got a little bit of a demo let's go over a couple of these assets and I'll give you some tips on how you can use it first off let's have a look at the wise sword itself the wine sword has children and it has other wise swords as children now this has a little bit of a special functionality because if a wine sword note is a child of another wise sword and this.y sword sort of becomes non-functional and only becomes a container to pass on its children to the limit why sort that is a child off so this wise sword will collect the children of all these other voice wards put them in one big bucket and then it will draw them out based on their y-coordinate that's very important because with these wise sorts basically becoming non-functional other than passing on their children to the next voice sword now become sort of container wise swords which you can use to sort of organize your project putting the walls inside the wool wine sword putting the props inside the props wine sword putting the player in the player wise sort and of course making the project ready for enemies and projectiles putting your enemies your kinematic party enemies and your rigidbody projectiles in these specific white source will pass them on to the mainline sword which is gonna sort all of them on the map based on their y-coordinate that by not only the player can walk around the different closets but also your enemies your bullets your fireballs your projectiles your arrows your whatever will be drawn in order and everything can walk and fly in front and behind all the different props you have put in your game making it very powerful in its organization methods now with that why sort out of the way let's look at some of these scenes how to set them up and what you can learn from that now looking at some of the scenes let's start with the easy one with this bookcases here these bookcases are pretty much like the display case Ward we made earlier only the display case sort was a lot more elongated thereby it created a lot more space between its corner and ay0 line that's not the case with this bookcase this space right here is a lot smaller small enough for the margin of the player to be enough to make sure we don't get any weird glitches so that's why I've used the true footprint of this book closet what is yeah this book closet to make it to to get the collision shapes that we want now for the walls the walls all have the extra spacing requirement as we saw with the sword display the display case so I've not only taken the footprint but I've put that out a little bit further and again I've put the corner of the wall in the furthest or the furthest corner on the y 0 x axis now another important thing is that when you're working with these sprites for the walls make sure you always reset your X to zero so we didn't have to do that one for this wall yet and in my case I'm using Y increments of 10 as you can see the corner is not exactly on the Y zero and that's very important to not always do because we're gonna be making use of grid snapping and a grid snapping or only word if the walls are going to be lining up nicely so I'm using increments of 10 for the wine you can use any kind of increment for you it's also dependent on how big the asset these assets are kind of big can you get them a lot of pixels but maybe if you work with pixel art you use your 32 by 32 you might want to bring that that increment down to maybe even 4 or 8 pixels now when we have a look at the wall corner this is pretty much the same though we want the player to be drawn in front of the wall if it stands inside the corner so the heels of the player has to be lower than the corner so we put the inside corner exactly on that y0x access line and we've given again a little bit of extra space on both sides to make sure that the player doesn't glitch through the wall now with all of that set up and that's the safe as well as we have already put it we can now see this map and let's give this a little bit of a play let's give it a whirl let's see how this all behaves so now we can move behind these book closets even when they're standing a little bit apart from each other is all works fine of course the bookcase we had already tested previously and in the wall I'm hugging the wall right now and as you can see I'm glitching nowhere through this wall and actually giving it a little bit of extra space that actually work making sure that we keep our head above the wall there by the plate can always see itself so it's good that some visual feedback there also with these barrels we make sure that if we stand in the corner here our feet is just behind the barrel and that's sort of that specific need to greet II did tell to make sure that everything draws fine that's very difficult to set up with in the Talmud editor it's much easier to do in one of these props so with that said let's have a look at how we can actually use this to quite quickly build up a level instead of you know dragging and nitty gritty detailing everything so if you wouldn't it needs a gritty detail everything and what I mean by that is if I were to direct one of these walls out and we first have to select the wall wide sort to make sure it goes into the right container you would have to really drag these very closely make sure these all will line up nicely and then you know you to have to let it drop at some point and you can get it right but it goes so slow was actually much faster is if we use the grid snapping up in a tool bar here you got this grid snap Mikan and when I press that and I press this free circles bullets whatever you can configure the snap and I set this grid step to ten pixels at a set I'm using with a 10 pixel increment in the y coordinate of all these different balls to make sure that they keep lining up nicely so now that set them up with ten now I cannot find detail the placement of this wall now I'm snapping it to a 10 by 10 pixel grid or I can very easily find the overlap with the other wall so with that I can select this wall I could drag them in straightaway one by one that takes a little bit of time like now for example I missed it now you gotta be careful because when you miss it and you select it and you reposition it to the right way now you got this wall selected if you would now add the next one you now make a child of that wall that's not what you want you want them all to be child's of this white container so to work a little bit faster you could also just add a couple of these in at the same time so okay I need another wall that's maybe for long and then once you've got them all in you can drag them into the right snapping position as you can see that goes reasonably fast but I can go even faster you know this doesn't make this wall a little longer to demonstrate that you can also select it and control deep duplicate it now you can just drag it out don't drag it out track it out and because you're duplicating within that Y sort of container you're just adding more and more and more of these to that specific container so they'll all be in the right Y sword so that's a way how you can use grid snapping now I also said we're gonna be making some more interaction within this game I'm not gonna be doing that one in this tutorial it's gonna be too long fit but I do want to show you what the possibilities are so in the next two three minutes I'm going to take some time to give you an idea of what's possible by using all of these as props so the possibilities are actually kind of big and the possibilities are very much related to many problems that people face when their work with tile maps and questions I often see on rather than Facebook is for example okay you mentioned you got a towel set and you got a towel set with a door now I don't have a prop ready with a duel but within the walls we do know that we got a couple of doors here so imagine you have your towel set and you have added your wall to the world and now you're wondering okay how is the player gonna interact with that wall because that wall was in a towel set and yes you can put a script on this specific towel set to do the things that we'll be doing right now but it's it's somewhat more deeper in the code and you would have to code a lot more you can make much less use of all the parameters of a of a static body 2d all those parameters are simply not there because you're working with a town on a static 2d so imagine that one of these walls is actually a door so that's for example this one this will be a door what you can do is you can simply add a child you can say okay I'm gonna add an area 2d to this and to this area 2d will add a coalition shape and that coalition shape is going to be a circle and we'll track the circle out a little bit and replace it to the middle of Tommy was a little bit too big maybe maybe like this and we could say okay as soon as the player we could hook that up in the code as soon as the player enters this area 2d the door should open or maybe a pop-up should appear do you want to go to the next level or maybe the action item E or F or whatever you map that to your keyboard should become a door opening action you know just like you get close to a chest your action the action button changes functionality based on what's in the proximity or you can detect what's in the proximity through this area 2d and now if you would do that on one of these walls if that was actually the real door if these were all doors they would all have their area 2d now now he would hook that area to be up to some codes you can actually program all the doors and your games for that specific type of door in one go you don't have to add that to your move to the world you don't have to go to the map add a child that area 2d and make that OH for a lab with exactly that door apart and you decide to put the door somewhere else and then suddenly the area to these in the wrong position so with that this actually creates a lot of options now for example another thing that people often ask ok I put some chests or I put some barrels into the game or I put some book clauses into the game now I want to make them interactive I want to make them lootable or the players should be able to look through to both closets and see if you can find something or but you also very see in action RPGs is it not all bookcases actually lootable maybe there's a random selection of bookcases based on RNG numbers with a randomizer there's gonna determine maybe 20% of all the bookcases in the lift in a level when it loads is going to be lootable that way every bookcase that was literally the last sign the player played that level is now going to be different so that makes the replayability of your map higher because you implement more randomness so the player has more to discover even though he's playing the same map so with that for example what you could say I'm gonna go to this book closet and this book closet I've added it to a group you can already see that I already done that so I've added to the book closets group now what you can do now on map you can say okay I'm gonna give you a script and on this script you may be on there ready and you're gonna run some function that's gonna say randomized loose for example and you're gonna run some Randi function on there to make sure you randomize the seat and then you can say okay for closet in get three get notes for getting those in group full closets sits closets yeah I think I think you're right like that you're gonna do I know a Randi function and you're gonna be if you're bigger than 20 then you have to be lootable and then we're gonna add an area to D or that we're gonna maybe change highlight you know this is not real code but in there you can then run the code and this code will run as soon as the map loads so as soon as the map is loading you'll call the function it's gonna find every bit of these bookcases because all these bookcases if you look at the props because we've placed the main scene in a group all these bookcases are in a group so if I just copy these is in a group or if I were to select props and add a bookcase also this one will be in a group now so all of your bookcases are now in a group so when you call it function get notes entry and you can say okay run a function select a random number between one and a hundred if a number is higher than 80 then I want to add an area 2d to this bookcase or I'm gonna activate the area 2d or when the house mother or house the mouse hover over is over that specific bookcase with this area 2d I want to create a highlight using a light 2d or a shadow or a different sprite you know you can do all kinds of things you don't have to worry about detailing that inside the map you can detail that in the props of the scene the scene props and they'll be copied over you can just add them into your world super easy super fast so I think I've been rambling on enough now we've done a couple of things I'll show you a couple possibilities-- showed you a little bit of like what's maybe possible it's not turn a tved way of creating a world and I think it's the only right way to create a world with an isometric map again I'm telling you when you have forward angled map you don't need to do this although you might still want to do this because of all the functionality these props are going to give you so with that said I think we're done here that was it for today guys I hoped you liked it if you did smash that like button hit subscribe don't forget that little bell I can to make sure you don't miss out on the next video don't forget to check out that twitch account if you're interested in the game development that I do myself and stay tuned for the next episode of the tutorials that we're making here on the game development center I think the next tutorial is going to be that one tutorials talking about in the video making sure we add in collision shapes to the towel set through the town set editor data we can use for example rivers lakes making sure that we can't get into the water you can create clips on whatever I might also make use of a different tile set maybe through a towel set sheet that's a little bit of a different approach I think it's a good idea to also show you how that works so that's stay tuned for that episode and until then keep on gaming keep on coding see you guys

Channel: Game Development Center

Views: 21,488

Keywords: Godot Tutorial, Godot Map Tutorial, Godot Isometric Tutorial, Godot Isometric Map, Godot YSort Tutorial, Godot YSort, Godot draw order, Godot how to use ysort, Godot tilemap, Godot tilemap system, Make an isometric map, Tutorial Godot, Tutorial Godot 2d, Godot beginner tutorial, Godot engine, Godot game engine, Godot 3.1, Godot 3.2, Godot 3.2 tutorial, Godot 2d, GDC, Godot, Beginner, Tutorial, Game development

Id: jK7ebPIq1Ho

Length: 28min 47sec (1727 seconds)

Published: Mon Mar 16 2020

Reddit Comments

[u/Stefan_GameDev]

How to create interactive isometric game maps? We will take a deep dive into how to add nodes as props inside nested YSorts to get us the smartest maps in Godot!

[u/LordDaniel09]

How would you recommend dealing with Isometric maps that has height to them? It is a problem i face right now, I am trying to write a shader to make it “easier” to use, but i am not that it actually will be easier. The dirty way is to just have tilemaps placed on top of each other, just has different Y offset value. Or I could just do it with 3D, and use Gridmap, making it much easier, but losing the art style of isometric 2D.