Sprite.tint is performance killer

[Matthias Elephant]

Hi guys,

i searched for that performancekiller a long time in my code. I really didn't expect, that this could be the problem that i'm looking for.

In my game i create (reuse with groups) sprites every X seconds. Always if i reset the sprite, i need to change the texture, load new polygons and change the color (sprite.tint = 0x31B404). I was so sure, that the problem is loading texture or loading polygons.

So i made 3 tests:

1. Load Polygon AND tint WITHOUT Load Texture = nothing changed

2. Load Texture AND tint WITHOUT Load Polygon = nothing changed

3. Load Texture AND Load Polygon WITHOUT TINT = My huge performance drop (5-20 fps - so the game really lags in that moment) is gone.

Someone knows this problem or have a solution?

I hope someone can help me. Thanks

[rich]

Tint on Canvas is crazy expensive. It literally has to create a new dom canvas element, for every sprite you want to tint, and then use a blend mode to create the tint effect, then it renders from this 'tinted' canvas instead. Update the texture, or frame, or shape, or tint colour, and it has to re-do this whole process every single time. Multiply it by the number of objects you've tinted and you can see how it gets crazy expensive, super fast.

On WebGL however it's really cheap, because it just tints the vertices, so you can tint to your hearts content and it will be fine.

[Matthias Elephant]

Thank you for your response rich.

I didn't expect, that this task is so complicated. I made a quick test with WebGL. There it runs smooth on 62 fps without drops.

 

Thanks!