Text not crisp in Chrome but is crisp in Firefox?

Phaser 3
1

why is my text showing up like this only in chrome, but is crisp in firefox?

Chrome :

text-problem
text-problem1366×768 14.1 KB

Firefox :

text-fix
text-fix1366×768 15.1 KB

Any help as always is GREATLY appreciated!

Thank You!

2

Use NO_SCALE first.

3

@samme : NO_SCALE ???

4

Turn off the canvas scaling.

5

Phaser.Scale.NONE did not do anything.

6

Well your screenshots look like two different size canvases. You need to compare them both at scale 100%.

Those are also two different fonts.

7

@samme : They are the same font.

var loadingText = this.make.text ({
	x : ( window.innerWidth / 2 ), 
	y : ( height / 2 - 50 ), 
	text : 'Loading...', 
	style : {
		font : '20px monospace', 
		fill : '#ffffff', 
	}
}).setOrigin ( 0.5, 0.5 );

var percentText = this.make.text ({
	x : ( window.innerWidth / 2 ), 
	y : ( ( height / 2 ) - 25 ), 
	text : '0%', 
	style : {
		font : '18px monospace', 
		fill : '#ffffff', 
	}
}).setOrigin ( 0.5, 0.5 );

var assetText = this.make.text ({
	x : ( ( window.innerWidth / 2 ) ), 
	y : ( ( window.innerHeight / 2 ) + ( 50 ) ), 
	text : '', 
	style : {
		font : '24px monospace', 
		fill : '#0064DD', 
	}
}).setOrigin ( 0.5, 0.5 );
8

monospace is not a font, and those screenshots definitely show two different fonts.

Use Courier or something to compare.

1 Like