Game does not display correctly when published

Phaser 3
1

Hi

I’ve got my game uploaded to itch but it does not display correctly. The text does not show in the correct places while the sprites do show in the correct places. The first screen shot shows how the game looks on my own development server and the second screen shot shows what happens when I attempt to play the game loaded on to itch. It seems to only affect the y position of the text and the larger the font the more pronounced the error.
image1

image2

2

What’s your code for the text?

3

import Phaser from ‘phaser’
import { textStyle } from ‘./TextStyle’

export default class TitleScreen extends Phaser.Scene
{
constructor()
{
super(Keys.Scene_Title)
}

 create()
 {
     this.add.text(0, 0, 'some text at 0, 0')
     this.title(textStyle)
 }

  title(textStyle)
 {
     const textMessage = 'Mario\nBreak Out \n '
     textStyle.fontSize = '64px'
     textStyle.strokeThickness = 4.5
     textStyle.align = "center"
     const textDisplayed = this.add.text(256, 260, textMessage, textStyle).setOrigin(0.5)
 }

}

I’ve noticed that if I enlarge the text size it seems to push the display further down the screen. Also the x position does not changed only y. ‘some text at 0, 0’ should be at the top left corner. Setting this text larger pushes it down the screen further.

4

Have you tested in different browsers?

You can try adding text metrics, which you can find in the text object that’s displayed correctly.

1 Like
5

I tested it in Microsoft Edge and it worked. I’ve been using Brave to make the game. I tried the text metrics as you described and it worked. So it seems that the problem is with the Brave browser, it needs the extra metrics information to get the game to show correctly when using Brave.

6

More specifically, it’s this issue, related to Brave’s privacy features.