Jump to content

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


Recommended Posts

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 ;-)

Link to post
Share on other sites

    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()

}

 

Link to post
Share on other sites
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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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);
}

 

Link to post
Share on other sites

@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)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...