Z-Order Place In Front of Another Object

On the topic of Z-order, it can be very difficult in HTML 5 to accurately control Z-order due to the fact that Z-Order is affected by object hierarchy and container context as well. Not that it isn't something that the Scirra Folks can't get around, just saying it may be a bit more difficult than it was in CC.

Even if you set the Z-Order priority for objects, they can be effected by their containers context as well as things like transparency settings... it may seem odd, but there are some seemingly wacky things that can throw off z-order in HTML 5.

— I was thinking of something similar, but splitting all my objects between the two layers where the base or ground touch portion of each object lives on the lower level and has as solid behavior, then the upper portion of each sprite lives on the upper layer where my player can just walk behind it.

Is there any performance hit for your method of swapping the layers for the sprite? Would it not work just to have all of the objects on the layer above the player, and just set a tile on the lower layer to solid that matches up to the bottom portion of the object? For example have the tree be on the layer above, but on the lower layer have an invisible tile that matches up with the location of teh base of the tree and set it to solid? Then you would not need to do any switching.

BluePhaze

Splitting the images up into two I'm not sure but I think might cause more of a delay, even by a millionth of a second. Although I'm not sure. My thoughts are two seperate images need to be rendered in the engine before they can be stamped onto the canvas. Where what I'm doing is this:

<img src="https://dl.dropbox.com/u/77974757/overlay.PNG" border="0" />

The red and green are each one image that are placed over each sprite. So it renders once before stamping over each image is what I'm assuming. Red is the collision sprite. So its set to solid versus the actual building. Then its a matter of checking for collision with the green image.

<img src="https://dl.dropbox.com/u/77974757/zorder.PNG" border="0" />

Everyone I've had test it so far has told me the movement is fluid with no to little stuttering.

Awesome, thanks! I was just wondering, if all the items that the player can go behind are on a layer above the player, then all you need is to make all red sprites solid, and you can get rid of the green ones right? THe player will stop when they hit the red sprite, if they move to where they will be hitting the green they will pass behind the image.

Sorry if I am dragging this out, I am just looking at a way to do it without swapping objects on layers to save a bit or resources.

BluePhaze

The problem there is with the building above. Placing it always a layer above my player will mean that it will still show below the building, like he dug a hole and started crawling under the building. By placing the building below the player then by default he can walk in front of a building and show up like he is standing in front if it. Then if the player walks into the green the building flips to the layer above so he is then showing behind the building. If that make sense?

I sure do hope that C2 will be capable of some sort of further Z ordering manipulation.. :)

That makes perfect sense, I did some testing and tried your method and mine. Mine can cause issues depending on certain scenarios. If I Split the sprite into two images, and make the bottom one solid, it works ok, but if you have larger sprites that are tall and you need to have them overlap when they are in front you get clipping or issues where the sprite is on top of the bottom of the object, but their head gets underneath the top portion of the object, which causes some real oddities. I think your method works great.

You should do a Tutorial on that as I think it would help a lot of folks especially those doing isometric view or event top down type of games.

Jase00 they would most likely have to use similar method to what was proposed in this thread. HTML 5 has it's own set of challenges when it comes to Z-Order of objects. Mainly because it can be affected by so many things including parent object, container object, even opacity can have an effect on Z-Order due to the way HTML 5 renders in the browser.

BluePhaze Yeah I guess so. Regardless of how it's done, I hope it comes about soon ^.^

It does make it a challenge to put together tiled games. I've got something sort of similar to what's been discussed in this thread at work in my current project, but it's one a more simple level. Since I'm using a square grid, I'm pondering making a layer for every level, and simply putting each Y level of my grid on it's own level. It's a moderately large grid, though (80x64) so I'm not sure how well Construct can handle that many layers and what kind of performance hit that will cause.

I want to add my voice to the people here. I shall say I am very surprised to find that a feature as basic as Z order placement is still missing in Construct 2.

The latest C2 update, r120, now has awesome Z-Ordering features!

Thank you x1,000,000 Ashley!