Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Phaser Mobile Unstable FPS

Muss52

By Muss52,
in Phaser 2

 Share

Recommended Posts

Muss52 Newbie

Muss52

Posted
Posted

Hi All,

I have developed an android game using Phaser and Cocoonjs. Here it is: https://play.google.com/store/apps/details?id=com.muss52.rockingandjumping

I used simple ARCADE physics and there are no big assets. 

But there is a performance problem. I have tried my game on many android devices. All of my tries have same performance problem that is FPS dropping randomly.

Also the problem occurs when I run the game on Chrome web browser. I tried 'render' to see FPS like below: 

    render: function() {
		game.time.advancedTiming = true; 
        game.debug.text(game.time.fps, 15, 25, "#00ff00");
    }

It says that the FPS is 60 always. But sometimes the game is choppy and sometimes the game runs smoothly. I googled it for days but I could not find any valuable solution for it.

Can anyone help me to solve the problem?

Regards.

Link to comment
Share on other sites
Muss52 Newbie

Muss52

Posted
  • Author
Posted

Hi,

The FPS dropping starts from beginning screen (gameTitle state). 

Here are my codes from booting to gameTitle state. 

index.html; 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
    <title></title>
	    		<style>
    			body{
            margin:0;
            background: #000000 url(assets/sprites/animation.png) repeat;
          }
    		</style>

    <script src="cordova.js"></script>

    <script src="lib/phaser/phaser.min.js"></script>
    <script src="js/boot.js"></script>
    <script src="js/preloader.js"></script>
    <script src="js/gameTitle.js"></script>
    <script src="js/howToState.js"></script>
    <script src="js/mainState.js"></script>
    <script src="js/gameOver.js"></script>

  </head>
  <body>
	<script>
			(function() {
				var game = new Phaser.Game(400, 600, Phaser.CANVAS, 'game');
        game.state.add('boot', boot);
        game.state.add('preloader', preloader);
        game.state.add('gameTitle', gameTitle);
        game.state.add('howToState', howToState);
        game.state.add('mainState', mainState);
        game.state.add('gameOver', gameOver);
        game.state.start('boot');
			})();
		</script>
  </body>
</html>

 

boot.js; 

boot = function(game) {
	return{
	preload: function(){
		game.load.image('loadingBar', 'assets/sprites/pipe.png');
	},
	 create: function(){
    game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
	game.renderer.renderSession.roundPixels = true;
    game.state.start('preloader');
  }
	}
};

preload.js; 

preloader = function(game) {
	return{
		
  preload: function() {
    loadingBar = game.add.sprite(50, 300, 'loadingBar');
    game.load.setPreloadSprite(loadingBar);

    game.load.image('animation', 'assets/sprites/animation.png');
    game.load.image('backGroundBlack', 'assets/sprites/animation.png');
    game.load.image('ball', 'assets/sprites/stone.png');
    game.load.image('pipe', 'assets/sprites/pipe.png');
    game.load.image('topGround', 'assets/sprites/topPlatform.png');
	game.load.image('downGround', 'assets/sprites/platform2.png');
    game.load.image('sideGround', 'assets/sprites/platform4.png');
    game.load.image('ground', 'assets/sprites/platform.png');
    game.load.image('backGround', 'assets/sprites/backGround.png');
	game.load.image('myFont', 'assets/sprites/myFont.png');
    game.load.image('pause', 'assets/sprites/pause.png');
  },
  create: function() {
    game.state.start('gameTitle');
  }
	}
};

and gameTitle.js; 

gameTitle = function(game) {
    var playButton = null;
	return{
    create: function() {
        backGround = game.add.tileSprite(0, 0, 400, 1200, 'backGround');

        var myFont1 = game.add.retroFont('myFont', 15, 16, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.:!?0123456789', 20, 1, 0);
        myFont1.setText('Rocking\nN\nJumping', true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
        var gameTitleimg = game.add.image(200, 150, myFont1);
        gameTitleimg.tint = 16198924.393604176;
        console.log(gameTitleimg.tint);
        gameTitleimg.anchor.setTo(0.5, 0.5);
        gameTitleimg.scale.setTo(2.5);
        gameTitleimg.angle = -15;
        var tween = game.add.tween(gameTitleimg).to({
            angle: 15
        }, 2000, "Linear", true, 0, -1);
        tween.yoyo(true, 0);

				var myFont2 = game.add.retroFont('myFont', 15, 16, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.:!?0123456789', 20, 1, 0);
        myFont2.text = 'Play';
        playButton = game.add.image(200, 400, myFont2);
        playButton.tint = 16198924.393604176;
        playButton.anchor.setTo(0.5, 0.5);
        playButton.scale.setTo(2);
        playButton.inputEnabled = true;
        playButton.events.onInputDown.add(this.playTheGame, this);

				var myFont3 = game.add.retroFont('myFont', 15, 16, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.:!?0123456789', 20, 1, 0);
        myFont3.text = 'How To';
				var howTo = game.add.image(200, 470, myFont3);
				howTo.tint = 16198924.393604176;
				howTo.anchor.setTo(0.5, 0.5);
				howTo.scale.setTo(1.2);
				howTo.inputEnabled = true;
				howTo.events.onInputDown.add(this.howToState, this);

        animation = game.add.sprite(0, 0, 'animation');
        game.add.tween(animation).to({
            alpha: 0
        }, 500, Phaser.Easing.Linear.None, true);
    },
    update: function() {
        backGround.tilePosition.y += 2;
    },
    playTheGame: function() {
        game.state.start('mainState');
    },
		howToState: function(){
				game.state.start('howToState');
		}
	}
};

 

I used prototype method before, but everybody says it causes lags. So I am using nested functions but FPS still drops randomly again.

Can anybody help?

Regards.

Link to comment
Share on other sites
  • 3 weeks later...
Befive.Info Newbie

Befive.Info

Posted
Posted

Hello,

Thanks for sharing your experience. I am glad to hear that yours has been solved.  :)

I had a similar problem like yours a few months ago.

I once abandoned a phaserJS project because the program was running too slow on my Android tablet. Today I tried the project once again and I was really surprised to see the same code running on the same Android at 60 FPS. I suspect that it was Chrome (Android) problem.

My blog article describing the problem:

http://blog.befive.info/2016/02/13/phaser-js-2-4-4-and-poor-performance-on-android-tab/

Cheers,

Link to comment
Share on other sites
bruno_ Newbie

bruno_

Posted
Posted

Try to test it with crosswalk webview.

Crosswalk webview has a great performance improvement over the default android webview.

I use it in my own game (in my signature) and it runs smoothly in almost every device. Only devices with low GPUs have bad performance.

Test it for yourself, it's in my signature.

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...