Bitmap font is shaking/jittering on newer pixi versions

Expected Behavior

I expect for bitmap text to be rendered without shaking, as in previous pixi versions (e.g. 5.3.12). The bitmap font is guaranteed to be monospaced since every glyph has the same xadvance.

Current Behavior

The text appears to be slightly shaking when changing the value. In the demo I provided, I used the version 6.4.2 as a reference, but I believe that the issues started appearing from the version 6.3.0.

This is possibly related to #8246.

Steps to Reproduce

The demo code can be found here: https://drive.google.com/file/d/1IVs3gt8ImxiDDhxTLMRyzzx56nr0SXIa/view?usp=sharing You can toggle pixijs version in the index.html.

Environment

• pixi.js version: 6.3.0 – 6.4.2

[bigtimebuddy]

Thank you for the example @tsopeh and for the visual reference.

This seems to be happening because of an incorrect calculation when setting anchor to anything other than 0 (although setting to 0 seemed fine). It could be a rounding issue or incorrect math or poor implementation of xOffset.

As a temporary workaround, if you set xOffset for each character to be the same thing, that helps.

const { chars } = PIXI.BitmapFont.available.MyMono;
Object.keys(chars).forEach(code => chars[code].xOffset = 0);

[tsopeh]

Here’s some video samples that illustrate the issue in a real application:

1. Without jittering (good behaviour on older versions)

https://user-images.githubusercontent.com/37545996/178275581-7b8d2c0e-0976-41d2-bb16-0ea89d2c816d.mp4

1. With jittering (bad behaviour on newer versions)

https://user-images.githubusercontent.com/37545996/178275651-32038511-f1e1-472e-8903-d87ede9a22bf.mp4