These are chat archives for pixijs/pixi.js

6th
Jul 2017
Jos
@Rojoss
Jul 06 2017 09:18
Anyone using pixi-display in production? I'm noticing massive performance issues and I was wondering how people do sorting with a lot of display objects.
Always when I profile our game there's like 30% going to pixi-display stuff and most of the times even more making the game unplayable for older devices.
Yeling Shi
@shiyeling
Jul 06 2017 09:20
@Rojoss just our of curiosity. how many display objects are we talking about?
Jos
@Rojoss
Jul 06 2017 09:20
Not sure about the exact count I'll see if I can count that but I think like 50-100
Actually more like 100-150 I think
Yeling Shi
@shiyeling
Jul 06 2017 09:21
Shouldn't be a problem for pixijs to handle that many.
Jos
@Rojoss
Jul 06 2017 09:22
They all have display layers for z-index sorting. (using pixi-display) for that and that's causing the performance issues.
I also have some particle emitters and animation stuff but that shouldn't matter for the sorting right?
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:24
I wouldn't use pixi-display. It's too advanced (Going along with pixi.js lib), but lacks efficiency. It's best to use JavaScript sorting or something custom (Your own algorithm). That's just me, when only using third-third party/plugins with only 1 solution/option.
Yeling Shi
@shiyeling
Jul 06 2017 09:26
@Rojoss I suggest you post your question and code to the pixi forum(http://www.html5gamedevs.com/forum/15-pixijs/). Ivan and other guys respond to these issues quite promptly.
Jos
@Rojoss
Jul 06 2017 09:26
@LegitSoulja Javascript sorting? Does canvas have it's own sorting or something which we can use?
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:27
JavaScript has a sorting you can used based on an array
Jos
@Rojoss
Jul 06 2017 09:27
Yeah I will post it on forums I just thought I'd ask here first maybe some people experienced the same.
Jos
@Rojoss
Jul 06 2017 09:28
Well yeah but you can't really use that with pixi can you?
I guess I'll look into the soruce of pixi-display
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:28
Are you using nodejs?
Jos
@Rojoss
Jul 06 2017 09:29
ye
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:29
ES6 doesn't matter. Yes you can use sort
pixi is JavaScript
Also web API is JavaScript
Jos
@Rojoss
Jul 06 2017 09:29
Yes I know that lol
I rather don't hack into pixi stuff though
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:30
Well, it's easy to sort the stage children, as it's in an array
I mean, you can look into the source of pixi-display but you can do this simple without a plugin, less code, and being more efficient
Jos
@Rojoss
Jul 06 2017 09:31
Oh I see pixi just renders based on the order of the children
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:31
Yes
Well, I guess you have another option to work with. I hope that one works for you.
Jos
@Rojoss
Jul 06 2017 09:33
Yeah I'm gonna expiriment a little with it, thanks :D
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:33
Yea, np :)
Jos
@Rojoss
Jul 06 2017 09:33
One question though, is there like a pre render hook where I can do the manual sorting?
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:34
you can create your own hook, as an initializer?
Pixi is just a JavaScript library. Nothing too special, just you should know how basic web API works
Jos
@Rojoss
Jul 06 2017 09:37
Yeah sorry our company recently switched to Javascript and not too experienced with it yet
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:38
Yea, you should learn the basics (Not PIXI). Just to get an idea, and also maybe a little bit more of JavaScript. I wouldn't go straight to nodejs without knowing JavaScript (Old/standard version)
It's all OOP, but JavaScript is best to know fully (Based on the API library)
Jos
@Rojoss
Jul 06 2017 09:39
I've done JS in the past just not with Canvas/WebGL
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:40
Ok, so is your objects you're displaying static? Meaning, do the layers update on game loop?
If so, do the sorting on the game update (loop)
Or, sort it before the update (if static)
Hope that answers your question
Jos
@Rojoss
Jul 06 2017 09:41
Oke ye that sounds easier
There are a few dynamic layered objects but I'll do something else for them.
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:42
Ok, remember you can use multiple containers
(Stages)
(Layers) whatever you call them
Jos
@Rojoss
Jul 06 2017 09:43
ye we do that already for some static stuff will try group them more together to have even less performance impact on sorting.
ᦖєgιт
@LegitSoulja
Jul 06 2017 09:45
Yea, just be very efficient as possible for the best performance (fps).
Jos
@Rojoss
Jul 06 2017 14:02
image.png
Huge performance improvement with custom sorthing :) Thanks for the ideas @LegitSoulja
ᦖєgιт
@LegitSoulja
Jul 06 2017 19:19
@Rojoss You're welcome. Glad I could help
Jason Cardinal
@jason-timios
Jul 06 2017 19:50
Hey everyone, I am trying to make a effect where a person will hover over a grid cell and the cell will go 'transparent' to show the underlying scene. Then when you hover off it will slowly fade back to opaque. With a mask I can seem to get the fade effect to work, since everything that isn't black is just considered as transparent.
Is there a way to get this effect with a mask?
ᦖєgιт
@LegitSoulja
Jul 06 2017 19:54
But you said with a mask you can get the fading to work, or you meant can't?
Jason Cardinal
@jason-timios
Jul 06 2017 19:56
or yeah I can't
sorry
But i figured it out, sorry again haha
Just don't use a mask xD
ᦖєgιт
@LegitSoulja
Jul 06 2017 19:56
Ok