Smart Isometric Maps Using YSort | Godot Tutorial 3.2

In this Godot tutorial, you will learn fundamental knowledge on how to create interactive isometric maps using YSort in Godot 3.2. YSort will help you to draw all map elements in the correct order to create the pseudo 3d feel that isometric is after.
00:00 Intro
02:48 Introduction to YSort Node
03:24 Making the First Prop
04:52 Setting up your Prop for YSort
07:58 Setting up your Props in the Game World
08:24 Adding Collision Shapes to Work with YSort
13:24 Nesting YSort nodes into another YSort
16:00 Scenes Examples and Tips
19:25 Placing Props Quickly and Tips
21:52 Options that Open Up When Using Props
In the last tutorial on Isometric Maps, we create a TileSet and TileMap. This tileset system, combined with the tileset editor is very powerful in Godot. However, it has its limitation and those limitations are very clear in isometric maps. YSort is one of the most powerful 2d nodes in Godot. It will help you draw your art on the fly, creating a world in which projectiles, bullets, enemies and players can walk, run and fly behind and in front of walls, barrels, closets, and more.
Link to the last Godot TileMap Tutorial
• How to Make an Isometr...
⬧⬧⬧⬧⬧ GDC TUTORIALS ⬧⬧⬧⬧⬧
I believe educational material should be available to all, for free
Support this vision by joining the GDC-Club and get perks in return
/ gamedevelopmentcenter
/ gamedevelopmentcenter
⬧⬧⬧⬧⬧ LEARN MORE GAMEDEV ⬧⬧⬧⬧⬧
These books have helped me in my game design and programming, I whole fully recommend them to you!
Level Up! The Guide to Great Video Game Design ►► amzn.to/3hIg6dE
Game Programming Patterns ►► amzn.to/35IoDsH
The Art of Game Design: A Book of Lenses ►► amzn.to/35MSHoU
⬧⬧⬧⬧⬧ LIVESTREAMS ⬧⬧⬧⬧⬧
I Livestream game development twice a week right here on KZbin.
Subscribe and hit that Bell Icon to make sure you don't miss it!
kzbin.info...
Tuesday and Thursday
1900 to 2200 (GMT+1/2 (winter/summertime), that's;
1200 to 1500 (PST), or
1500 to 1800 (EST).
⬧⬧⬧⬧⬧ COMMUNITY & SOCIAL ⬧⬧⬧⬧⬧
Join the community! Follow me on Social!
DISCORD ►► / discord
TWITTER ►► / gamedevstefan
⬧⬧⬧⬧⬧ ABOUT GDC ⬧⬧⬧⬧⬧
GDC, Game Development Center, was created to provide in-depth tutorials on game design theory and game development using the Godot Game Engine. I aim for multi-part Godot tutorials, allowing me to dive deeper into Godot's features.
⬧⬧⬧⬧⬧ ASSETS USED ⬧⬧⬧⬧⬧
www.kenney.nl/assets?s=isometric
⬧⬧⬧⬧⬧ DISCLAIMER ⬧⬧⬧⬧⬧
Some of these links go to one of my websites and some are affiliate links where I'll earn a small commission if you make a purchase at no additional cost or disadvantage to you. You will receive the same price and service.

[@GameDevelopmentCenter]

Do you believe that Godot education should be free? Me too! You will never find me on Udemy, Mavenseed, or Gumroad. Support these tutorials in any way you believe is appropriate; like, comment, subscribe or become a member of the GDC Club, thank you! kzbin.infojoin

[@RiffSharkMusic]

I had another solution: I set cell size of tilemap to be as small as players base and then split long tiles so they match tilemaps cell size and tweak texture y offset so that when your draw with new wall tiles you get coherent wall. So basically your tiles base should be square

[@sahilnare5005]

Great video! The explanation was really easy to understand.

[@andreashellstrom5314]

This was just great. Excatly what I needed, I was struggling with putting trees in my tilemap. But after seeing your video, I have now a whole forest in my tilemap, with perfect layering without messing with z-indices and needing separate tilemap layers for each tree. And the player character is drawn in front of the tree trunks and behind the tree tops. Thank you very much!

[@GameDevelopmentCenter]

Awesome :) Glad the video helped :)

