Quality of Text and bitmapText

Expected Behavior

Text and BitmapText should be visually equal to a Sprite with the same text and same styles.

Current Behavior

The bitmapText and Text are not equal, and not equal to an Sprite with the same text and style.

• Black: The image from photoshop with the same default settings found in PIXI.TextStyle ( except font size, see the settings bellow)
• Red : BitmapText using bitmapFont
• White: Text

Steps to Reproduce

https://jsfiddle.net/Bouh/avogx4n1/2/

Environment

• pixi.js version: dev branch and 5.3.3
• Browser & Version: Chrome 85
• OS & Version: w10
• Running Example: https://jsfiddle.net/Bouh/avogx4n1/2/

[darabos]

I hit this issue and came up with an awful solution. I extract the font texture to a buffer, clip the values, and put it back in the BitmapFont.

Before	After

// Make the font.
const f = PIXI.BitmapFont.from('RulerGold', { ... });
// Get the pixels.
const t1 = f.pageTextures[0];
const rt = app.renderer.generateTexture(new PIXI.Sprite(t1));
let data = app.renderer.plugins.extract.pixels(rt);
// Apply thresholds. 200 for colors, 100 for alpha.
data = data.map((x, i) => x < (i % 4 === 3 ? 100 : 200) ? 0 : 255);
// Put the result back into the font.
const t2 = PIXI.BaseTexture.fromBuffer(data, t1.width, t1.height);
f.pageTextures[0].baseTexture = t2;
for (const k in f.chars) {
  f.chars[k].texture.baseTexture = t2;
}

If you have a PIXI.settings.RESOLUTION > 1, set it to 1 before this snippet and back to your resolution after.

[bigtimebuddy]

That example is complicated, let’s simplify it more without Pixi: https://jsfiddle.net/bigtimebuddy/sc8pgL07/

Inherently, rendering text on canvas without antialias & fillText is not possible (unless someone figured this out). If you need a pixel-looking font, you should probably use a bitmap-font generation tool (e.g. bmGlyph) which probably has more options or there are some approaches where you scale render it at a large size and scale down.

Related: https://www.html5gamedevs.com/topic/23136-how-to-disable-font-antialiasing/

The best I could do it by picking the right sizes plus nearest scaleMode. But it’s not perfect. https://jsfiddle.net/bigtimebuddy/wmkxsgcq/