Frame rate issues using Sprites — (new to Phaser)

[spmurrayzzz]

Hey folks,

 

Disclaimer: I am a relative newcomer to HTML5 game development and Phaser, bear with my novice tendencies.

 

I started my first game project recently, more or less just as a way to experiment with certain game design patterns and also to learn about Phaser. Its been super fun so far, but I've recently run into a snag I can't seem to debug properly.

 

Context: The game I'm working on can be found at http://foofighterjs.com/. Source code at https://github.com/spmurrayzzz/FooFighter.js

The primary problem I'm running into is a pretty quick degradation in frame rate in my game. Starts at 60 FPS and after a few minutes its down to 20-30 FPS with continued degradation.

I've narrowed down the problem to my StarField entity (https://github.com/spmurrayzzz/FooFighter.js/blob/master/src/entities/StarField.js). If I comment out the event binding which delegates to addStar() and addSpeedLine(), the frame rate issues are non-existent. If I dial back the sprite creation throttling, the degradation just takes much longer to happen. This seems to point to a cumulative frame budget issue, but Chrome's Timeline feature hasn't been super helpful in narrowing down the issue.

According to the timeline, the requestAnimationFrame call is what takes so long (composite layers only other item there and it takes 1/2 millisecond), but there is no other data to suggest what might be the problem.

Are my sprite creation methods too expensive? Not sure where to go from here. Thanks in advance for any guidance you can give.

Feel free to fork and pull request if you have any interesting experiments/findings you'd like to share.

[spmurrayzzz]

I sorta feel foolish for posting this now, because I think I came up with a decent solution: https://github.com/spmurrayzzz/FooFighter.js/commit/2703363875587cfe8fa74feb9ed0427f219c4a03

 

Instead of just continually adding new sprites to the world like a madman, I create a fixed amount and then just update their positions when onOutOfBounds triggers — felt like a workaround at first, but now I realize this is the "right" way to do things.

Hope this helps others that ran into similar issues.

EDIT: for more context, I noticed that Chrome was firing a crapload of GC events (likely due to the massive amounts of objects I was created). All the heap allocation/deallocation was probably the culprit for the cumulative frame budget issue. So in this case, reusing the existing sprites was clearly the most expeditious fix.

[rich]

This is what the Phaser Groups are for too - you create a pool of sprites up front, then recycle them as they are killed off, so you don't have to create new objects all the time.

[spmurrayzzz]

This is what the Phaser Groups are for too - you create a pool of sprites up front, then recycle them as they are killed off, so you don't have to create new objects all the time.

 

Thanks for the clarification. I was just using the group idea as a reference for easier collision detection and failed to see the implied performance use, very useful though.

[gmalone]

Good information.  I was seeing a similar issue.  Nice looking game, BTW.