How to sort Z depth of sprites using a custom Z value?

[ddabrahim]

Hi.

I'm new to Phaser and would like to ask for some help with sorting Z depth of sprites using a custom Z value.

I know the same question have been asked a million times on the forum but in most case the replies are link to examples and tutorials that explains only that we need to add our sprites to a group and use the sort() method to get the sprites Z depth sorted. I understand that, but I'm really would like to use a custom Z values to sort my sprites.

What I'm trying to do, after added all my sprites to a group, I loop through all the children in the group and set their Z value manually, after run the sort() method on the group and I was hoping it is going to sort the Z depth but it does not. This is my code:

create: function(){

    for(var i = 0; i <= 50; i++){

          group.children[i].z = 100;

    }

    for(var i = 51; i <= 100; i++){

          group.children[i].z = 120;

    }

},

update: function(){

    group.sort(Phaser.Group.SORT_ASCENDING);

}

According to the documentation, If my understanding is correct, the sort() method should use the Z value of each children by default to sort the rendering order. But it is not the case. What seems to happening instead,  it override the Z values of the children with their index value. For example, as you can see in my code I set the z value of children[5] to be 100, but what the sort() method seem to be doing is replace 100 with the index number which is 5. If I check the value of Z it return 5 and not 100. If I don't run group.sort() it solves the problem, if I check the value it returns 100 as I would expect, but it does not seem to sort the rendering order without running the sort() method on the group.

In most game engines I have been using, there was a very simple, straight forward way to get this done. Normally, all need to be done is set the Z-Depth value but it seem to be not that simple in Phaser. Am I missing something? According to the documentation I think my code should work but it doesn't.

I would appreciate any help.

Thank you.

[samme]

I'm not sure you can modify the z values directly.

I think you have to either use the Group#move* methods or manipulate Group#children and then call Group#updateZ.

[ddabrahim]

Thank you for the reply.

I tried calling updateZ on the group but didn't work, I get the same results. I tried simply just using group.updateZ() and also passing the children as argument group.updateZ(group.children[index].z). Also tried in both the create and the update function. No effect.

I'm also note sure how to use the move methods. If I have 4 sprites and I want the rendering order ascending, should I call moveUp() 2 times for the 2nd sprite and 3 times for the 3rd one?

According to the documentation I should be able to change the Z directly. Many people mentioning on the forum it is not possible in Phaser, but I don't understand why is it not possible when the documentation suggest otherwise.

By using group.children[index].z we can change the value of Z directly. It is there, it works

By calling group.updateZ() we can update the Z values with new ones, not sure why is it necessary and it doesn't seem to have any effect anyway. Not sure how to use it.

By calling group.sort(), according to the documentation we sort the rendering order using the Z value by default but we can change that by passing a new key like 'y' for example to use the value of Y to sort the order but I want exactly what it does by default. Sort the rendering order using the value of Z. But it doesn't work because it is override the value of Z. Also the sort() method is recommended to be used as the very last thing in the update function. I would imagine that is because in case we change the value it get updated at the end of the update. Everything suggest at some point, it was possible in Phaser even if it not any more for some reason. For example, I'm not sure why the sort() method overriding the Z value instead of using the value.

Well, I was looking at some Phaser 3 examples yesterday to see if it going to improve and seems like we are going to be able to change in Phaser 3 the Z Depth directly by doing sprite.depth = value and sprite.zDepth = value (seen both in different examples). I believe Phaser 3 is about to release next Monday on the 12th of February, I hope it is going to be "improved"

In Phaser 2 it feels way overcomplicated

 

[samme]

 

7 hours ago, ddabrahim said:

According to the documentation I should be able to change the Z directly. Many people mentioning on the forum it is not possible in Phaser, but I don't understand why is it not possible when the documentation suggest otherwise.

No. https://photonstorm.github.io/phaser-ce/Phaser.Component.Core.html#z

Quote

<readonly> z : number

The z depth of this Game Object within its parent Group. No two objects in a Group can have the same z value. This value is adjusted automatically whenever the Group hierarchy changes. If you wish to re-order the layering of a Game Object then see methods like Group.moveUp or Group.bringToTop.

You could do it like this, but maybe you just want to use two groups instead.

Phaser.Sprite.prototype.depth = 0;

create: function () {
    
    for (var i = 0; i <= 50; i++) {
        group.children[i].depth = 100;
    }

    for (var i = 51; i <= 100; i++) {
        group.children[i].depth = 120;
    }

},

update: function(){

    group.sort('depth', Phaser.Group.SORT_ASCENDING);

}

 

[ddabrahim]

Thank you for the links and the tip. I'm appreciate it.