jmp909 Posted September 29, 2015 Share Posted September 29, 2015 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 updateI 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 30I'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 adviceJ Link to comment Share on other sites More sharing options...
rich Posted September 29, 2015 Share Posted September 29, 2015 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. Link to comment Share on other sites More sharing options...
jmp909 Posted September 29, 2015 Author Share Posted September 29, 2015 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 30I 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 RegardsJ Link to comment Share on other sites More sharing options...
jmp909 Posted September 29, 2015 Author Share Posted September 29, 2015 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] thanksJ. Link to comment Share on other sites More sharing options...
Recommended Posts