How to optimize/debug my game?

[totallybueno]

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

 

 

[alex_h]

Google Chrome has some useful profiling tools in the developer console. Look under the 'Profiles' tab, you can do things like record a CPU profile, or more applicable in your case Record Heap Allocations

[lewster32]

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.

[totallybueno]

Thanks guys, I´m gonna check in Google Chrome first and then try to optimize small things... wish me luck