Fix incorrect BitmapText text width calculation (#7758)

[kjarrio]

Description of change

Fix for BitmapText width calculation when using monospace fonts. Fixes issue #7758 - and doesn't break PR #7479 / #7245

Pre-Merge Checklist

• Lint process passed (npm run lint)
• Tests passed (npm run test)

[kjarrio]

Example: https://codesandbox.io/s/festive-cartwright-7ruly?file=/index.html

[bigtimebuddy]

Thank you for the PR! Could you possibly add unit test for this behavior?

[kjarrio]

Here is work in progress, for proper width/height calculations for BitmapTexts:

Before: https://63hr2.csb.app PixiJS 6.2.0 (Source: https://codesandbox.io/s/boring-shadow-63hr2?file=/index.html )
After: https://wiwen.csb.app (Source: https://codesandbox.io/s/tender-violet-wiwen?file=/index.html )

I have the unit tests as well, but I'm still working on a few edge cases for "pixel perfection" but I'm unsure if it's even worth it. For me, it's "good enough" with those changes. How important is it to get this 100%?

I'll tidy up the code to finish this PR as soon as I have time.

[bigtimebuddy]

Sorry it's taken a long time to review!

Seeing two issues here with width in your recent examples:

"C" is hanging off:

Character endings are peaking out:

[kozickikarol]

@kjarrio Are you going to fix anything here? I would gladly use new version with your fix cause I encounter the same problem.

[bigtimebuddy]

This isn't perfect, but it's good enough. If we can improve it overtime that'd be great.

[kozickikarol]

This isn't perfect, but it's good enough. If we can improve it overtime that'd be great.

🎉
@bigtimebuddy Any chance to have it in upcoming 6.2.2? It blocks our project from migrating to v6.

[kozickikarol]

@kjarrio I tested it more on my monospaced fonts and I noticed that this solution does not work for fonts which has xadvance<width or negative xoffset. BitmapText behaves correctly when I change digits inside but when first or last digit changes, BitmapText starts shaking.

monospaced font with negative xoffset:
monospace_font.zip

Same font works correctly in pixi v5.

[joel-Yolted]

as @kozickikarol pointed this fix does not solve the issue, There is still a clear regression made by the original #7245 fix breaking old fonts. It seems to be only occurring when anchor is set to 0.5 but that is a common use case.

original recreation on #7758 using 3.6.0 https://jsfiddle.net/1zyrd4s8/ showing the issue still exist.

Was this an intentional break? and if so please advice on why.

Somewhat easy workaround for this is to add an invisible character to the end (as pointed out above, only seems to occur if the last digit has an xoffset).

[bigtimebuddy]

This needs more work based on the feedback here with negative offsets.

[bigtimebuddy]

Ping @kjarrio do you want to continue working on this? If not I'd like to close and maybe someone else can pick-up this work.

[kjarrio]

I will work on this, starting today, I can't promise I'll be able to fix it, but I will try to get this perfect this week