waechtertroll Posted July 12, 2016 Share Posted July 12, 2016 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 ;-) Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 12, 2016 Share Posted July 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
slayr_io Posted July 12, 2016 Share Posted July 12, 2016 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() } flatliner 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 12, 2016 Share Posted July 12, 2016 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; }); Quote Link to comment Share on other sites More sharing options...
slayr_io Posted July 12, 2016 Share Posted July 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
waechtertroll Posted July 12, 2016 Author Share Posted July 12, 2016 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 12, 2016 Share Posted July 12, 2016 Quote var fgLayer = new PIXi.Displaygroup(1, false); "g" instead of "G" Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 12, 2016 Share Posted July 12, 2016 I'm sorry, buts its like "$ not found" while using jquery. Go investigate the issue, look inside pixi-display.js and debug it Quote Link to comment Share on other sites More sharing options...
waechtertroll Posted July 13, 2016 Author Share Posted July 13, 2016 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); } Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 13, 2016 Share Posted July 13, 2016 @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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.