How to optimize 100% CPU usage

[dr.au]

Hi guys, I've been running profiles in Chrome dev tools on my game but having trouble making things run faster. I realize this is a hard question to ask, but can anyone point me in a direction of things to try?

Play/test here: http://daverau.info/play/leafy-mobile/

- the game world is 50k pixels wide platform type game And uses arcade physics for Gravity

- all assets are png retina so I'm scaling for high dpi but that doesn't seem to add my overhead

- particle emitter is lightweight and doesn't seem to impact performance

- I have about 500 platforms that all run collide checks, is there a way to only collide check what's in the camera view?

- how can I better isolate what's causing memory leaks and max CPU performance?

 

thanks for any help you can offer! I know it's hard to debug someone else's game but hoping for pointers. 

[Marsu]

Can you reuse platforms? And only have those on stage that would be visible? That way the collision checks also would only affect the active group of platforms.

Maybe keep a "rolling" array (like a fifo buffer) of the elements on screen and feed that from an array that contains the data for the whole level.
To keep the data small just store objects with the minimum of needed info like {x: 15, y: 40, platformType: 3}

[tips4design]

Yeah, just look at a flappy bird example. That game is endless but you don't have an array with a million pipes, you just re-use the pipes that went off-screen. 

[dr.au]

I'm following this great advice and making a much smaller world that will scroll and move platforms around. I kinda wanted people to be able to go back and explore, so perhaps I'll store this in an array and keep it around for later.

[mattstyles]

CPU is only at 50% max for me, I didnt check frames, it looked smooth but felt very slow.

If you generate platforms from random numbers then you can just store the number used to generate the platforms, or if you have a deterministic algorithm that generates a platform based primarily on position then you dont need to store anything, you'd just need a seeded random number generator and the position to generate any platform on the fly. No need to store anything. (There are loads of PRNG implementations about). You could 'replay' levels/worlds then too.

[tips4design]

The idea is not to avoid saving platform positions but to avoid creating the game sprites because they use a lot of memory and to not have physics enabled on platforms outside the world. You can still keep your map saved in a pre-defined format which you can actually update. Eg: save the positions of the platforms in an array and also save their health, when a platform should be visible re-use a sprite that shows a platform and update its position and health to match the map data from your array. If the platform move off screen, simply mark it's sprite as not used. If the platform is destroyed you can then update your array and remove the platform data from the array itself.

 

So, yes to: re-using sprites, saving positions, rotations, health...

No to: creating a different sprite object for each platform in the game (even for ones that are not visible), enabling physics on all platforms (this can't be actually done anyway if you respect the fist rule of not creating sprites for off-screen objects).

[dr.au]

Thanks to you guys I'm refactoring the whole platform/world generation. Already have rolling platforms based on a pool of 8 sprites now, instead of 500! Running at 40fps+ on iPhone5 right now. Will post some other results soon.

Have you all run into issues with large world bound numbers? How large do I need to hit before it's a problem, player.x > 1 trillion?

[dr.au]

I followed everyone's advice and refactored my game in several very effective ways:

Fix players X position

• Before the player was moving along the X axis forever and a camera followed the player. Level 6 started around X = 60,000.
• Now the camera has been removed and X values that are much easier to deal with. Now all the objects in the world have object.body.velocity.x = -negative values to move toward the player to simulate the player running.

Object Pool the platforms (and everything else)

• Before I was generating endless platforms and leaking memory all over the place.
• Now I generate 9 platforms with physics and object pool them, so on update() i check if their x value < -10 and I know it's off the screen and can be moved to a new location for reuse. Endless platforms from only 9 game objects.

Reduce var use inside game update() code

• Before the code had many var statements for more readable chunking. This triggered a lot of garbage collection and memory leaks over time.
• Now after reducing var statements in update() loop code the GC is triggered much less and I have very little frame lag.

...But I still have a problem of garbage collection and long frames!

• The game feels like it's dragging, glitchy and not polished on an iPhone 5/6
• Doing Profiling in Chrome and even removing all the major parts of the game piece by piece didn't reveal much: player, input, platforms, coins, enemies, music, background graphics all seem reasonable.
• Nothing stands out as being the culprit alone, but the combination together seems to trigger more GC and long frames.
• Where would you guys recommend I spend more time trying to optimize? Could the Retina assets and canvas being 2x be causing this?

Play the game. (Use Chrome inspector to emulate iPhone 5, best viewed in on a Retina screen)

View source on GitHub.

[nicof]

Did a quick profiling, it seems Phaser.Text hit the performances. 

You may want to update the text only if the text value change to avoid unecessary updates.

You may also want to use BitmapText with bitmap fonts instead it should be faster.

 

[dr.au]

1 hour ago, nicof said:

Did a quick profiling, it seems Phaser.Text hit the performances.

nicof, amazing this had such an impact! The game runs at 50% CPU when I remove the 4 text calls in the update() loop. I'm working on refactoring that. 

Thank you so much!!!

[Tobiasz]

In general Text is not recommended for smooth gameplay on mobile. In Construct 2 we have SpriteFonts, don't know if it's in Phaser though.

[nicof]

I guess that BitmapText is Phaser's SpriteFonts.

@dr.au I also recommend you to use the CPU Profiler in Chrome Desktop (or remotely) and do sort the Self column and see which classes are affected.

Here a cpu profile of your game, you can see that Phaser.Text comes back a lot in the top 10 of expensive functions...