PhaserCE 2.7.X has performance issues compared to Phaser 2.6.2

[RazorDE]

When I've tried to update my game project from Phaser 2.6.2 to PhaserCE 2.7.7 I've noticed that the latter seems to have some serious performance issues which can be especially noted when testing it on some older mobile phones or tablets.

When using PhaserCE these devices can handle way less text objects without dropping frames than they are able to do with version 2.6.2.

I think it is best to demonstrate this with an example. That's why I've uploaded a test to Github that measures the framerate: https://github.com/RazorDE/PhaserPerfTest

Please also checkout the readme-file of the project for further instructions and for the results from my tests.

Hope this helps you finding the issue.

Please let me know if you need more information from me.

[vpmedia]

Hi! Maybe it would worth the effort to try the versions between 2.6.2 and 2.7.3 - I think it would help to find out which commit(s) are resulted in performance regression.
https://github.com/photonstorm/phaser-examples/blob/master/examples/_site/phaser/phaser.2.7.0.min.js
https://github.com/photonstorm/phaser-examples/blob/master/examples/_site/phaser/phaser.2.7.1.min.js
https://github.com/photonstorm/phaser-examples/blob/master/examples/_site/phaser/phaser.2.7.2.min.js

[vpmedia]

https://github.com/vpmedia/PhaserPerfTest/tree/master/phaser-perf-test
I've added all versions to my fork if anyone would like to test it

[RazorDE]

I did a quick test on my iPad2 with version 2.7.0 using 100 text objects. Similar to my other 2.7.x tests it also runs with approx. 6 fps. Furthermore I've tested this with version 2.5.0 which behaves similsar to 2.6.2 by running with approx. 56 fps.

So this issue starts with version 2.7.0 and concerns the whole 2.7.x version family.

@vpmedia Thanks for extending my test project. Can you please create a pull request for your changes such that I can integrate them into my repository? Thanks.

[vpmedia]

I've created a pull request:
RazorDE/PhaserPerfTest#1
Also I can confirm that on my desktop pc I can also notice the fps difference, if I create about 1200 texts 2.6.2 is 60fps, 2.7.0 is about 45fps

[samme]

Text is really a special case, though.

[vpmedia]

I think the source of the issue is somewhere in PIXI.WebGLSpriteBatch class ..
I've created a more compact example:
https://github.com/vpmedia/PhaserPerfTest/tree/master/minimal-test (pull request already sent)
What I see is that for Phaser 2.6.2 one Text object triggers one .flush() call in the WebGLSpriteBatch class and the currentBatchSize equals with two:

PIXI.WebGLSpriteBatch.prototype.end::flush  phaser.2.6.2-no-physics.js:4848:5
12:21:39.247 #FLUSH# 2 false

Phaser 2.7.7 triggers two separated flush calls and batch size equals with one:

PIXI.WebGLSpriteBatch.prototype.render::flush  phaser.2.7.7-no-physics.js:4595:9
#FLUSH# 0 true  phaser.2.7.7-no-physics.js:4906:5
PIXI.WebGLSpriteBatch.prototype.render::flush  phaser.2.7.7-no-physics.js:4595:9
#FLUSH# 1 false  phaser.2.7.7-no-physics.js:4906:5
PIXI.WebGLSpriteBatch.prototype.end::flush  phaser.2.7.7-no-physics.js:4580:5
#FLUSH# 1 false

[vpmedia]

Some additional comments:
.flush() calls in the code:
https://github.com/photonstorm/phaser-ce/blob/master/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js#L250
https://github.com/photonstorm/phaser-ce/blob/master/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js#L237
https://github.com/photonstorm/phaser-ce/blob/master/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js#L265

https://github.com/photonstorm/phaser-ce/blob/master/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js#L249
this condition is always true
also != maybe should be !== if the condition stays (maybe needed for multitexture)

[vpmedia]

Also If I completely comment out https://github.com/photonstorm/phaser-ce/blob/master/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js#L249 condition fps stays at 60, I can see the text objects but there are also upscaled blurred huge texts in the background.
It seems like one text requires multiple draws.

[vpmedia]

I've played a little bit more with the debug settings, my conclusion is that the text draws are not batched since Phaser 2.7.X
2.6.2 batches the texts so currentBatchSize=10 and 1xflush() call, 2.7.X does not and currentBatchSize=1 and 10xflush() call.

[vpmedia]

@photonstorm Sorry for bothering, could you help out with this performance issue?

[vpmedia]

I've made some draw call debugs:
https://raw.githubusercontent.com/vpmedia/PhaserPerfTest/master/phaser-perf-test/outputs/ff-phaser262.png
https://raw.githubusercontent.com/vpmedia/PhaserPerfTest/master/phaser-perf-test/outputs/ff-phaser277.png
102 draw 216 call vs 151 draw 1067 call / same scene.

[vpmedia]

Hi, also as an extra side note this issue is not text specific. Question is that this was a tradeoff when multi-texture or other feature has been added or an unnoticed performance regression? I must support a wide range of devices so this one is really important to me.

[photonstorm]

@bitnenfer any thoughts on the above?

[vpmedia]

@RazorDE I had to revert back to 2.6.2 because of this ticket, I thought I share some updates from the 2.7.X-CE branch which I think should be included in the last official version:
https://github.com/vpmedia/phaser2-lite/commit/9e58c3b169ca76a65908d1072bc743bc22ebcda4
https://github.com/vpmedia/phaser2-lite/commit/8b492c17e0096a04a6b5a70d6ebf9d8ea8c761fd
https://github.com/vpmedia/phaser2-lite/commit/41f35f72da30833d4112365e6de850dc099270c6
I'm running this patched version in production without any issue or exception.

[RazorDE]

@vpmedia Sorry to hear that you had to switch back to 2.6.2 and thanks for providing the links in your comment.

I have the feeling that this issue is not so trivial to fix and I guess the only way around it when using 2.7.x right now is using Bitmap-Fonts instead which isn't really multilingual friendly.

[vpmedia]

@RazorDE You cannot mitigate the issue using bitmap fonts because this is not a text issue, the whole render engine affected.

Phaser 2.6.2:
https://raw.githubusercontent.com/vpmedia/PhaserPerfTest/master/draw--comparsion/phaser-26.png

Phaser 2.7.10
https://raw.githubusercontent.com/vpmedia/PhaserPerfTest/master/draw--comparsion/phaser-27.png

As you can see with this minimal example which is using two png sprites and no text: 2 draw with 16 calls vs. 3 draw with 28 calls.

In my opinion it would make more sense for the community edition project to revert to the original 2.6.2 codebase and apply patches into that. ... Or fix this because this is a show stopper.

Anyway personally it's fine for me to wait for the new 3.X release and use 2.6.2 meanwhile.

[Rycochet]

I've been hit by this bug too - on a related note, text.cacheAsBitmap is not being respected, so you can't bypass it that way :-/

[samme]

Try it with enableDebug: false?

I get 2 draws, 18 calls vs. 2 draws, 16 calls.

• v2.8.0
• v2.6.2

[vpmedia]

@samme can you add please a 2nd separated image? - my test included a green preloader bar too

[samme]

Now they have equal draw counts (6) but v2.8.0 has 8 calls per draw (including 2 to bindTexture) and v2.6.2 has 2 calls per draw.

[samme]

Here are the two bindTexture calls:

[drfrankius]

https://themoonrat.github.io/webgl-benchmark/?library=Phaser2&version=2.6.2&scene=1&objectCount=10000
Whatever changed it seems like it has been a issue with every release from 2.7.x . This benchmark linked shows the drop using multiple textures. Using a single spritesheet performance still seems comparable.