Frame rate drops sharply when many sprites are created in a short time

[caymanbruce]

I am writing a logic that on some conditions new foods are generated on the screen in a very short time. The player needs to see the sprites instantly. But doing this make the frame rate drop very quickly (from 60 fps down to 14 - 20 fps). Any solution to solve this problem?

I use a for loop to create a texture from pre-made canvas and then generate the new sprites. I am not sure if this is the problem

[themoonrat]

Use the prepare plugin to upload the textures to the gpu before you wish to show them (ideally include this within your loading process)

[caymanbruce]

4 minutes ago, themoonrat said:

Use the prepare plugin to upload the textures to the gpu before you wish to show them (ideally include this within your loading process)

The textures are just canvas objects and their colors are dynamic (randomly generated rgba color from the server). I can't preload them.

[ivan.popelyshev]

In your case, nothing helps. Unless you somehow use "tint" on the same texture instead of creating all those canvases...

There can be optimizations, but I need more data, more fiddles, real use-cases, e.t.c.

[Taz]

So if the client finds out about 50 foods, each has a different color, and so the client does this for each food: draw it to canvas, create a texture from the canvas, and then create a sprite from the canvas and add it to the stage?

One idea is to choose several food colors. Then the client can pre-create and pre-upload (to GPU) each texture before the game starts.

Another idea is to create one texture of a white food, then use this 1 texture for all of the sprites and tint each sprite to the color that the server sends

EDIT: I would use the second option if each food is just one color, which seems to be the case... It looks like Ivan suggested this too

[caymanbruce]

@Jinz Looks like the second option is achievable. But I use Canvas API to build the colorful texture, including all the heavy stuff, such as shadowBlur, shadowColor and globalCompositeOperation. How to tint this color to the white sprite?

[ivan.popelyshev]

Make two textures, use pair of sprites for each food: one is static, second might be tinted. Just pixi sprite tint.

[Taz]

You can use lighter and darker shades of white and you can use different alpha-ed white. Personally I use gradients for shadows and blur. So for the bright part I would use "#FFFFFF" and for the dark color that I'm gradiating too I would use "#404040" or  "#000000" or whatever darkness. And for blur I would gradiate from "rgba(255, 255, 255, 1)" to "rgba(255, 255, 255, 0)" (or use any darker white you want, just change all of the 255 to the same number to make it darker white, gradiating from 1 alpha to 0 alpha creates the blur). Maybe you can use similar strategy for however you're doing your shadows and blurs

[caymanbruce]

@ivan.popelyshev the use-case is that some player speeds up and spawns new foods, or someone dies and spawns loads of foods. Like that in agar.io or slither.io. 

[caymanbruce]

1 hour ago, ivan.popelyshev said:

Make two textures, use pair of sprites for each food: one is static, second might be tinted. Just pixi sprite tint.

How does that work? Why do I need pair of sprites?

[Taz]

If for instance you want the food to always have a blurry blue outline then you can create a separate texture that's just the blurry blue outline - this will be used for the non-tinted sprite. Then the main food texture is the white food without any blur - this will be used for the sprite that gets tinted to match the color that the sever sends. This way you only need two textures all together for all of your food sprites, and you get to use a separate color for the blur.

Or if you make the blur white then you can have both the blur sprite and the main sprite tinted so that both colors can vary for each food but still only need two textures..

With either method you end up with 2 sprites per food and use only 2 textures in total.

[Taz]

7 hours ago, caymanbruce said:

@Jinz Looks like the second option is achievable. But I use Canvas API to build the colorful texture, including all the heavy stuff, such as shadowBlur, shadowColor and globalCompositeOperation. How to tint this color to the white sprite?

Also beware that the units of the shadowBlur parameter are browser-dependent, so you have to tweak this parameter for different browsers (Firefox makes twice as much blur as Chrome for instance). Personally I don't use it for this reason (although it's been several months since tested and looked into this).

[caymanbruce]

On 6/29/2017 at 1:45 AM, Jinz said:

If for instance you want the food to always have a blurry blue outline then you can create a separate texture that's just the blurry blue outline - this will be used for the non-tinted sprite. Then the main food texture is the white food without any blur - this will be used for the sprite that gets tinted to match the color that the sever sends. This way you only need two textures all together for all of your food sprites, and you get to use a separate color for the blur.

Or if you make the blur white then you can have both the blur sprite and the main sprite tinted so that both colors can vary for each food but still only need two textures..

With either method you end up with 2 sprites per food and use only 2 textures in total.

Thanks. I have experimented it. Looks good so far. Do you know how to make the sprite brighter or even look like a gleaming light? I have tried tinting the white sprites with very bright colors but still can't achieve this effect. Is there something I am missing?

[Taz]

6 hours ago, caymanbruce said:

Thanks. I have experimented it. Looks good so far. Do you know how to make the sprite brighter or even look like a gleaming light? I have tried tinting the white sprites with very bright colors but still can't achieve this effect. Is there something I am missing?

I think the only way to make the sprite look brighter is too make stuff around it darker - or you can make parts of the sprite darker so that other parts seems bright. If you look at shiny gem sprites for instance, usually like half the gem is a darker shade to make the bright part look bright.

[caymanbruce]

@Jinz Thanks. Looks like I need to go extra miles to make pretty foods. This is what my food looks like so far. Following your suggestions, I use two sprites for each food, one for blurring and stays under the static white food sprite. But to be honest I don't like its look. Its look is not as good as shadowblur. 

 

 

UPDATED: I know my problem. I have used a white blurred sprite for each food but what I should be using is a sprite color similar to the tint color. I ended up using several more textures and I decide to use only a few colors instead of getting hundreds of different  colors from the server.