[@robertoaguiar6230]

Awesome! I'll be following your work

[@MolinRJ]

I've just found your channel and what a pefection! Your tutorials are very concise but very deep in knowledge too. Thank you for helping the community.

[@GameDevelopmentCenter]

Thank you Molima, glad to hear that the results I aim for are experienced by viewers :) Spread the word :)

[@alphacat4927]

I concoure .............. I think that means agree.

[@florentv]

Very interesting video. I was actually considering using TileMaps for walls (originally started with props!) and started looking at your videos; now I'm convinced to use TileMaps for floors only :) Another advantage I see with props, is that it gets really easy to make walls semi-transparent when a character goes behind them for example (typical in a lot of isometric RPGs). Seems more difficult to do with TileMaps.

[@GameDevelopmentCenter]

I'm hoping the new tile system in Godot4.0 that comes out later this year will bring such functionality back to the tileset. For now this seems to be the quickest and most versatile way :)

[@gabrielsilvapassos2239]

Thanks from brazil. You are the man!

[@GameDevelopmentCenter]

Happy to help!

[@phantasmagoria8228]

Great tips!

[@GameDevelopmentCenter]

Thx Phantasmagoria! Now on to the next one :)

[@ptc1997]

Very helpful, Thank you.

[@GameDevelopmentCenter]

My pleasure :)

[@masterroyale0376]

Its so useful, THANKS!

[@GameDevelopmentCenter]

My pleasure :)

[@masterroyale0376]

@@GameDevelopmentCenter Just :D

[@Rubafix989]

Random comment to boost engagement. keep it up

[@GameDevelopmentCenter]

Thx Rubafix! :D :)

[@gordrik1591]

These tips are really great! I had lots of troubles with isometric walls on my last project. Too bad sorting on tilemaps isn't viable for this yet, and building world with separate props is such a pain

[@GameDevelopmentCenter]

If you take the time, it is technically possible with tilemaps, but it requires a lot of patience, meditation and possibly a new computer when you threw the first one out of the window from frustration 🤣

[@gordrik1591]

@@GameDevelopmentCenter I also found a solution for longer isometric props. Developer of this solution used average of 2 points to decide what to draw first, I can't really imagine how to achieve this in Godot

[@ernstpalfi4117]

very helpful! Thanks!!!

[@GameDevelopmentCenter]

My pleasure! :)

[@LifeofAndre]

You are amazing! Just started with the godot engine and this channel is all I need. Good explanation of every thing and very professional, yet simple to understand. Cheers from Sweden. This is what the godot community needs

[@GameDevelopmentCenter]

Thx LifeofAndre! Glad to hear you are finding what you are looking for :)

[@jtlong2248]

Great information explained in a concise way, nice work!

[@GameDevelopmentCenter]

Thx jtlong! Hope it helps you build some beautiful maps!

[@harshadsaykhedkar1515]

As of Godot 3.4, another option worth exploring here is: you can put a tilemap inside a YSort. But to do that, there's a YSort option on the tilemap itself which you must turn on, else it won't work correctly. I'm suspecting that is a better option than adding so many scenes. The scene instead of tilemap route is better for interactivity though.

[@GameDevelopmentCenter]

Not sure if this works differently in Godot 3.4 than it did before. But adding a tilemap to a Ysort doesn't do much. A tilemap only has a single coordinate. The function of y-sort in the tilemap itself is to make the tilemap function like a ysort container by ysorting the children nodes of tilemap.

[@dukemc8351]

thanks man

[@PatrickPasques]

Your tutorials are so great ! Thank you !

[@GameDevelopmentCenter]

Thank you Patrick! Glad you enjoy them :)

[@ronaldpikksaar2202]

Instead of messing with the collision shape, cut the sword cabinet in half and put them back together on the map. U can use even autotile for that.

[@bsavage5128]

I'm not sure if i should be using layered tilemaps or Ysort nodes for my game? I need the player to walk in front of and behind objects. Should I be setting them up in tilemaps or should I be saving the objects as a scene to instance?

