JimZeeKing

Comparing Phaser FPS with Pixi FPS, i hit a wall

Recommended Posts

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 by JimZeeKing
Found the cause

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.