Pixi.js: Lots of particle containers onscreen creates awesome psychedelic explosion

Created on 5 Aug 2018 · 3Comments · Source: pixijs/pixi.js

Expected Behavior

I'm working on a game where when 2 objects meet, 1 absorbs the other, and I create an absorption effect using a particle container and some sprites. However, if I have too many of these effects on the screen at a time, it creates an infinite psychedelic explosion, which is kind of awesome, but not really what I was going for. However, if I change from a particleContainer to a regular container, the problem goes away. Also, the issue only happens if there are a ton of particle containers onscreen at a time. If there are any less, it doesn't happen.

Update: It actually does still happen with the regular pixi container when the game is run in a mobile browser, so maybe a memory limit issue?

Here's my view hierarchy for each effect:

PIXI.Container // Effect main container. Gets scaled/positioned
    PIXI.Sprite // This is an overall glow
    PIXI.particles.ParticleContainer // This is the streaks effect
        PIXI.Sprite[] // Individual streak of light. Gets rotated and alpha'ed

Here's a gif of what it's supposed to look like:
regularcontainer

And here's one of the issue:
particlecontainerexplosion

pixi.js version: _e.g. 4.8.1
Browser: _e.g. Chrome 67.0.3396.99
Device: _e.g. Desktop_OS_X

Source

distinctdan

😄3

Most helpful comment

So it turns out I'm actually just dumb on this one. After chasing down some false leads, I discovered that my effects' intensity param was incorrectly tied to the framerate in an effort to make them fade faster if the game was lagging. However, my math was wrong and it actually made them increase in intensity, which lagged the game further, starting a vicious cycle. Incidentally, I've discovered that regular containers are seemingly slightly more performant than particle containers in my use case.

distinctdan on 6 Aug 2018

🎉1 😄1 👍1