[@ronaldpikksaar2202]

@@bsavage5128 I know I would be using Y-sort. Wasn't this whole tutorial precisely about that?

[@bsavage5128]

​@@ronaldpikksaar2202 I have a unique situation where the assets I'm using are "2.5D" but NOT isometric. They are designed as tile maps to be used in an engine that only supports forward facing top down. They are drawn based on 48x48 grid squares but some assets are 2 grid squares tall (including diagonal 45 pieces) creating the same illusion as an isometric game (confusing, I know). Its much easier to just import them as tile maps as thats how they are arranged but I believe the Ysort would be less problematic down the road.

[@ronaldpikksaar2202]

@@bsavage5128 No, that's not confusing at all. Before real isometric (dimetric actually, but anyway) they faked it. It explains why you have this dilemma now. Unfortunately I can't give you any advice then. I suppose it doesn't really matter. Whatever you are more comfortable with 😊

[@bsavage5128]

@@ronaldpikksaar2202 At least you understand my situation! Most people have no idea what I'm talking about 😅

[@themis12345678912345]

First of all, thank you for all your videos. They are great and very helpful. So, I'm currently working on a simple RPG isometric game and I've just learned about y-sort from this video. Actually, it was something I haven't thought about yet. The problem now is that I've already created many different environments using tilemaps. These tilemaps consist of many objects that need to be sorted. So, is there any easier way of sorting these objects? It seems a lot of effort to make a different scene of each object and create the environments again from the beginning using the method in the video. It would be like deleting all my previous work. Thank you, in advance.

[@GameDevelopmentCenter]

Maybe the ysorting has improved in recent version, this tutorial is a couple years old after all.

[@cordelldev]

Quality tutorial, thank you!

[@TandG1000]

Very helpful, thank you. Right now i am working on a game that has a few objects that are much longer than wide so even if i follow your tip of positioning the axis on the furthest corner the player will still render above the prop where it shouldnt. do i need to split my object into smaller sections or is there another way? I wish there was a way that you could define which side of the isometric prop is the front and back. thanks again for the help.

[@GameDevelopmentCenter]

Yeah, splitting it up is usually the way to go. Most isometric tileset with big decorative pieces come sliced out of the box.

[@FrVle]

I am 1/10th in and you have already helped me a lot. Def subscribing! I wish your channel success

[@GameDevelopmentCenter]

Thank you Francisco! Keep on coding ;)

[@iGeF]

I've tried to play with tiles alignment and Ysort, and I got what you mean - it's easier to use a StaticBody2d with Collision instead of Tilemap. But what about performance differences? Any info on that?

[@GameDevelopmentCenter]

There will be some loss of performance obviously, but you will win that back partially or even fully when you start coding in interactions. It being seperate class allows for easy isolation. In a tilemap situation you would first have to isolate the tile from the tilemaptexture at runtime and make changes before putting it back in.

[@iherbivore1]

How do you align the sprite and collision shape for the inside corner? The one that would be at the bottom-left part of the wall. With everything I try, the player ends up being drawn on the wrong side somewhere. I can't get it so the player is drawn on the correct side for all points in the corner.

[@GameDevelopmentCenter]

We could probably write a couple of long messages here, but this will likely go much faster with a screenshot or two. If you could join the discord we save both of us a lot of time :)

[@mulraf]

great channel and exactly what i was looking for. just one thing: i don't think you have any part in your series where you make the player, do you? i looked up another tutorial for that and what they do is adding collision layers to all the tiles. did you do that too? or is there some way to have the player walk on the floor without me having to draw collision layers around every single spirte i will ever be using? (edit: i've seen the tilemap collision tutorial, just wanna know if there is some way to have your player run on top of the floor on default)

[@GameDevelopmentCenter]

It is 2d, your character can't fall through. In my Player Movement series, you see me set up a character and various movement options (WASD, point-and-click). Hope that helps

[@mulraf]

@@GameDevelopmentCenter hm. maybe i did something wrong. the character has gravity and it basically looks like my map was just a painting in the background and my character just floats down across it. but i'll take a look into that video and what i did so far, thanks a lot

