Text position inconsistent among different browsers

Phaser 2 / CE
1

After doing some testing I’ve realized that something odd is going one with the text positions in my game depending on the browser version. In Chrome, Chrome Incognito, and Firefox the positions of the text appear where I’d expect them to appear. In Firefox incognito and Brave the text appears lower than it should like in this post Text position different in Firefox - #3 by bradydowling .

I don’t believe it to be an extension problem as I disabled all the extensions I had in Chrome and Firefox and they worked as normal. I’d like to know if anyone has experienced this problem for Phaser CE and had any solutions to this problem. The only idea I have at the moment is to try to sense what browser the game is currently being played in and then adjust positions accordingly (if that’s even possible). But I don’t know how that’d work with the inconsistency between regular and incognito mode. Any help would be greatly appreciated. Thank you for your time.

2

Try setting text metrics manually.

Some browsers block text measurements for better privacy.

3

Thanks for your reply and the example. I’ll give it a try and see if that works. I’ll report back once I have. Looking at your example, I think I understand most of the components. One thing that I’m not sure about is within the config1 object within “metrics”. Specifically the ascent and descent properties. What are these values in reference to?

4

Are you using Phaser 2/CE or 3?

You should copy the metrics values for a particular font from a text object that’s displaying correctly.

In Phaser 2/CE you can find these in

console.table(Phaser.Text.fontPropertiesCache);

after you’ve created text objects.

5

I am currently using Phaser CE.

6

In Phaser CE it’s probably easiest to look in Phaser.Text.fontPropertiesCache after you’ve created all your text objects, in a browser where they’re displaying correctly. Copy those and then modify your code like

this.add.text(0, 0, 'Hello', {
  font: '9px monospace',
  fontProperties: {/* metrics for '9px monospace' here */}
});
1 Like
7

I see; so

  1. console Phaser.Text.fontPropertiesCache in a properly displaying browser after creating all my text objects

  2. Take those metrics and have them in fontProperties for each text object

9

Alright I gave it a try, but I’m not seeing any visual changes. I got the Phaser.Text.fontPropertiesCache.
image

I then created a fProp object to hold the properties like so

let fProp = {
			ascent: 17,
			descent: 10,
			fontSize: 27
};

I then assigned it to fontProperties for several texts of bold 18px Arial as follows

enemyNameText = this.game.add.text((this.world.width/2-165), 20, game.global.oppoNickName, { font: "bold 18px Arial", fill: "red", align: "center", fontProperties: fProp });

At the moment it’s still exactly the same. The font properties cache though is definitely different. When I do it for the incorrect browsers after the text I get something like
image

One thing I can note is that when I then console log fontProperties to enemyNameText, after everything is loaded, it seems to be undefined. Which I’m not sure as to why that’d be since I believe I’ve set it correctly.

10

Alright another update. I decided that instead of changing the fontProperties on each individual text object I would set the actual keys inside Phaser.Text.fontPropertiesCache. I did it near the top of my create function like the following based on the table and object I got from a visually correct browser using console.table(Phaser.Text.fontPropertiesCache);

		Phaser.Text.fontPropertiesCache["bold 18px 'Arial'"] = {
			ascent: 17,
			descent: 10,
			fontSize: 27
		};

		Phaser.Text.fontPropertiesCache["bold 45px 'Arial'"] = {
			ascent: 42,
			descent: 16,
			fontSize: 58
		};

		Phaser.Text.fontPropertiesCache["bold 72px 'Arial'"] = {
			ascent: 67,
			descent: 22,
			fontSize: 89
		};

		Phaser.Text.fontPropertiesCache["48px 'Arial'"] = {
			ascent: 45,
			descent: 16,
			fontSize: 61
		};

		Phaser.Text.fontPropertiesCache["bold 32px 'Arial'"] = {
			ascent: 30,
			descent: 13,
			fontSize: 43
		};

		Phaser.Text.fontPropertiesCache["bold 90px 'Arial'"] = {
			ascent: 83,
			descent: 25,
			fontSize: 108
		};

This seems to have fixed the issue. I’m thinking that my update function that loops through as the game plays might’ve been updating the text with the broken font properties and that’s why visually there wasn’t a change. I might do so more experimentation. Regardless if someone else has this problem they can give this a try and see if it helps. Thank you again for your help @samme

1 Like
11

That’s actually a good way to do it.

Passing fontProperties should work in Phaser CE v2.19 and later.