Isometric Games - Object Layer Ordering

Introduction

I recently started work on a new project, which began as an Orthographic game. However during the course of development, I decided I wanted it to be Isometric.

This posed numerous problems, the biggest of which is "How do I handle being able to dynamically move both in-front and behind objects?"

This tutorial aims to answer that question.

Brief Outline

Step 1: Multiple Layers

You will need to use multiple layers, 3 would work but I've used four.

Top Layer

Player Layer

Bottom Layer

Background Layer

The Background Layer is for things that will always be behind the player. This is stuff like the floor, and background colours.

The Player Layer is for the player, and nothing else (Side Note: Mobs aren't handled in this example, but would be simple to add, perhaps I will update this in the future to handle these)

The remaining two layers are dynamic, we will be moving the objects between these based on their position relative to the player.

Step 2: Origin Points

You will then need to assign every object that is part of being sorted (including the Player) a "YCompare" point. This point needs to mark the point at which the player is past the object. I use the bottom right corner.

The reason this works, is because in Isometric view, things further away are at the same scale. Which means the edge is straight up, and once you are higher than the point marked, you are passed the furthest edge of the object.

Step 3: Layer Decision

Now we get to the actual meat of the algorithm, the maths behind it.

Every tick we need to decide what layer each object belongs on, either In-front Layer or Behind Layer.

This is done by comparing the Y value of the Player, against the Y value of the YCompare point of the object. If the Player Y is higher, then the player is further down the screen so the object needs to be behind. And counter to that, if the Player Y is lower than the object the object goes in-front.

Step 4: Ordering

Once we have all of objects on the correct layer, we need to order the layer.

This simple means going through every object in ascending order based on the Y value, and bringing it to the front.

Again, this needs to happen every tick after the layer decision

Details

Step 1

In Construct 2, create four layers like so:

Place your player object on the Player Layer, and any floors on the Background Layer. We will handle all the walls and objects later.

Step 2

This is the bulk of the work behind this technique. You will need to go through each object and assign an origin point. Some trial and error will be needed, but start with the bottom right corner and tweak from there.

You will also need to make sure your objects have tight collision boundaries.

Things get tricky when you have to walk through objects, like doorways.

In this case you will need to split the object into two, and add the origin and collisions to each side.

The player will also need this, however the players collision is not the outline of the player. Instead it should map to the footprint of the player

These walls then need to be placed into the world. I recommend starting at the top left corner and working down. This is so you can see how it will end up, and also makes lining objects up easier.

Whether you do this on the Behind Layer or the In-front Layer is not important at this point.

Step 3

Place each of the objects into a family, this should contain every object you want to be able to switch between the In-front Layer and the Behind Layer. This allows for easy iteration over each object. You should also add a family behavior of Solid, and a family Boolean of Collision

Now we move to the Event Sheet side of this tutorial, I recommend using a separate Event Sheet for this mechanic, instead of including it in the levels event sheet. But that's just my personal preference.

Start with an Every Tick object, and under that a For Each in the family.

This For Each should be the Ordered option, with the expression being Sortables.ImagePointY("YCompare")

You will also want to add an Is On Screen check, this will optimise this algorithm HUGELY. And allow thousands of sortable objects.

You can then compare if the object's Y value is greater than the Players Y value. If that is the case, you need to move the object to the In-front Layer and disable the collision of the object.

After this you can use an else statement, and move the object to the Behind Layer if it is not overlapping the player.

Then before enabling collision, check is it meant to have collision?

Step 4

After all of this, you simply need to move this object to the top of the layer.

Because we are iterating through the objects in order based on the Y value, we know that each one we go through needs to be on top of the previous one.

Make sure this is INSIDE the loop.

Final

If this has all been done correctly, your code should look like this.

If you wish to see a fully working version of this, download my CapX.

Hope this tutorial helps out a little bit, and provides some guidance and inspiration on how to handle Isometric Display in your own games.