pixijs - drawing order/z-index (+using plugins)

[waechtertroll]

Is there any easy way to specify drawing order and/or the z-index of sprites in a Container? The order of adding elements seems to have no influence.

My basic problem is that my background image renders over _some_ of the foreground sprites.

I tried to use pixi-display.js, but I seem not to be able to import it correctly. I just created a <script> tag linking to pixi-display.js after the <script> tag that loads pixi.min.js (v4 from GitHub), but it keeps telling me "DisplayGroup is not a constructor" or "DisplayGroup is not a function". I thought using display lists and groups was a nice thing, but I'm open for a simple hack, too ;-)

[ivan.popelyshev]

Order is everything

Can you please try pixi.js and not .min version? pixi-display is here: https://github.com/gameofbombs/pixi-bin/tree/master/bin/plugins , I dont know how did you add it that way DisplayGroup is not a function

[slayr_io]

    stage.children.sort(function(a,b) {
        return a.position.y > b.position.y && a.position.x > b.position.x;
    });

 

thats what i do for a 3/4th perpective game... its not ideal because a container draws the sprites in the order of the array. So get as smart as you can about grouping sprites in containers and add the containers as children to parent containers and keep it consistent. just remember that removing and adding children changes order as well.

stage.addChild(background)

stage.addChild(tilemap)

stage.addChild(fighters)

...

animate(){

   fighters.children.sort(function(a,b) { //Sort the fighters on the battlefield maybe
        return a.position.y > b.position.y && a.position.x > b.position.x;
    });

renderer.render()

}

 

[ivan.popelyshev]

That is not a sort function. That one is:

stage.children.sort(function(a,b) {
  if (a.position.y > b.position.y) return 1;
  if (a.position.y < b.position.y) return -1;
  if (a.position.x > b.position.x) return 1;
  if (a.position.x < b.position.x) return -1;
  return 0;
}); 

 

[slayr_io]

7 minutes ago, ivan.popelyshev said:

That is not a sort function. That one is:

stage.children.sort(function(a,b) {
  if (a.position.y > b.position.y) return 1;
  if (a.position.y < b.position.y) return -1;
  if (a.position.x > b.position.x) return 1;
  if (a.position.x < b.position.x) return -1;
  return 0;
}); 

 

you are correct. haven't had my coffee yet

[waechtertroll]

Thanks,

using unminified script won't help; still DisplayGroup is not a Constructor and calling it directly it's undefined.

Oops... when I copied my html-code here I found I made some really embarassing mistake which I refuse to share with the forum.

 

I have a setup similar to:

var bgImage = myloader.getSprite("background-image");
var greatActor = myloader.getSprite("actor-image");
var stage = new PIXI.Container();
var bgLayer = new PIXI.DisplayGroup(-1, false);
var fgLayer = new PIXi.DisplayGroup(1, false);

stage.displayList = new PIXI.DisplayList();

bgImage.setDisplayGroup(bgLayer);
greatActor.setDisplayGroup(fgLayer);

and it works as expected. What's really nice about those displaygroups is, that I can clearly seperate planes.

[ivan.popelyshev]

Quote

var fgLayer = new PIXi.Displaygroup(1, false);

 

"g" instead of "G"

[ivan.popelyshev]

I'm sorry, buts its like "$ not found" while using jquery. Go investigate the issue, look inside pixi-display.js and debug it

[waechtertroll]

Yes, there is (was, just edited and fixed) a typo in the example code. The error importing of your library was completely my fault, I had accidently renamed it (wish the console would just tell me it couldn't find a script...).

In fact you're both right, the order of adding items does matter. It's just that I initialise the elements in a dictionary, and dictionary keys are not neccessarily evaluated in the order they are typed (like "var"s being shifted around during runtime...).

I must say that I first found the concept of display groups very annoying until I tried it - it makes it a no-brainer to add items to different layers without having to care about visibility/occlusion. Great work!

My contribution to the sorting function, just to appear smart (first if right, up, or both):

function(a, b) {
   return (a.position.x + a.position.y) - (b.position.x + b.position.y);
}

 

[ivan.popelyshev]

@waechtertroll DisplayGroups are third iteration of my z-indices. They are doing EXACTLY what everyone does manually with containers, that's why they are cool, you just cant make it more efficient, unless you have some trump algorithm.

With that API I have ideas how is it possible to handle 10k static elements (walls, floor, ceiling) and a number of dynamic moving somewhere between them with changing z-index.

That sorting function is fine, its generalization is 

function(a, b) {
   return (a.position.x * nx + a.position.y * ny) - (b.position.x * nx + b.position.y * ny);
}

where (nx, ny) is normal. In your case its diagonal (1,1)