[@GameDevelopmentCenter]

@@mulraf If you can't figure it out, feel free to join the discord. Easier to share a screenshot and that will make the help I can give so much better :)

[@mulraf]

@@GameDevelopmentCenter okay, i've redone it from scratch and now it works as intended. don't know where i went wrong before but everythings fine now. thanks :)

[@GameDevelopmentCenter]

@@mulraf Awesome :)

[@cenullum]

Can you add also z sorting for jumping and height platforms in this system?

[@GameDevelopmentCenter]

There is no z axis, so you can't z-sort. You can control the order in which sprites are drawn though the z-index. A jumping animation is possible, but 2d isometric makes use of states for that. In the jumping state collision shapes behave differently. I will have to find some assets that would work with that. It is very much a trick of the brain. A good asset with the right animations is essential to demonstrate how to do it.

[@cenullum]

@@GameDevelopmentCenter kzbin.info/www/bejne/qZewn3Rmgp1rf6c I meant this. I wish you make a tutorial about this

[@zerogravity8862]

Can I change a camera view here, in other words, can I see back, or this the only angle ?

[@GameDevelopmentCenter]

This is technically possible but very complex. Normally the viewing angle is fixed in 2d games. 3d would be easier than being able to rotate 2d.

[@Janakanty]

TY from Poland!

[@rice_powder]

Hi, I wonder if the character is a 3D object, how should we make it work well in a 2D tile map like this? I am confused about how the character will go around the scene, and how it could go behind or in front of 2d tiles. Could you kindly share your suggestion?

[@GameDevelopmentCenter]

Make a 3d game or make a 2d game. Yes 3d in 2d is possible, but it seems to create much more headaches than it is worth.

[@Jhrickgamer]

is it possible to do jumping from a lower tile to a higher tile in 2D godot?

[@GameDevelopmentCenter]

It is, but I tend to advise 3d for those sorts of features

[@stryker4514]

I got a problem with the collision detection, instead of using a player model I used a column instead and marked out the collision at the base of the column. For the case, I modelled the collision box as you described, however even though I placed both props under the Y sort, the column isn't drawn behind the case when I move it behind the case. Do you have any idea why that is?

[@GameDevelopmentCenter]

This could be caused by your node order in the node tree. That order also has influence on the render order. See if you can find any deviations there :)

[@stryker4514]

@@GameDevelopmentCenter I checked through my node order and nothing seems to be out of place, I have a separate node keeping all the tilemaps in one place called environment and a general node that parents all other nodes called Game. I placed the ysort under the Game node and not the environment node but nothing changes.

[@GameDevelopmentCenter]

@@stryker4514 Did you work with z-indexes than maybe? From your explanation, I don't understand your node structure. If you want I can have a look at it on discord. A screenshot says a thousand words :)

[@stryker4514]

@@GameDevelopmentCenter okay, I sent the screenshot over on discord

[@GameDevelopmentCenter]

@@stryker4514 Solved on Discord :)

[@StarStormFireFall]

This doesn't seem to work with doorways unless you split the doorway into multiple assets

[@GameDevelopmentCenter]

That's why asset packs come with separate doors :)

[@nowayjosedaniel]

Doorways are usually split up. Check out Shadowrun Returns (or HongKong/Dragonfall) editor/sprites. They use 2D backgrounds and their door frames, like most, are split up, in addition to the door. So a "Door" is actually 3 sprites. An L-shaped half of the door frame, the pillar-shaped remaining half of the door frame, and the door itself.

[@SuperJJAlexander]

What if the gap at the lower corner is so big that you can't just enlarge the collider to fix the sorting problem?

[@GameDevelopmentCenter]

