Performance tips for high resolution desktop game (via electron)

[Gazanfer]

I'm working on a high resolution (1920x1080) desktop game using electron (http://electron.atom.io/) as shell. Everything works fine, except I'm a little disappointed with the performance. I wasn't expecting native performance of course, but it's worse than I expected...

 

If you have any tips for phaser performance that has worked for you (with or without electron), please share.

 

I can sacrifice some features and 'm willing to hack into engine files.

 

For example:

- Most of the sprites in the game will be 2 colors only. If we somehow change the rendering process to use this information and skip some parts, would that improve the performance?

- Game will only run in electron. Are there some changes to Phaser I can make to lighten the engine for this?

- In electron, we are able to run the shell using any chrome flags. Is there anything I can take advantage of with this?

 

...Or anything else you can think of?

[Gazanfer]

Here is my test scene in sandbox

 

Basically it just displays 100 - 200 sprites rotating.

 

On my pc, if I set the game size to 1280x720, I get around 20fps.

 

If I use an older Phaser version, it can go up to 40, but still not enough.

[lewster32]

You'll get a large performance boost by putting the fps debug output into the render function instead of the update function.

 

As for your performance suggestions, I say that the amount of colours the sprite has will not affect performance, as internally Phaser works with 32-bit colours anyway - this is how the GPU does things, so typically unless you're working very close to the metal (i.e. blitting individual pixels to a custom framebuffer) you won't get a performance boost from reducing colours.

 

Generally speaking, a lot of performance gains can be had by making small optimisations here and there. Removing your modulo operation on sprite.angle will give you a modest performance boost, and remember that's being calculated over and over for every sprite on the screen every frame!

[Gazanfer]

Thanks for the suggestions, I updated the game in sandbox. I'm not sure if it's any better though.

[lewster32]

Doing a bit of playing around with the res at 1920x1080 (as my machine is fairly powerful) a completely blank scene only gets about 40fps as compared to 35fps when full of sprites, so I think there's a lot of overhead there somewhere. I don't know if this is related to a newer version or what - I seem to recall I did some tests before at 1080p and it was fine. Maybe try a few older major versions of Phaser to see if it's a recent problem?

[s-p-n]

I got between 48-54fps just decreasing the amount of time the fps display is rendered.

var lastUpdate = Date.now();var updateInterval = 250;function render() {    'use strict';    if (Date.now() >= lastUpdate + updateInterval) {        lastUpdate = Date.now();        this.game.debug.text(this.game.time.fps || '--', 2, 14, "#00ff00");    }}

So, the debugging process alone is taking a big bite out of performance.

 

Before I throttled the debugging I was at around 15fps. Throttling the debugging process I achieved 30fps on my fairly modest pc (1920x1080).. Also, I get that same fps speed if I delete everything in update() and create(). So the only thing I found that is noticeably degrading the fps is the thing that shows the fps.... And phaser's internal updating process...

 

I do get a small performance increase by preallocating space in the array, and a few other micro-optimizations.. But nothing spectacular... Maybe 1-3fps increase- if it made a difference at all.. http://phaser.io/sandbox/edit/jjDENjPx

 

Update:

Those were results in chrome, where my version of firefox is struggling to run a cpu-smashing 4fps.without throttling the debugger, and around 25fps with throttling.

[Gazanfer]

Thanks s-p-n, changing the fps stuff really made a big change for this example.

 

Still, I'm looking for more optimizations. I'm very flexible on everything in the game, except the resolution. I mean, if sprite rotation is too expensive, I will make a game with not many rotating sprites. If some other operation is expensive, I'm willing to cut them off too.

[MichaelD]

Are the rotating sprites, rotated via tween? Or just frames of a sprite? Usually frame animations have less impact on performance than tweens.

[Gazanfer]

Are the rotating sprites, rotated via tween? Or just frames of a sprite? Usually frame animations have less impact on performance than tweens.

I'm not sure. I think it's without tween. I'm not very good with Phaser yet, it's done by just changing the angle property.

 

But in general, I think tween should be the first thing to drop I guess.

[stupot]

In Chrome v48 I got 59/60 fps.

 

Switching to Lewster32's 1920x1080 I got avg 35fps (+-5), I knocked out fps display in render() and used chromes fps display and that showed 60.0 steady.

 

So sticking with chromes fps display I pushed the res up to 2048x1200 (700 sprites) before the the fps started to struggle to keep it at 60.0.

 

You will find that the canvas size will have a massive impact on performance regradless of how little rendering you are actualy doing on it.  There's also a clearBeforeRender flag that can be set to false to give a boost when the game always redraws all the screen.

 

Hope that helps.

 

T