Firefox Slow FPS

[brainbass]

Hello,

Since some day, firefox turn phaser game slow.

All game i have created and even litle game downgrade fps. (60FPS to 30FPS)

I dont know where is the problem.

i have try use phaser

Quote

desiredfps

but no change.

You can try with this example  : https://phaser.io/examples/v2/time/slow-down-time if you wait some seconds the animation down to 30fps.

this problem is only on firefox (i suppose since v57). All others browsers working fine.

 

Have you an idea where is the problem?

 

Thank you

[casey]

This may have to do with compatibility between the version of Firefox and canvas or webGL. Have you tried changing your game settings from WebGl to Canvas or vice-versa?

https://www.fxsitecompat.com/en-CA/categories/canvas-webgl/

[brainbass]

Thanks for your answer.

Yes i have tried and too AUTO but nothing working.

I use phaser.js 2.10.0

I try to create a game with world move.

My code is:

intro.js

var game = new Phaser.Game(600, 600, Phaser.CANVAS, 'phaser-example');
game.state.add('boot',bootState);
game.state.add('load',loadState);
game.state.add('menu',menuState);
game.state.add('game',gameState);
game.state.start('boot')

boot.js

var bootState = {
	create: function(){
		game.physics.startSystem(Phaser.Physics.ARCADE);
		game.state.start("load")
	}
}

load.js

