Performance issue with alpha transition off sprite

[XieLong]

Hi everyone,

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.

[ivan.popelyshev]

> 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

No. It shouldn't slow down in both 2d/webgl contexts. Search what is wrong with your browser, videodrivers, operating system, hardware.

However, if initial alpha is 0, pixi wouldn't want to render it. When you render something first time, of course there's a lag, please search for "TextureManager.updateTexture" or "prepare plugin" in pixijs issues on github or in this subforum. Its all about the decoding PNG/JPED into RGBA format and uploading it in videobuffer. "renderer.textureManager.updateTexture(myTexture)" should do the trick.