Getting crisper PIXI.Text rendering

[cristobalsciutto]

In the `index.html` attached, I render the same `PIXI.Text` with the stage scaled to different sizes. You'll note that the bottommost text is pixelated. However, if I zoom-in my browser (using command +), you'll note that the exact same text is quite sharp. This is shown in the image attached. The left browser is at 100%, while the right browser is at the minimum zoom. (I've reproduced this in both Chrome and Safari).

This indicates to me that PIXI is capable of rendering quite crisp text. However, I've been unable to achieve this without the browser zoom. I've tried all combinations of:

1. Increasing the app resolution by a factor of R, and consequently scaling app.stage by (1/R)
2. Larger font, with the PIXI.Text scaled down
3. Linear interpolation for texture rendering
4. Scaling the resolution of the PIXI.Text

Is there something here I'm missing?

 

index.html

[b10b]

Why scale the stage rather than the fontSize?  A rescale like that won't necessarily resample, so pixels appear to have been removed in this case (creating the jaggies).

Pixi Text is very smart with what it does.  However it can't reliably know the final onscreen size at time of creation, so assumes that the fontSize requested equates to the onscreen size desired and samples accordingly.  Alternatively bitmap font assets can be intentionally oversized to reduce some of that issue, but come with their own burdens.

In summary, use Pixi Text as intended and it's great, being optimally smooth for the font, size, and resolution requested.

[cristobalsciutto]

I tried increasing the PIXI.Text fontSize, accompanied by an inverse scaling of the PIXI.Text element (#2 mentioned above). This, however, produced worse effects then just zooming out my browser.

I want the crispness of a zoomed-out browser, without having to ask users to zoom out their browsers...