Fastest option for "blitting" multiple copies of image

[jmp909]

Hi,

As per my example here http://www.html5gamedevs.com/topic/17484-caching-graphics-to-rendertexture-or-bitmapdata-and-adding-to-cache/ , I'm trying to draw multiple sprites to a render texture to animate a background. I need to be able to scale and rotate the Sprite image but nothing else (possibly Sprite has overheads I don't need?)

I currently use 26 Sprites in a group and RenderXY the group to a texture in my update

I could use filled polygons and track the points over time and redraw but I assume Graphics is slower

My PNG for the Sprite is 128x512 and I scale them from 0.1 to 1.7.

In chrome it hovers around 59-60 but mobile performance is around 30

I'm just wondering if there's a technique that performs better? From what I understand phaser is batching my sprites anyway. If I use BitmapData draws my graphic doesn't come out with antialiasing which is no good here ... Essentially I'm using the PNG to simulate a vector animation, so hard pixels don't work here.

Thanks for any advice

J

[rich]

Phaser only batches them if they all use the exact same texture file. Any deviation in the texture will break the batch and rendering performance will take a hit as a result.

[jmp909]

Thanks . It is the same sprite graphic used 26 times.

I'll do code/demo shortly

In chrome I get 59-60fps with the odd glitch during garbage collection from what I can see (GC event)

On mobile (browser) it's fluctuating wildly around 30

I guess it's down to the number of sprites I'm scaling, I just wasn't sure there's a faster solution.

That said, ~2/5ths of my off screen rendering is redundant but a little awkward to fix due to the type of animation and syncing everything . I'll explain it better with screenshots shortly

Regards

J

[jmp909]

I've put code here.

http://pastebin.com/BddbduLt

 

here's a functioning codepen (but note it's compiled from TypeScript so maybe a bit less readable)

http://codepen.io/jmp909/pen/EVZyWq

 

but to explain briefly:

 

• 26 sprites are used (13x 'starSprite' for the initial launch of stars and 13x 'extraSprite' for the second launch, so that there are 2 stars on each lane at the same time).
   
• this is then RenderXY'd to a RenderTexture as otherwise there would be gaps in the animation, since no lane can be filled entirely by both sprites at the same time. I therefore want to keep the graphics from the previous loop in order to fill the screen
   
• 800x100px section is offscreen. this is the bottom of the "fan" so shouldn't be seen by the user

 

my logic can be neatened up slightly but it's not going to be the cause of frame rate issues really, that'll be the amount of bitmap data I'm scaling

 

I'm just wondering if there's a solution to achieve the same another way with less overheads

 

eg any of these:

 

• using an Image instead of Sprite? [update: fixed]
• is it possible to add the sprites to a draw group ready for rendering, without the draw group existing on stage? (currently as mentioned I've just moved it off-screen) [update: fixed]

 

 

thanks

J.