Scaled spritefont is badly rendering font

[spustlik]

Steps to Reproduce

Use sprite font and scale it. Code is on end of issue.

Expected Result

No black lines under characters (it is from next character)

Actual Result

This is not scaled result, it is in original resolution.

Environment

• browsers and versions: Chrome 124.0.6367.156 (64bit)
• operating system: Windows 11
• Excalibur versions: (v0.30.0-alpha.1053+29fef3b)

Code

class TestFontScene extends ex.Scene {
    async onInitialize(game: ex.Engine) {
        super.onInitialize(game);
        let loader = new ex.DefaultLoader();
        let fontImage = new ex.ImageSource("src/assets/font.png");
        loader.addResource(fontImage);
        await game.start(loader);
        let fontSpriteSheet = ex.SpriteSheet.fromImageSource({
            image: fontImage,
            grid: { columns: 1, rows: 45, spriteWidth: 10, spriteHeight: 10 }
        });
        let font = new ex.SpriteFont({
            alphabet: '01234567890.- ©][ABCDEFGHIJKLMNOPQRSTUVWXYZ|/',
            caseInsensitive: true,
            spriteSheet: fontSpriteSheet,
            scale: ex.vec(4, 4)
        });
        let lbl = new ex.Label({
            pos: ex.vec(10, 10),
            anchor:ex.vec(0,0),
            text: '-brown fox jumps over the lazy dog',
            spriteFont: font
        });
        this.add(lbl);
    }
}

used font

[eonarheim]

@spustlik Thanks for the issue!

I believe the rendering issue you are seeing is because by default Excalibur blends assets. The black lines is caused by sprite sheet bleed due to this blending.

Fix:

• If you'll be doing a pixel art style game, try switching the engine to pixelArt:true or antialiasing: false, check out this post for more details https://excaliburjs.com/docs/pixel-art

  var engineSpriteFont = new ex.Engine({
      width: 600, 
      height: 600,
      pixelArt: true,
      scenes: {
        'start': TestFontScene
      }});
    
    engineSpriteFont.start('start');

  

• What is the resolution of your game by chance? Sometimes you need to have a higher scaling factor pixelRatio: 2 especially if your resolution is < 500x500 pixels

[eonarheim]

I'll add some documentation to help with text rendering, I can definitely see this happening to a lot of folks

[spustlik]

great, pixelArt: true, helped, thank you.
For now I am using 1024x600, but it can change in future...

[eonarheim]

@spustlik Closing for now, let me know if you run into anything related to font rendering