SpriteFont is not aligned

[lampewebdev]

Steps to Reproduce

• Load spritefont like here: https://excaliburjs.com/docs/text#spritefont
• Add the font to a scene like this

    const textA = new Text({
      font: spriteFont,
      text: "1",
      origin: Vector.Zero,
    });
    let textAA = new Actor({
      x: 100,
      y: 10,
      z: 1,
    });
    textAA.graphics.add(textA);
    engine.add(textAA);
    const textB = new Text({
      font: spriteFont,
      text: "22",
      origin: Vector.Zero,
    });
    let textBA = new Actor({
      x: 100,
      y: 30,
      z: 2,
    });
    textBA.graphics.add(textB);
    engine.add(textBA);

It works when both text has the same length but breaks when they do not have the same length

Expected Result

Font should be aligned on the X axis

Actual Result

Fonts are not aligned

Environment

• browsers and versions: Firefox (96.0.0)
• operating system: MacOS
• Excalibur versions: 0.25.1

Current Workaround

None

[eonarheim]

@lampewebdev Thanks for the excellent bug report!

Definitely not working as expected.

It appears that there is some internal state being shared across in the ex.SpriteFont that causes the placement to be buggy when re-used in other ex.Text objects. As a workaround while we work the bug, cloning the spriteFont seems to work for now (although not ideal).

var textA = new ex.Text({
  font: spriteFont.clone(),
  text: "1"
});
var textAA = new ex.Actor({
  anchor: ex.Vector.Zero,
  x: 100,
  y: 10,
  z: 1,
});
textAA.graphics.add(textA);
game.add(textAA);

var textB = new ex.Text({
  font: spriteFont.clone(),
  text: "22"
});
var textBA = new ex.Actor({
  anchor: ex.Vector.Zero,
  x: 100,
  y: 30,
  z: 2,
});
textBA.graphics.add(textB);
game.add(textBA);