Jump to content

Getting crisper PIXI.Text rendering


Recommended Posts

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?




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...