Pixi v5 and sort/zordering

[dskzz]

Hi, been struggling with this problem - all the tut's I see online and all the helper libs I see are all for pixi v 4, so how would I go about ordering my sprites so that walls cover tiles, the characters cover walls to their left and not to their right, etc....basically the whole occlusion thing.

I've seen this: 

container.children.sort(function(a,b) {
                a.y = a.y || 0 ;
                b.y = b.y || 0;
                return a.y - b.y;
            });

And other varients.  But that only kind of works.    It works in some cases.  But fails in other cases.  Attached example png.  What kills me is that another dev built this same thing in a version 3ish and it does work out of the box, but now having upgraded to 5 I get all these clipping issues.  

I tried to manually force to the top some of these which led me down a z-order hell of having to basically z-order every item in my scene.  Am I missing something here?  

I know your a very active dev, I appreciate it.   

 

[ivan.popelyshev]

Its a very big problem, once I consulted @Velith several days on it.

Basically, all your objects need anchor (0.5, 1.0) , and then.. magic. Huge amount of magic. I have special algo that i didnt publish yet that solves such cases but its not wrapped for newbies use, its only for people who already implemented something like it.

[ivan.popelyshev]

If it worked in pixi-v3 and doesnt work in v5, I have to ask - is this the same code? OR did he use "pixi-display" for v3 that doesnt exist for v5 yet?

Its the first thread regarding new v5 zIndex feature so please provide more information, we have no examples about it, there's no collection of user cases that I can use my telepathy on.

[Exca]

Basically the problem comes from a case where you have objects that should be behind one layer and in front of another. One way to solve this would be to split the sprites into multiple textures that have a minimal change in sorting areas. Another one would be to have sorting done so that instead of sorting whole container as is you would have multiple overlapping regions (with zindex this is much easier now than before). which would calculate the sorting inside a single limited region.

I have done one isometric project with the trivial kind of sorting (that you already have). The way you could get good results with that is to determine anchor (or pivot) points for all of your assets and then sort with y-coordinates. That will cause some cases where overlapping still happens though. For example if a person is standing behind a wall on the left and another one is above the first character on right.

I can do an example picture of the more dynamic sorting idea later today.

[Exca]

On the left is the simple method. Sort based on y-coordinate and offset by anchors / pivots. This is basically what you have but your anchors are all on default 0,0. The image shows the classic issue with that method.

One way to make it better would be to define a simple shape (yellow lines) that determines where the objects sorting point is at that position. After that you could do a simple line check algorithm where you cast a ray from top and see what line is hit first. That is the object that should be on back, next one on top of that and so on. Do this for all regions and each of your object should have somekind of sorting value attached to them. For left green in the image it's 0, for blue wall it's 1+0+0+0 = 1, for right green it's 1+1=2. So your sorting would be 0,1,2. You would also most likely require some weights on the points, as if one region would have a hundred objects then the items in that would get much larger weight.

 

[themoonrat]

I'd also say, in v5, to get the zIndex property to work, you need to set `PIXI.settings.SORTABLE_CHILDREN=true` before creating your renderer. Now the libs will automatically sorted by zIndex value on each update. But how you get those zIndex values is left up to you; I would write code that rather than does your own sorting, seeing if you could write a function that updates each objects zIndex and then see if the v5 sorting can handle it from there.

Otherwise, Exca's post above is better than anything I could write on the subject!

[b10b]

And for every illusion there's always new angles to consider ...

Iirc there is a solution for this involving scenery being broken into top, bottom, front, back (or vertical columns?) ... but perhaps at that point moving away from pseudo 3D to mesh or voxel geometry might be simpler?  I keep telling myself that.

[ivan.popelyshev]

i have a complex thing that cuts sprites to solve that, but I didnt upload it because  im lazy. Need to dig it out and port to v4-v5.. huh.. so many things to do.