questions about cacheAsBitmap

[Herbert]

Hi guys,

since webgl will cause some problems for some low performance phones(screen blinking or couldn't show at all), sometimes we are forced to use canvas instead,

but the number of sprites showed in the game really influence the performance a lot for canvas,

 

we use cacheAsBitmap to resolve it, but seems like cacheAsBitmap is very memory consuming, it will cause the game crashed for some low performance device(perhaps memory not enough)

 

maybe I didn’t use it correctly, could anyone answer my following question so I can use it more properly?

 

 

1. if there is a sprite and it doesn’t move or change at all, will it be kept redrawing by renderer?
2. if so, does it mean that a moving sprite consume the same performance as it to a static sprite?
3. should I use cacheAsBitmap to a single sprite(as I tested the performance improved), or I should only use it to a group which contains numbers of sprites?
4. I have a group contains 40 sprites, those sprites only change their visibility(i.e. sometimes show only 20 of them), I set the group’s cacheAsBitmap to true after i set the visibility to it’s children, and I will set it to false when I need to change the visibility of those sprites again, is it proper to use cacheAsBitmap this way?
5. when I set cacheAsBitmap to false, would it release the memory? 
6. any other suggestion will be appreciated:)

[themoonrat]

1. Yes; the scene is re-drawn every frame

2. Correct

3. The performance benefit comes with reducing draw calls, but at the the cost of increased memory usage. Doing on a single sprite will change the draw call from being from an image to a canvas; which i didn't really think made a difference these days.

4. It's fine to use it that way, but each time you turn it on, a new canvas will be created, to draw all of the sprite to and then cache, so there might be performance issues in that instance

5. Yes

6. Don't be scared, for low end phones, to get into a 'just get the core functionality working'. Loading different assets for them, that are lower resolution. And/or where there are usually animations, instead put a static sprite. 

[Herbert]

15 hours ago, themoonrat said:

1. Yes; the scene is re-drawn every frame

2. Correct

3. The performance benefit comes with reducing draw calls, but at the the cost of increased memory usage. Doing on a single sprite will change the draw call from being from an image to a canvas; which i didn't really think made a difference these days.

4. It's fine to use it that way, but each time you turn it on, a new canvas will be created, to draw all of the sprite to and then cache, so there might be performance issues in that instance

5. Yes

6. Don't be scared, for low end phones, to get into a 'just get the core functionality working'. Loading different assets for them, that are lower resolution. And/or where there are usually animations, instead put a static sprite. 

hi themoonrat,

thanks for your answering, it is very helpful

[Herbert]

15 hours ago, themoonrat said:

1. Yes; the scene is re-drawn every frame

2. Correct

3. The performance benefit comes with reducing draw calls, but at the the cost of increased memory usage. Doing on a single sprite will change the draw call from being from an image to a canvas; which i didn't really think made a difference these days.

4. It's fine to use it that way, but each time you turn it on, a new canvas will be created, to draw all of the sprite to and then cache, so there might be performance issues in that instance

5. Yes

6. Don't be scared, for low end phones, to get into a 'just get the core functionality working'. Loading different assets for them, that are lower resolution. And/or where there are usually animations, instead put a static sprite. 

hi themoonrat,

thanks for your answering, it is very helpful

[charlieRobinson]

I am scaling a sprite 200%. If I do not use cacheAsBitmap, the sprite doubles in size and stays crisp. It's perfect.

But if I use cacheAsBitmap, the sprite becomes blurry. How can i use cacheAsBitmap but not blur the image? Thank you

 

map.scale.setTo(2,2);

map.cacheAsBitmap = true;

I searched the forum for an answer but could not find anything.

[Taz]

Hi, I tried to help look into this but the sprites looked the same for me: here's a screen grab that shows cacheAsBitmap=true on the left and w/out it on the right (both are scaled 2X). Maybe you can post a minimal demo that produces the issue?

[samme]

Also, are you sure you need cacheAsBitmap? If the sprite has no children there's really no need.

[charlieRobinson]

On 9/7/2017 at 2:38 AM, magig said:

Hi, I tried to help look into this but the sprites looked the same for me: here's a screen grab that shows cacheAsBitmap=true on the left and w/out it on the right (both are scaled 2X). Maybe you can post a minimal demo that produces the issue?

strange. are you using same code as me to scale it? Mine blurs sprites every time I apply the code

 

On 9/7/2017 at 0:59 PM, samme said:

Also, are you sure you need cacheAsBitmap? If the sprite has no children there's really no need.

no...im not. its just a really large map sprite. I thought it was being redrawn every frame and didnt need to be so it should be cachedAsBitmap

[Taz]

2 hours ago, charlieRobinson said:

strange. are you using same code as me to scale it? Mine blurs sprites every time I apply the code

I copy and pasted your code for the left sprite and the right sprite is w/out cacheAsBitmap:

On 9/5/2017 at 9:11 PM, charlieRobinson said:

I am scaling a sprite 200%. If I do not use cacheAsBitmap, the sprite doubles in size and stays crisp. It's perfect.

 

But if I use cacheAsBitmap, the sprite becomes blurry. How can i use cacheAsBitmap but not blur the image? Thank you

map.scale.setTo(2,2);

map.cacheAsBitmap = true;

 

Here's the playground I made to test it if you want to fork and try to re-create the issue:

https://phaser.io/sandbox/edit/SLtwpbdc

[charlieRobinson]

On 9/10/2017 at 10:01 PM, magig said:

I copy and pasted your code for the left sprite and the right sprite is w/out cacheAsBitmap:

 

Here's the playground I made to test it if you want to fork and try to re-create the issue:

https://phaser.io/sandbox/edit/SLtwpbdc

 

odd. it seems both are blurred when size is doubled with or without cacheasbitmap. When I scaled my image with no cacheasbitmap, the sharp edges were retained. I wonder why that is? 

 

[Taz]

On 9/12/2017 at 4:13 PM, charlieRobinson said:

 

odd. it seems both are blurred when size is doubled with or without cacheasbitmap. When I scaled my image with no cacheasbitmap, the sharp edges were retained. I wonder why that is? 

 

"it seems both are blurred when size is doubled with or without cacheasbitmap": AFAIK potentially creating artifacts like blurriness and jaggedness is simply the cost of scaling on the fly like this.

"When I scaled my image with no cacheasbitmap, the sharp edges were retained": It sounds like (from prev replies) that cacheasbitmap isn't needed in this case, otherwise I would prob ask for a CodePen demo of the issue and try to help debug cacheasbitmap or find some work-around...

[samme]

Use antialias=false in Phaser.Game config.