Text Scaling Setup

[MichaelZ]

Hello, I have a VERY general text question: PIXI (as well as Unity for that matter) handle text scaling by applying the scale to the post-rendered text. What I mean by this is that if you set a scale on a parent object... which then propagates to its children, the text does not get re-rendered but the cached image gets scaled by the transform. However, doing this, leads to blurry text (its known that text does not scale well up or down). The way around this is to re-render the text by rolling the scale into the font size... and allowing the text to get re-rendered by the font engine at the target scale. However... this "feature" is not supported by PIXI (or Unity). This can be worked around manually but is a pain. My question is... how is this not a problem for other users, am I missing something?

My best guess here is that in the games space... fonts tend to be large and so therefore the blurriness is not really noticeable and not an issue.

[ivan.popelyshev]

Yeah, that's pain  bluriness appears when font size is behind the 0.5x-2x of real screen pixel

Scale like that will cause texture re-upload to GPU, and its kinda slow. Unity supports signed distance field fonts, while PIXI doesnt.

Of course it will be great if PIXI support feature that you described, you can post an issue: https://github.com/pixijs/pixi.js/issues , and then it will be marked as "v5.x".

[!untrue]

On 07/10/2016 at 9:59 PM, MichaelZ said:

how is this not a problem for other users, am I missing something?

It's a problem for me too. Curious to know how people are handling this in cases where you want sharp text. I'm thinking I could overlay html/css elements on top of the canvas? Or failing that, I might design everything around a set of fixed resolutions and forget trying to scale. But yeah, it's a lot of work just to make the fonts a bit nicer looking.

[xerver]

We have some ideas on how to improve this experience in v5. I'm looking into adding SDF text, as well as doing automatic prerendering for bitmap fonts. I'll update you when we have more about it.

[themoonrat]

7 hours ago, !untrue said:

It's a problem for me too. Curious to know how people are handling this in cases where you want sharp text. I'm thinking I could overlay html/css elements on top of the canvas? Or failing that, I might design everything around a set of fixed resolutions and forget trying to scale. But yeah, it's a lot of work just to make the fonts a bit nicer looking.

Higher canvas resolution & higher text resolution, I'm afraid :/ So if you wanted everything at 960x540, instead have the renderer at 1920x1080, but load all assets at @0.5x

Another options is change the libs so that text is created at a higher resolution by default. The code here: https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js#L67 I change to always be higher than 1. I find that on a canvas of, say, 960x540, text created with a resolution of 1.5 looks nicer than 1, as it'll have some inbuilt scaling. 

YMMV

[MichaelZ]

TX for the info! I'll have to check out "Unity supports signed distance field fonts" and "SDF text".

For us, we find blurriness with any non-1 scale due to anti-aliasing. Our approach has been to manually re-render the text by altering the style (the fontSize)... but this requires micro-management of it... and it certainly can't be per-frame as its slow (as Ivan mentioned). For the most part this only needs to be handled when switching from retina <-> non-retina monitors at runtime... but we're hitting some cases now on window re-size. The main pain here is if you do this you can't simply alter your scale at the root of your hierarchy but need to handle the text specially.

We have also taken the approach of doing UI in HTML/CSS as an overlay which works well most of the time... though this approach can lead to several problems depending on your app: positional synch is a pain, z-order across the layers can become a pain, etc.