Trouble with SpriteFont

[keasy9]

I'm making pixel-art game in small resolution (128x256), and starting to adding texts into it. Using Sprite-font results into artefacts with or withour spacing:

Why? Here's my font sprite (alphabet is 0245713689):

Already checked sourceView of font sprites, it's have round x, y, width and height values.
Here is my game config:

const width = 128;
const height = 256;

const canvasElem = document.getElementById('canvas');
if (!canvasElem || !(canvasElem instanceof HTMLCanvasElement)) throw new Error('Canvas not found!');

const scale = Math.ceil(
    Math.max(canvasElem.offsetWidth / width, canvasElem.offsetHeight / height)
) * Math.max(2, window.devicePixelRatio); // at least 2 for smother character movement

export const Config = {
    width: width,
    height: height,
    displayMode: DisplayMode.FitScreenAndFill,
    pixelArt: true,
    antialiasing: false,
    filtering: ImageFiltering.Pixel,
    pixelRatio: scale,
    backgroundColor: Color.Black,
    canvasElement: canvasElem,
    fixedUpdateFps: 30,
    scenes: {
        level,
    }
} as const;

[eonarheim]

@keasy9 Good question! With super low resolution (less than 500x500) you don't have a lot of actual pixels to place a font after sampling a font. Unless you carefully align the font and size it so that the pixels line up with the canvas you'll run into sampling artifacts.

There are a few options that work pretty well for low resolution:

1. Artificially scale the canvas to give you more pixels (try pixelRatio: 5 that'd get you above 500x500), your logical resolution will remain the same.
2. Artificially scale the sprite font to give you more pixels to sample
3. Snap the game to pixels (camera/actors) and align things on pixel boundaries

I have some prose about it here that might also be helpful https://excaliburjs.com/docs/pixel-art/#new-approach-texture-filtering-scaling-and-special-antialiasing

[keasy9]

Thanks, scaling spritte font is perfect solution for me!

[eonarheim]

Awesome! I'm excited to see your game! Let me know if you need any signal boost!