Monday, March 3, 2014

The depth of the issue

Probably one of, if not the most tricky issues with isometric is ordering tiles and objects with depth so they appear correctly. Higher terrain or things like tree's and buildings should appear "over" anything behind it yet be behind anything in front of it otherwise you will start to get clipping of images, where some parts are behind or over images they shouldn't be.

I know, it seems complicated and with certain situations it can be, but in this blog post I will describe how I handle depth in the Isometric Engine. As I have described before the engine works from a top down perspective and merely draws stuff into an isometric view. This works in my favor in many ways but does have a draw back or two x).

The entire engines works off the fact the tiles are positioned in a grid, as I have said and I take advantage of this when dealing with each tiles depth and the depth of anything on that tile.


With this code, the farther up and to the left a tile is the "further" away in the isometric projection it will be depth wise. So for the engine all the tiles positions define the baseline depth for that tile space. What do I mean by baseline? Well each tile has a depth, that we established, but what if we wanted to put a enemy on that tile? That enemy will need a new depth that is at a lower or "closer" depth to appear above that tile so we would need our tiles position or depth and adjust the enemies according to that.

What if we wanted to place grass on that tile as well? it would need to appear above the tile but be over the enemy? We can repeat what we did for the enemy and just add a little more to make it appear at the right depth. That seems to work real well, but if your messing with isometric you know at some point your going to start having things at the next tiles depth causing graphic bugs if something was to pass near that tile and anything on it. What is our limit then? It's the vertical size of our tiles of course!

As I described in the last post, the tiles origin is up and to the left which is the point it is drawn and also the position where we grab the tiles depth. For our example tile of 64x32, we have 32 pixels to go before we enter a new tile. So we have 32 levels of depth that which as long as anything is within the range of our tiles depth and 32 from there, they will appear correctly on the map without you having to do any fancy tricks to prevent layering issues. Here is a picture to help visualize this:

What this allows me to do in the isometric engine for example is set the tiles depth just a few more then the baseline for that position on the grid. I can then put terrain shadows as a layer under each tile adding much needed shadowing to help with the one flaw isometric perspective has and that's the fact things in the background do not get smaller so under certain circumstances objects and tiles feel like they are at different places on the map. I can also then draw a tile, draw a texture for the top of the tile, draw any effects for that tile, then draw enemies, players, tree's, any object really. I can first actually draw shadows on the tile for any of the given examples (players/tree's/etc..) then draw them, then draw any effects like grass over a players feet or magical effects to appear above the character but below grass or any tile effects you may have.

What about the tile's Height?
Well in the engine you can adjust the tile up or down giving it a perceived height value. For Game Maker: Studio that means I need to adjust the tiles Y position, but it will not mess up the tiles depth for several reasons. You can move tiles around and they stay at there designated depth as the depth is set once and doesn't change unless you manually tell it to, but I don't need to worry about the tiles position or it messing with that tiles depth. I use the grid and the size of the cells to find tiles, everything is bound to this grid and it's size. This makes finding tiles and even there depth very fast and super efficient as I do not need to look though all the tiles to find the right one. I can just look at the spot on the grid I am wanting and grab it without a for loop. For example in the engine if I want to know the tile I am standing on, I simply get my position in the grid, extrapolate that out to isometric perspective and because the tiles depth is based on the same position I am on, I have both the tiles position and depth quickly/efficiently and I didn't need to loop through tiles to find it.

So what about that height? Well as a tile get's higher we know the tile needs to appear above anything in behind it but still appear behind those in front of it. We can actually just keep the tiles depth what it would currently be. For a map that only has a single layer of tiles we only need the height of a tile to ensure any object or effect we place on it is drawn at the appropriate position in the isometric view.

The issue comes up is when we have multiple tiles occupying at the same cell in the grid but I already discussed this in my "Layering the world" post, where I introduce layers as a fix and maintaining the tiles depth based on position like before, but including the layer and height this time and ensuring the rule stands on how we adjust our depth as it must lie within our given tiles range you can have a tile at layer 2 still appear at the correct depth behind a layer 1 tile that has been adjusted up in height. Even tiles or objects that are taller then the cubed size of our tile ( that's what our isometric tile would be if it was a cube for example our 64x32 tile would be 64x64 as I described in that last post ) will still appear in the correct depth but only up to a certain point. Because we would factor in the layer and height in all tiles now, there is a point where the tiles and anything on those tiles would not be in correct depth. This so far, is caused when you have a low layered tile's height really tall compared to other tiles of a higher layer at the same height. So we just need to create/edit the tile and increase it's layer up and that's it, but if you keep this in mind when making the map you won't have any issues.

I will go into more detail later involving workarounds for things larger then a several tiles and much taller and the issues with certain aspects of the engine and how to deal with those, but for now I think this post is way longer then I intended it to be. 

Thanks for reading! Please follow and don't forget once again to comment with suggestions/opinions on the engine or my blogging as I am new to it...very new... 


  1. Would we be able to make actual games with this engine, not just maps?

  2. Yes, the whole point of the engine is to make it easier for anyone wanting to make an isometric game. With scripts and all the math needed already done, right now you could put any object in the engine put 2-3 scripts in the object and it work isometrically, both in movement and depth.

    That I hope, will be super cool to many users but even with this "making" the maps is a challenge in itself. Game Maker's room editor isn't all that functional to be honest and trying to make your own map editor in someone else's engine is a daunting task usually.

    So the engine will come with A): All or most of the scripts you would need to make an isometric engine as far as handling the tiles, objects and keeping depth correct. B): A map editor to easily make maps the engine can load and use. The Map editor will let you set custom positions and properties for the map that you could easily read from the map save and incorporate into your game.