Draw to BitmapData

[qdrj]

Hello everyone,

 

In my game I have big scrolling back(960x640) with parallax which consists of 8 parts.

 

I was thinking to replace it with one bitmapData. I'm going to draw all parts into this bmd and then use it as texture for only one image.

 

It will definetely reduce canvas draw calls but there any shortcomings for this method which i'm missing in theory?

 

I have been done this many times in Flash and it was good for performance.

 

[lewster32]

I doubt this will improve performance; in fact it's likely to reduce performance. BitmapData internally is just another canvas, so any compositing you do to this incurs the same performance hits as doing draw calls to the main screen canvas - except in addition once you've done your compositing on the BitmapData, it must then be drawn to the main canvas as well!

 

WebGL I believe would be even worse, because you'd be uploading the new texture to the GPU each frame, rather than allowing the GPU to composite the scrolling layers itself (which it can do very quickly compared to any code-based way).

 

Your best bet for increasing performance is to reduce overdraw. Avoid at all costs having 8 full-size parts all scrolling over the top of each other (even if they have totally transparent pixels, these still get drawn!) - reduce the parts down to rectangular sections that define only what can be seen, as in the attached diagram:

[qdrj]

I doubt this will improve performance; in fact it's likely to reduce performance. BitmapData internally is just another canvas, so any compositing you do to this incurs the same performance hits as doing draw calls to the main screen canvas - except in addition once you've done your compositing on the BitmapData, it must then be drawn to the main canvas as well!

 

WebGL I believe would be even worse, because you'd be uploading the new texture to the GPU each frame, rather than allowing the GPU to composite the scrolling layers itself (which it can do very quickly compared to any code-based way).

 

Your best bet for increasing performance is to reduce overdraw. Avoid at all costs having 8 full-size parts all scrolling over the top of each other (even if they have totally transparent pixels, these still get drawn!) - reduce the parts down to rectangular sections that define only what can be seen, as in the attached diagram:

I didn't know about internals of BitmapData in Phaser. But now I find this on docs

 

And thanks for overdraw tip. I will try this very soon and write here about results.