[Solved] Bitmap fonts don't display correctly

[piotr]

Hi all,

Bitmap fonts don't display correctly on both Chrome and Safari (both on Mac), but sprites render correctly (green gradient on the side of the attached images)

I've tried with different fonts and this is my configuration. This happens with both zoom:1 and zoom: 2 and larger canvases (e.g 800x600)

var config = {
	type: Phaser.AUTO,
	scale: {
        parent: 'gameDiv',
        autoCenter: Phaser.Scale.CENTER_BOTH,
		width: 400,
		height: 300,
    },
	pixelArt: true,
	roundPixels: false,
  	antialias: false,
	backgroundColor: '#000000',
	scene: [ Boot, Preload, Title, Options, Credits, Play, End ],
	physics: {
		default: 'arcade',
		arcade: { debug: false }
	},
	zoom: 2,
};

 

This is how I load and use the fonts. I've tried using both .xml and .fnt

//load
this.load.bitmapFont('pinscher', 'assets/fonts/pinscher-hd.png', 'assets/fonts/pinscher-hd.xml');
//use
var title = this.add.bitmapText(0, 0, 'pinscher', 'Game Title', 30); 

Thanks for any help in fixing this

[piotr]

I've also added these lines, without any improvements:

To the config file

mode: Phaser.Scale.NONE,

To the scene

 this.cameras.main.setRoundPixels(true);

 

[piotr]

Solved. 

The issue was the game's low resolution (400x300). I was trying to make my 16x16 sprites to look sharp and big enough and therefore the bitmap fonts where crunched. On top of that I wasn't using .setScale to set the font's size.

So to this is the current set up I'm using to get a retro pixel looking game:

1. Don't set a too low resolution and set zoom to 1

var config = {
	scale: { width: 1600, height: 1200 },
	pixelArt: true,
	roundPixels: false,
  	antialias: false,
	zoom: 1
};

2. Use .setScale(); for bitmap fonts

this.add.bitmapText(0, 0, '8bit', 'Game Title').setScale(1);

3. If you have small sprites, 16x16, then change the scale of all sprites to blew them up and show those nice pixel

var player = this.add.sprite(x, y, "player");
player.setScale(4);

 

Edited January 19, 2021 by piotr