first post here, but quite an active reader. I'm working with PIXI.js for about a year.
Right now I have the issue that the framerate of my game drop drastically when I fade in a sprite as a screen overlay.
What I do: The game consists of multiple layers (PIXI.Container), the layer on top is used as overlay and contains a sprite. When the player takes damage, this sprites alpha is tweened from 0 to 1 within a second.
What's the problem: The first time this tween/transition happens, the FPS of the game drop harshly (on my windows test system from stable 60 fps to about 12 or even less fps). The second time the transition happens, everythings runs silky smooth.
What I tried: Replace usage of PIXI.Sprite.alpha with a PIXI.filter.AlphaFilter. But the effect remains exactly the same.
I assume the issue is that the first time a sprite with a specific alpha is rendered, it needs to calculated and is than buffered. If that's the case, I have two questions: Does this buffer remain until the page is reloaded? And how could I fill this buffer before the game starts?
If there's no buffering or my whole approach is faulty, I would be very grateful for improvement suggestions.