Change depth (z-index) of sprites based on their position

Hey everyone. I’m trying to accomplish something in my game that I thought would be simple but has been driving me nuts for days.
image
In the image above, I have a player which I drag around the screen with my mouse. The green hedge is an obstacle, and the user needs to drag the player to the card with text in order to gain a point.
Now, if the player comes to the obstacle from ‘above it’ on the y axis, it should look like on the image above, the player goes behind the obstacle and can’t collect the word. However, if you then go around, and come to the obstacle from ‘under’ on the y axis, the z-index of the player sprite should be higher than the z-index of the obstacle sprite and the card.
Anyone has an idea on how to do it?

Have a look at this example:

There you can see that the “depth sorting” is managed by the “update” method for each skeleton.
the “depth” is calculated based on the y value of the skeletons.

so for your exmaple, u need to set the players depth and obstacles depth based on there y-values.
tricky is the “offset”. there u should use some value based on the object itself. the players “feets”-position should be the depth value for the player, the obstacles “trunk”-y should be depth for the obstacle.
so. basicaly for your example ( if u use origin 0.5 ) you should go with something like this:

players.depth = players.y + players.height/2;
obstacle.depth = obstacle.y + obstacle.height/2 - obstacle.yOffset; // yOffset can be some config-value based on each object )

:slight_smile:
Hope this helps u.

1 Like

Thank you my man, this helped tremendously. Got it working with your help and a little bit of creativity from myself :slight_smile: