Jump to content

Recommended Posts

Hi there,

my first game is almost finished but I realized that I´m doing something wrong... little by little gets slower and there´s a big difference between the beginning and the end.


So, I wanted to ask to you guys, wich are the methods that you use in a case like this? Can you check someway the RAM used? Or anyway, how should I proceed? I´m checking the code and trying to fix things but it´s always good to learn from the people that know more than you :)



Link to post
Share on other sites

Learning how to optimise code is a deep and wide-ranging process, but learning to use the profiler tools built into most modern browsers is a good place to begin. There are plenty of tutorials around the web on how to use them, so just do a little bit of research. I find also that if I've written my game in a modular way, I can turn off and comment out parts of the game and see how the individual parts affect the overall performance, and by that methodology unearth the bottlenecks in my code.


There's no single guide or set of tips that can give you everything, but here are a few solid tips:

  • WebGL stuff runs much faster if you use a single texture atlas for all of your assets. On canvas this doesn't matter so much.
  • Lots of small optimisations add up - doing things like avoiding division (i.e. using * 0.5 to half a value instead of / 2) and rounding down numbers with | 0 in your code can speed it up, especially in big loops or your update/render functions.
  • Using the appropriate physics system (and using it appropriately) helps a lot - Arcade is way faster than P2, and if you can get away with doing something with tweens, then that's faster still.
  • Try to only update things which need updating. Be as ruthless as you can with regards to cutting out any unnecessary operations. Be especially vigilant with what you put in the update and render loops; calling the same thing over and over when it doesn't change is wasteful, and don't expect Phaser to be intelligent enough to realise nothing has changed - it will in most cases still repeat the same operation; and just because something isn't visually changing doesn't mean there aren't a lot of calculations going on anyway. A common approach (and one Phaser and pixi both use internally) is the idea of 'invalidation'. Objects have a 'dirty' flag, which is set to true whenever the object is changed. Then, on the object's update or render loop, if this flag is seen to be true, the object is updated and the flag is set back to false. This means the object is only updated when it needs to be updated, and if multiple things are changed, they're all updated in the same pass.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...