var loadState = {
	preload: function(){
		game.load.tilemap('map', './racer.json', null, Phaser.Tilemap.TILED_JSON);
		game.load.image('tileset', 'tiles.jpg');
		game.load.image("road", "wall.jpg")
		game.load.spritesheet('car', 'caranime.png', 30, 30);
		game.load.image("borders", "black.jpg")
		game.load.image("cars", "dot.jpg")
		game.load.image("dog", "power.jpg")
		game.load.image("phare", "Phare.png")
		game.load.image("camion", "camion.jpg")
		game.load.image("oil", "oil.jpg")
		var loadingLabel = game.add.text(game.world.centerX, game.world.centerY, "Loading", { font: "bold 16px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		loadingLabel.anchor.setTo(0.5, 0);
	},
	create: function(){
		game.state.start("menu")
	}
}

menu.js

var menuState = {
	create: function(){
		this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		this.game.scale.minWidth = 300;
		this.game.scale.minHeight = 300;
		this.game.scale.maxWidth = "600";
		this.game.scale.maxHeight = "600";
		this.game.scale.pageAlignHorizontally = true;
		this.game.scale.pageAlignVertically = true;
		var FirstLabel = game.add.text(game.world.centerX, game.world.centerY, "Press Space to start", {align:"center", font: "bold 16px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		FirstLabel.anchor.setTo(0.5, 0);

		var kew = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
		kew.onDown.addOnce(this.start,this);
		game.input.mouse.capture = true;
		game.input.onTap.add(this.start, this)
	},start: function(){
		game.state.start("game")
	}
}

gamestate

var gameState = {
	create: function(){
		sensX = 30
		sensY = 0;
		inGame = 0;
		levelTime = 120000;
		levelUp = levelTime;
		speed = 2;
		levelID = 1;
		stopCount = 0;
		this.safetile = 0;
		crash = 0;
		cursors = game.input.keyboard.createCursorKeys();
		
		this.game.onPause.add(this.stopM, this);
		this.game.onResume.add(this.startM, this);
		
		this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
		
		loadingLabel = game.add.text(game.world.centerX, game.world.centerY, "You Lose", { font: "bold 16px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		loadingLabel.anchor.setTo(0.5, 0);
		loadingLabel.alpha = 0;
		loadingLabel.fixedToCamera = true
		
		LoadLevel = game.add.text(game.world.centerX, game.world.centerY, "", { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		LoadLevel.anchor.setTo(0.5, 0);
		LoadLevel.alpha = 0;
		
		LevelCountdown = game.add.text(300, 330, "", { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		LevelCountdown.anchor.setTo(0.5, 0);
		LevelCountdown.alpha = 0;
		
		LevelTimer = game.add.text(300, 0, levelTime, { font: "bold 16px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
		LevelTimer.anchor.setTo(0.5, 0);
		LevelTimer.alpha = 0;
		LevelTimer.fixedToCamera = true
		
		Points = game.add.text(340, 0, "0", { font: "bold 16px Arial", fill: "#ffffff", boundsAlignH: "center", boundsAlignV: "middle" });
		Points.anchor.setTo(0.5, 0);
		Points.alpha = 0;
		Points.fixedToCamera = true
		
		_this = this;
		_this.car = game.add.sprite(game.world.centerX,500, 'car');
		_this.car.animations.add('mover',[0,1,2,3],30, true);
		_this.car.fixedToCamera = true;
		_this.car.alpha = 0

		this.levelShow()
	},handleFpsProblem: function() {
		game.time.desiredFps = game.time.suggestedFps;
	},level: function(){
		
		this.map = game.add.tilemap('map');
		this.map.addTilesetImage('tileset');
		
		this.layer = this.map.createLayer('Tile Layer 1');
		this.layer.renderSettings.enableScrollDelta = false;

		this.map.setCollisionByExclusion([this.safetile], true, this.layer);
		
		game.physics.enable([this.car], Phaser.Physics.ARCADE);
		
		this.layer.resizeWorld();
		
		game.camera.y = 18000
		
		timerAccelerate = game.time.create(false);
		timerAccelerate.loop(10, this.levelAccelerate, this);
		timerAccelerate.start();
		
		game.world.bringToTop(LevelTimer);
		game.world.bringToTop(Points);
		game.world.bringToTop(loadingLabel);
		this.car.alpha = 1
		game.world.bringToTop(this.car);

		
		inGame = 1;
		
		
	},startM:function(){
		stopCount = 0
	},stopM:function(){
		if(inGame == 1){
			
		}
		stopCount = 1
	},levelAccelerate: function(){
		game.camera.y -= 2;
	},levelTimer: function(){
		levelUp--;
		LevelTimer.setText(levelUp)
		
		if(levelUp == 0){
			if(levelID == 2){
				levelID++;
			}else if(levelID == 3){
				levelID = 1;
			}else{
				levelID++;
			}
			this.phare.alpha = 0
			LevelTimer.alpha = 0
			levelUp = levelTime;
			inGame = 0;
			timer.stop()
			timerLevel.stop()
			timerAccelerate.stop()
			this.levelShow()
		}
	},levelShow: function(){
		LoadLevel.setText("Level "+levelID)
		var tt = game.add.tween(LoadLevel).to( { alpha: 1 }, 500, "Linear", true);
		tt.onComplete.add(this.countdown, this);
	},countdown: function(){
		var count = 3;
		_this = this;
		timeToGo = setInterval(function(){
			if(stopCount == 0){
				LevelCountdown.setText(count)
				LevelCountdown.alpha = 1
				
				if(count<0){
					LevelCountdown.alpha = 0
					//LoadLevel.alpha = 0;
					_this.level()
					clearInterval(timeToGo)
				}
				count--;
			}
		},1000)
	},direction: function(direct){
		if(crash == 0){
			switch (direct){
				case "up":
					if(this.car.cameraOffset.y>0){
						this.car.cameraOffset.y -= speed;
					}
					break;
				
				case "down":
					if(this.car.cameraOffset.y<570){
						this.car.cameraOffset.y += speed + 1
					}
					break;
				
				case "left":
					if(this.car.cameraOffset.x>0){
						this.car.cameraOffset.x -= speed
					}
					break;
				
				case "right":
					if(this.car.cameraOffset.x<570){
						this.car.cameraOffset.x += speed
					}
					break;
			}
		}
	},update: function() {
		if(inGame == 1){
			if (cursors.up.isDown)
			{
				this.direction("up")
			}
			if (cursors.down.isDown)
			{
				this.direction("down")
			}
			
			if (cursors.left.isDown)
			{
				this.direction("left")
			}
			
			if (cursors.right.isDown)
			{
				this.direction("right")
			}
		}
	}
}

 

I don't know why is slowly. I have try with a old game i have created but is same problem. IE, Chrome, safari work fine but no firefox

[brainbass]

I have created an example with Phaser 3 and i have the same issue.

http://cipa.ch/phaser3/

Perhaps you must be reload 2 or 3 times the page for the issue appear.

i dont know why the FPS down 60 to 30.

 

I have try to map a litle world 600x1200 but after times have the same issue.

 

Have you an idea? Thank you for your help

 

 

[Cassie]

Can confirm this is happening to me as well. I'm showing the game at a festival tomorrow -- does anyone have any suggestions at all for this issue?

[Kosmoon]

it happens to as well with firefox only, it drops to 30fps randomly (rather rarely, i would say 1 chance on 20), if i unfocus the window and come back it comes back to 60fps.

[none-9999]

The same thing happens to me, and that without using any framework and having an emphasis on optimization (pool objects, bitwise etc)

[dude78]

Huh... I get slow fps in Chrome but not firefox (desktop).

On mobiles all works fine.