Search the Community

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.