how to use sort for Group

[yyman001]

thanks you ~ How to use sort for Group, look this code,i use homepage demo code for my code,but it not to work...i don't understand。

//this demo for pixi.js homepage 
var greenGroup = new PIXI.display.Group(0, true);
greenGroup.on('sort', function (sprite) {
  //no work,sprite.zIndex is diy arrt
  sprite.zOrder = sprite.zIndex;
});

when i fix sprite.zIndex,sortfunction will auto run ? or i must be to run Group.sort() ？ this render who Container?? new PIXI.display.Stage() ornew Container()?

[ivanpopelyshev]

make sure that pixi-layers works properly:

//global, for every stage, for every level, just global variables :) 
//You dont have to re-create them if you change level stage or whatever.
//groups are GLOBAL
var group1 = new PIXI.display.Group(0, false);
var group2 = new PIXI.display.Group(1, false);

//for current stage.
var layer1 = new PIXI.display.Layer(group1);
var layer2 = new PIXI.display.Layer(group2);
app.stage = new PIXI.display.Stage();
app.stage.addChild(layer1);
app.stage.addChild(layer2);

numbers 0,1 dont mean anything in current implementation. layer1 is the bottom one because we've added it first, and layer2 is the top because its second in the stage. Its natural pixi rendering order, there's nothing special yet.

For any element of the stage, you can specify if it needs to be rendered inside one of layers:

var stuff = new PIXI.Sprite(...);
app.stage.addChild(stuff); //renders after both layers
stuff.parentGroup = group1; //now it renders inside layer1, because its the layer in the stage corresponding to group1.

Stage update is called automagically from the Application, but if you dont use Application, please call it manually.

app.stage.updateStage();

To check if it works, please look at "layer1._sortedChildren" after render operation

If you enable sorting in the group, all elements will be sorted by zIndex asc and then by zOrder desc. You can use any of those props.

on('sort') happens before sorting, just to set zIndex or zOrder that you want to sort by.

[ivanpopelyshev]

Please make a fiddle if something is not working.

Alternatively, you can try to make it work, spend several hours, and if its not working, then give me link to website, and then, when I have free time, I'll help you. After new year eve :)

[yyman001]

@ivanpopelyshev thank you, I try it ,it working. I use vue.js for the components dev,i don't how to import it from ES6,and i use it look like,i copy code for my vue components,it work. why oZindex more min this layer more tall, more big this layer more small,That's strange