Pixi.js: Properties from PIXI.TextStyle aren't all used in PIXI.bitmapText / PIXI.bitmapFont

[Bouh]

Expected Behavior

The value of align from PIXI.TextStyle should be used in PIXI.bitmapFont and visible with PIXI.bitmapText

Current Behavior

The value of align isn't visible and need to be setup in the bitmapText instead style of the font.
See in sandbox

Possible Solution

Also the style align is in PIXI.TextStyle and in the PIXI.bitmapText, why split the style.
I need setup my value on which? Style from textStyle or bitmapText ?

align, fontSize, letterSpacing have this issue.
Also there is a tint value on bitmapText and a fill color in textStyle, i use fill but tint is just useless ?

Also breakWords dosen't work with bitmapText.
And font is broken when fontVariant is used.

Steps to Reproduce

Playground with styles
Playground with fontVariant

Environment

v5.3.2

[bigtimebuddy]

This is intended, the only properties that are respected when generating a BitmapFont are the following style-based properties:

• strokeThickness
• textBaseline
• lineJoin
• miterLimit
• stroke
• dropShadow
• dropShadowDistance
• dropShadowColor
• dropShadowBlur
• dropShadowAngle
• fill
• fillGradientStops
• fillGradientType
• fontFamily
• fontVariant
• fontWeight
• fontSize

All the other properties like align, letterSpacing, wordWrap, whiteSpace, etc are layout-only properties and you should use the equivalent props on BitmapText instead.

[bigtimebuddy]

PR is welcome to clarify the documentation for this.

[bigtimebuddy]

There are several other issues here:

• the fontVariant thing looks like a bug
• breakWords is a feature request for BitmapText and not currently supported
• tint (on BitmapText) vs fill (on TextStyle): tint is dynamic and can easily be changed at runtime where fill is "baked-in" to the font and cannot be changed without re-generating the font.

[bigtimebuddy]

@SukantPal would you mind taking a quick peak at this:
https://jsfiddle.net/bigtimebuddy/9ptj1a04/

Unsure if this is a glyph measurement (data) problem or a rendering problem (BitmapText). The font atlas looks okay.

[Bouh]

I would add some characters dissapear when the fontSize is big, i think it's the same issue than the fontVariant on width of the characters.
https://jsfiddle.net/Bouh/jwdhgecz/

[bigtimebuddy]

I actually think that's a bug having to do with fitting the glyphs on the atlas:
https://jsfiddle.net/bigtimebuddy/q1jdLoz3/
Looks like "m" doesn't fit. @SukantPal another one for you.

One easy workaround @Bouh is to increase the texture size:
https://jsfiddle.net/bigtimebuddy/42aw9gxh/

PIXI.BitmapFont.from("fontName", style, { textureWidth: 1024 }); // default is 512

[SukantPal]

@SukantPal would you mind taking a quick peak at this:
https://jsfiddle.net/bigtimebuddy/9ptj1a04/

Unsure if this is a glyph measurement (data) problem or a rendering problem (BitmapText). The font atlas looks okay.

This is a glyph measurement problem. In fact, BitmapFont.from actually multiplies the width by 2 to ensure italic characters don't collide in the atlas.

https://github.com/pixijs/pixi.js/blob/651c54fccac7ec7a8e706ddce93fd58dffe00cb0/packages/text-bitmap/src/BitmapFont.ts#L402

The problem here is that italic characters have "overlap". If a character is 2px wide without italics, and it takes 4px with italics, the width is still measured as 2px. Why? That's because the "x-shift" is still 2px; the characters essentially overlap. BitmapText doesn't account for this difference.

The widths of the characters as measured by TextMetrics are same with or without italics:

[SukantPal]

I actually think that's a bug having to do with fitting the glyphs on the atlas:
https://jsfiddle.net/bigtimebuddy/q1jdLoz3/
Looks like "m" doesn't fit. @SukantPal another one for you.

One easy workaround @Bouh is to increase the texture size:
https://jsfiddle.net/bigtimebuddy/42aw9gxh/

PIXI.BitmapFont.from("fontName", style, { textureWidth: 1024 }); // default is 512

https://github.com/pixijs/pixi.js/pull/6793

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.