(Not Your Standard) Isometric Z-Order Issue

Hey team! Got what I believe is a bit of an advanced issue with z-order and an isometric-ish perspective.

<img src="http://i.imgur.com/KeSULBoh.png" border="0">

So! In this image there are 11 sprites on-screen. Ten pretty-colored boxes, and one smaller black box. They're aligned based on their Y position. Pretty standard.

<img src="http://i.imgur.com/dJ8Vc1G.png" border="0">

Note: the only other four events are the ones that give the black box movement with WASD.

The issue is that from this perspective, the black box should layer behind or in font of one of the colored boxes based on whether it's on the colored box's left or right side. Case in point:

<img src="http://i.imgur.com/KeSULBoh.png" border="0">

<img src="http://i.imgur.com/4CscM87h.png" border="0">

The bottom boxes have their origin placed at their bottom-back-left corner while the top boxes have their origin placed at their bottom-FRONT-left corner. So, the black box layers fine when to the left of a bottom box, but not to the right. The black box layers fine when to the right of a top box, but not to the left. It's fine when either directly above or below either set of boxes.

<img src="http://i.imgur.com/KeSULBoh.png" border="0">

<img src="http://i.imgur.com/qKadWzBh.png" border="0">

<img src="http://i.imgur.com/AkCD5Vlh.png" border="0">

<img src="http://i.imgur.com/4CscM87h.png" border="0">

You can mess around with the file here.

So! What I need to do is create some events that essentially say the following:

(1) When two objects from the Sprites Family are overlapping, compare the X position of SpriteA to SpriteB.

(2) If SpriteA is to the left of SpriteB, move SpriteA in front of SpriteB if SpriteA's Y position is greater than SpriteB's bottom-back-left corner, else move SpriteA behind SpriteB.

(3) If SpriteA's Y position is greater than SpriteB's bottom-FRONT-left corner, move SpriteA in front of SpriteB, else move SpriteA behind SpriteB.

This is hard to do, as I need to pick specific sprites from the same family and differentiate between them. I think the key may be in the system condition "Pick nth instance", but so far I haven't had any luck.

I'm pretty sure that this is possible! I could just use some helping cracking the puzzle. :) Anything and everything is appreciated!

For that type of isometric you can still use "for each ordered" depending on what features you want to have. Using for each gives absolute sorting whereas comparing one object to another is relative sorting, which can prove to be more complicated.

Here is an example with the simplification of everything being on a ground level. I put the hotspot on the bottom-right-front corner of the box. You should have consistency for where the hotspot is placed otherwise it can become very complicated indeed. Next do some measurements on your box, particularly just measure the top face of the box. I measured it as 308x108. Put the player and box in a family and now we can make the "for each ordered expression".

For that I used the formula of a line:

y-y0 = m *(x-x0)

The idea I came up with is from that formula is as follows.

<img src="https://dl.dropboxusercontent.com/u/5426011/examples20/iso_idea.png" border="0">

Looking at a screenshot I drew a bold red line on each box from the bottom-left-back corner to the bottom-right-front corner. Notice they are all parallel. Next I extended lines to the left and I also made a line from the player using the same slope as the other lines. The y order of where the lines hit the left is the same order they can be sorted. So all that's left is to calculate where the lines will hit.

First we rework the formula to solve for y0 when x0 is 0. This is where the line meets the left.

y0=y-m*x

Then we can calculate m (or the slope) from the measurements. The definition of slope is rise/run or (change in y)/(change in x).

So...

m=108/308

and our formula is now:

y0=y-(108/308)*x

Finally make an event as follows:

For each Family1 ordered by Family1.Y-(108/308)*Family1.x ascendeing

--- Family1 move to top

Example capx:

https://dl.dropboxusercontent.com/u/5426011/examples20/iso_test.capx

Thanks, R0j0! That's very clever, and helps a lot! You mentioned that this works "when everything is on ground level". Obviously, Construct really is meant for two-dimensional games. But, in theory, if I wanted to have a sprite floating in mid-air (or, say, in mid-jump), I assume I would need a Z coordinate and a quadratic equation instead of a linear equation?

Finally make an event as follows:

For each Family1 ordered by Family1.Y-(108/308)*Family1.x ascendeing

--- Family1 move to top

Example capx:

https://dl.dropboxusercontent.com/u/5426011/examples20/iso_test.capx

Additionally, to R0j0hound or anyone else out there, I was attempting to solve the issue by picking the correct sprites when two sprites overlap.

<img src="http://i.imgur.com/nhjnuNu.png" border="0">

Obviously, this wasn't quite working. :P I'm pretty sure I understand what the problems are, but don't know how to go about fixing them. Does anyone have any tips on how to make this approach work, if I wanted to go down this route? Figuring this out would help me figure out a related issue, even if I go with R0j0's awesome suggestion.

Instead of using "sprites is overlapping sprites" create another family of the same objects, then you can use "sprites is overlapping sprites2" and you can clearly pick one or the other.

You can fake an isometric jump by leaving your movment stuff on your black box, then adding a sprite that follows above it. When the player jump, you simply increase the Y value of where it lands to appear as if its up on a higher level. So once they go up a step, they would be jumping starting from 10, instead of zero for example. The movement sprite always stays on the ground though.

R0J0hound - Couldnt you also just calculate the z order by placing a image point in the upper left corner of the box and sort using that?

For each Family1 ordered by Family1.ImagePointY(1) ascendeing

--- Family1 move to top

R0J0hound - Couldnt you also just calculate the z order by placing a image point in the upper left corner of the box and sort using that?

For each Family1 ordered by Family1.ImagePointY(1) ascendeing

--- Family1 move to top

Test it and see. The bottom right box doesn't get sorted correctly right off the bat.