For some reason when I add text to my game, the x and y position are both off when I load it in Firefox. I’m using Firefox Developer edition. Loading it in Chrome gives me correct positioning.
Here’s the full code: https://github.com/bradydowling/phaser-ball-shoot
I’m just adding text like so:
const soundButton = this.add.text(
this.physics.world.bounds.width - 200,
40,
'Sound on',
{
fontFamily: 'Monaco, Courier, monospace',
fontSize: '20px',
fill: '#fff',
}
);
Here is the game config I’m using:
const config = {
type: Phaser.AUTO,
width: 800,
height: 640,
scale: {
autoCenter: Phaser.Scale.CENTER_BOTH,
},
scene: [Intro, Gameplay],
physics: {
default: 'arcade',
},
};
And here is the simplest scene this is happening in:
import Phaser from 'phaser';
export default class Intro extends Phaser.Scene {
constructor() {
super('intro');
this.enterKey;
}
preload() {}
create() {
this.enterKey = this.input.keyboard.addKey(
Phaser.Input.Keyboard.KeyCodes.ENTER
);
const middleX = this.physics.world.bounds.width / 2;
const titleText = this.add.text(
middleX,
this.physics.world.bounds.height * 0.25,
'Tip Dunk Shootout',
{
fontFamily: 'Monaco, Courier, monospace',
fontSize: '40px',
fill: '#fff',
}
);
titleText.setOrigin(0.5);
const middleY = this.physics.world.bounds.height / 2;
const welcomeText = this.add.text(
middleX,
middleY,
'Press ENTER to start gameplay',
{
fontFamily: 'Monaco, Courier, monospace',
fontSize: '20px',
fill: '#fff',
}
);
welcomeText.setOrigin(0.5);
}
update() {
if (this.enterKey.isDown) {
this.scene.start('gameplay');
}
}
}
This issue happens with all text I try to add, in all scenes. Am I doing something wrong?