That is where it becomes a question of map design, performance and preference: 1) You could code it 2) You could add smaller objects to fill that gap (barrels, rocks, trees, crates, fences, etc), and circumvent the problem with map design (play a couple of old school RPG's and you will see this is used a lot!) 3) You could cut the prop up into 2 or multiple pieces. You would have to place them pixel perfect in their own scene (which is instanced), but ones you add them to the map they still function as a single prop. This will allow for more granular Y-sorting.

[@SuperJJAlexander]

@@GameDevelopmentCenter I am trying to create an isometric tile-based city builder. Some building could be 3x2 or 4x2 which would have with building which should be behind but would have a y coordinate that would make them be drawn in an incorrect order. Any other ideas that could work in my situation?

[@GameDevelopmentCenter]

@@SuperJJAlexander Option number 1 and 3 would work well for your situation

[@SuperJJAlexander]

@@GameDevelopmentCenter when you say "code it", do you mean that you can give Godot a custom order in which to render objects?

[@GameDevelopmentCenter]

@@SuperJJAlexander There are several ways you can do this, the easiest I would imagine is to look at the player relative position to the object and adjust render layers (Z-index), but cutting the image up is, in my opinion, faster, performance friendlier and less bug/glitch sensitive.

[@jRsqILVOY]

I was looking at how the original X-COM does isometric rendering, and in that case each tile is defined as a ground tile (32x16 with some empty space) and then optionally a west facing wall (top left), north facing wall (top right) and an item (the perspective is fixed). And tiles are drawn such that the bottom tiles draw over the ones above (i.e. the north facing wall can occlude the tile to the north). Would it be possible to implement something similar in Godot, so a tile object is like a struct of these things and rendered in that order? Maybe the different types of walls i.e. north facing etc.) could be on their own layers with y-sorting.

[@GameDevelopmentCenter]

Yeah, that is totally possible, you would have to define all the walls, all with their unique off-set. That reducing the availability in Godot to Atlas and Auto tiles, but that can be done. I personally, as I stated in this video, find it very cumbersome, and therefore, propose this alternative.

[@mczigger]

Good but, Walking behind walls is fine, you show this & mines work. Walking in front of walls glitchs between wall panels, never saw you walk in front of walls. So is this an issue?, or could I be doing something wrong?

[@GameDevelopmentCenter]

You probably transformed something for that glitches to appear. Could be the walls, the player, even the entire map scene

[@mczigger]

@@GameDevelopmentCenter The tiles in Kenny's isometric dungeon pack are not 256 x 128 like yours, It turns out that they are 256 x 512 (The tile is at the bottom with 128 worth of empty space above them). Because of this the sprite is at 0,0 but the collisionpoly has to be transformed by 128. So this is causing my problem it seems. Have I got the correct pack?. He only seems to have 1 dungeon pack & its missing loads that you have like the bookcases.

[@GameDevelopmentCenter]

@@mczigger I got the same pack, I believe. If you want me to have a look over your shoulder and help you a little faster. Feel free to join the discord, post a screenshot or a short video clip of the problem :)

[@mczigger]

@@GameDevelopmentCenter Thanks, you have been most helpful. I have edited the tiles and its all good. I'm now trawling through your other videos for more great help videos.

[@joostlandgraf1375]

Any chance of a combined tutorial of how to use the stonewall_gates /doors open/closed from that dungeon-tileset as props and walking through it properly? for some reason i cannot connect the dots :)

[@GameDevelopmentCenter]

Not any time soon as I'm focusing on my own projects right now :)

[@ceedeeFN88]

How do I make it so I can fall off the map?

[@GameDevelopmentCenter]

Check on movement if the tile there character stands on is an air tile or no-tile, block input, animation character down, flip character to be drawn behind tilemap.

[@ceedeeFN88]

@@GameDevelopmentCenter tried that, the detection to see if the player is on or not on the tiles is glitching.

[@uffaize]

Is this 2D?

[@GameDevelopmentCenter]

yes

[@mixschnack]

What the heck is a "prop"?

[@GameDevelopmentCenter]

Object, item, a thingy you put in the world. Don't worry about it, just language

[@MagnumPopeye]

Any where we can buy the asset template already setup. Would be great to not have to remake this from scratch. Have spent (years on and off ) a lot of time making a isometric game in game maker. But I am at a dead end on this software I'm still using. Game maker 8.1 since it worked great at what I needed but like I said it's just very dated.

[@GameDevelopmentCenter]

The assets I used should be in the video description. The map is something you will have to create. I don't keep a GitHub repository