Comparing Phaser FPS with Pixi FPS, i hit a wall

[JimZeeKing]

Hi all, i started to mess with Pixi a year ago and made this little thingy as a test : http://tim.cgmatane.qc.ca/atelierHTML5/jms_1/

Now this will work well on desktop, tablet and mobile, with great FPS (i use my iphone 5 for testing)

Then i found out Phaser i using pixi as its renderer, so i ported my test, (with minor changes, like not using a spritesheet animation adding scale animation, tileable bg scrolling etc, and i cannot get it to run as smooth as the first link even though the mecanics are the same, i get massive fps drop on my iphone 5 (averag 17-20 fps instaed of 58-60 even if i remove those little additions i made)

 

You can see for yourself here (keep in mind its only a test, not an actual game) : http://tim.cgmatane.qc.ca/phaser/

Can anyone point me toward a cause/solution?

 

Here is my Main.js content, and the test is in Game.js : 

//starting a game with 100% size, auto detection of WEBGL capabilities and is added inside the DIV with id GameStage
var game = new Phaser.Game("100", "100", Phaser.WEBGL, "GameStage");

//states represents pages, here we have three pages in our test game
game.state.add("Menu", Menu);
game.state.add("Game", Game);
game.state.add("End", End);

//we show the menu at first
game.state.start("Menu");

/**
 * Resize function to be called when screen size change (ie, when there is an orientation change)
 * @returns {undefined}
 */
var resizeGame = function () {
    var height = window.innerHeight;
    var width = window.innerWidth;
    game.renderer.resize(width, height);
    game.scale.setGameSize(width, height);
    game.camera.setSize(width, height);
    //we want to reposition all visual menu assets when a global resize is called
    game.state.states.Menu.resize();
};

//here we add a listener to know when resize occurs in browser
window.addEventListener("resize", resizeGame);

 

Thansk a lot

 

UPDATE : Phaser's TileSprite seems to cause problem, but not PIXI's...

Edited August 24, 2016 by JimZeeKing
Found the cause

[mattstyles]

Phaser uses an older custom version of Pixi, your initial test is Pixi version 3.0.9, Phaser is 2.2.9 (with a few minor API changes). 

I'd still think it unlikely to cause such a drastic reduction in fps but it could explain a slight drop.

[JimZeeKing]

Humm, it could be that, do you know any version of phaser with an updated PIXI core?

[dimumurray]

1 hour ago, JimZeeKing said:

Humm, it could be that, do you know any version of phaser with an updated PIXI core?

I doubt that you'll find a version of Phaser with an updated core. Lazer (formerly Phaser 3) uses a custom renderer (https://github.com/photonstorm/lazer). 

[symof]

7 hours ago, JimZeeKing said:

Hi all, i started to mess with Pixi a year ago and made this little thingy as a test : http://tim.cgmatane.qc.ca/atelierHTML5/jms_1/

Now this will work well on desktop, tablet and mobile, with great FPS (i use my iphone 5 for testing)

Then i found out Phaser i using pixi as its renderer, so i ported my test, (with minor changes, like not using a spritesheet animation adding scale animation, tileable bg scrolling etc, and i cannot get it to run as smooth as the first link even though the mecanics are the same, i get massive fps drop on my iphone 5 (averag 17-20 fps instaed of 58-60 even if i remove those little additions i made)

 

You can see for yourself here (keep in mind its only a test, not an actual game) : http://tim.cgmatane.qc.ca/phaser/

Can anyone point me toward a cause/solution?

 

Here is my Main.js content, and the test is in Game.js : 

//starting a game with 100% size, auto detection of WEBGL capabilities and is added inside the DIV with id GameStage
var game = new Phaser.Game("100", "100", Phaser.WEBGL, "GameStage");

//states represents pages, here we have three pages in our test game
game.state.add("Menu", Menu);
game.state.add("Game", Game);
game.state.add("End", End);

//we show the menu at first
game.state.start("Menu");

/**
 * Resize function to be called when screen size change (ie, when there is an orientation change)
 * @returns {undefined}
 */
var resizeGame = function () {
    var height = window.innerHeight;
    var width = window.innerWidth;
    game.renderer.resize(width, height);
    game.scale.setGameSize(width, height);
    game.camera.setSize(width, height);
    //we want to reposition all visual menu assets when a global resize is called
    game.state.states.Menu.resize();
};

//here we add a listener to know when resize occurs in browser
window.addEventListener("resize", resizeGame);

 

Thansk a lot

 

I think the issue you have is from using a forced webgl instead of canvas in main.js

var game = new Phaser.Game("100", "100", Phaser.WEBGL, "GameStage");

Changed it to 

var game = new Phaser.Game("100", "100", Phaser.CANVAS, "GameStage");

OR 

var game = new Phaser.Game("100", "100", Phaser.AUTO, "GameStage");

Does it still have the same performance drop of 40 fps?

[marlene]

Hi,

Firstly you have fixed dimensions, use the Percentage based dimensions

var game = new Phaser.Game('100%', '100%', Phaser.AUTO, 'container');

Curious as  why you use a resize function when you can use the Phaser Scale Manager. 

[Tom Atom]

Hi, tilesprite & WebGL is brutal performance killer on iOS - remove it and see results (or move to canvas)

[JimZeeKing]

14 hours ago, dimumurray said:

I doubt that you'll find a version of Phaser with an updated core. Lazer (formerly Phaser 3) uses a custom renderer (https://github.com/photonstorm/lazer). 

Yeah, i just saw that yesterday, i guess no luck for me then. Thanks though

[JimZeeKing]

10 hours ago, symof said:

 

I think the issue you have is from using a forced webgl instead of canvas in main.js

var game = new Phaser.Game("100", "100", Phaser.WEBGL, "GameStage");

Changed it to 

var game = new Phaser.Game("100", "100", Phaser.CANVAS, "GameStage");

OR 

var game = new Phaser.Game("100", "100", Phaser.AUTO, "GameStage");

Does it still have the same performance drop of 40 fps?

I had it to auto at first, same thing... and still in my pixi example i force webgl too and it works well

[JimZeeKing]

8 hours ago, marlene said:

Hi,

Firstly you have fixed dimensions, use the Percentage based dimensions

var game = new Phaser.Game('100%', '100%', Phaser.AUTO, 'container');

Curious as  why you use a resize function when you can use the Phaser Scale Manager. 

Coming from pixi, taht was my way of doing it before, so i guess i have to change my ways  thanks for the tip! As for the dimensions, i tried with %, same thing and the docs states that a string represent a percentage from 0 to 100

[JimZeeKing]

7 hours ago, Tom Atom said:

Hi, tilesprite & WebGL is brutal performance killer on iOS - remove it and see results (or move to canvas)

Yeah, but still my pixi example use the same thing and runs at 60 fps. I am quite baffled right now. Thanks for your help 

Update : you are right Phaser TileSprite are the problem, but then why would Pixi TileSprite work well and not Phaser's?

Update 2 : Looking at this thread, i understand now : https://github.com/photonstorm/phaser/issues/1815