# Dynamic depth of sprites based on positions

**URL:** <https://phaser.discourse.group/t/dynamic-depth-of-sprites-based-on-positions/10624>\
**Category:** Phaser 3\
**Created:** [November 10, 2021, 10:46am UTC](https://phaser.discourse.group/t/dynamic-depth-of-sprites-based-on-positions/10624 "2021-11-10T10:46:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![arminimamovic99](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/arminimamovic99/32/5398_2.png) [@arminimamovic99](https://phaser.discourse.group/u/arminimamovic99)\
**Post date:** [November 10, 2021, 10:46am UTC](https://phaser.discourse.group/t/dynamic-depth-of-sprites-based-on-positions/10624/1 "2021-11-10T10:46:59Z")

</div>

I need to change depth (z-index) of sprites based on their positions.  
In my game I have a flying ‘character’ sprite and hedges which are obstacles.

When my character sprite flies above the hedge sprite and then comes down and overlaps with it, it needs to be behind the hedge. However, if the character sprite is lower than the hedge and then comes up and overlaps it, it needs to be over it, more precisely have a higher z-index/depth than the hedge.

Can someone please tell me is this possible?

See images below for more details.

 ![Screenshot 2021-11-10 at 11.42.19](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9ff59692bb6251ee46b9d089b305dbec0ec3ae0f.png)  
 ![Screenshot 2021-11-10 at 11.42.28](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4c0bd253210f6eaa9e8af2694e1bdb324082fc20.jpeg)

---

<div class="post-metadata">

**Author:** ![TreantBG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/treantbg/32/5836_2.png) [@TreantBG](https://phaser.discourse.group/u/TreantBG)\
**Post date:** [November 10, 2021, 3:13pm UTC](https://phaser.discourse.group/t/dynamic-depth-of-sprites-based-on-positions/10624/2 "2021-11-10T15:13:09Z")

</div>

Yeah update the depth of the sprite when you move it.  
When calling moving method also add something like sprite.setDepth(sprite.y)  
based on y axis

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 10, 2021, 3:46pm UTC](https://phaser.discourse.group/t/dynamic-depth-of-sprites-based-on-positions/10624/3 "2021-11-10T15:46:30Z")

</div>

[http://labs.phaser.io/edit.html?src=src/depth%20sorting/isometric%20map.js](http://labs.phaser.io/edit.html?src=src/depth%20sorting/isometric%20map.js)