PIXI.Text doesn't look good when scaled down

[royibernthal]

I'm creating an app with a big resolution, this app contains several instances of PIXI.Text. At the big resolutions the app was developed for the text looks great.

I'm scaling the whole stage to fit devices while keeping the proportions of the resolution the app was developed for.

When scaling down the stage, the text is scaled down along with it - up to 10 times smaller than its original size.

When that happens, the text looks very bad. I'm only scaling down, never up.

Is there a way to make a scaled text look good? Other than not scaling the text in the first place and changing the font size instead (which will be a much bigger task than it sounds and have many downsides).

[Taz]

1 hour ago, royibernthal said:

Is there a way to make a scaled text look good? Other than not scaling the text in the first place and changing the font size instead (which will be a much bigger task than it sounds and have many downsides).

That's the only way I've found that's looked good enough. Ultimately it wasn't that big a task though, just one more thing to handle... And once I developed a system/pattern for doing it that way it became pretty easy to add each text IMO. Maybe your use case makes it harder, but I think drawing the text at the proper font size will be most satisfactory.

[ivan.popelyshev]

Anything more than 2 times smaller will look very bad, both Sprites and Text. And while for sprites you can pack everything in pow2, atlas and set mipmap=true, there's nothing you can do about text. Read about mipmapping and think of how can you do that manually.

[royibernthal]

I was afraid these might be the answers.

How would you go about rescaling only the text to its original (unscaled) size after scaling its parent(s)? I could multiply recursively the scale of all its parents and use it to revert the text scale, but is there a better (and more efficient) way to do it?

[ivan.popelyshev]

Look in "text.transform.worldTransform", its a matrix. "a" and "d" are X-scale and Y-scale. If you use rotations and other stuff, you can just create PIXI.Transform and decompose matrix into it (i forgot methods, please look at the docs), and look at scale.x/scale.y. I mostly use direct formulaes because i just remember them

I have code that scales text but I wont share it, \that's something everyone does itself. I'm afraid that my code will just add more questions that I'll have to answer instead of just setting you to make R&D for your particular case. I'm sorry, there is no general solution, but may be https://github.com/avgjs/pixi-richtext can help you.

[Taz]

If text is for HUD overlay, then I just put all text objects in an unscaled container which is added to stage after my world container. On resize I adjust the font size(s) of the shared style object(s) so that each text doesn't have to be dealt with separately, and then I scale just the world container instead of the stage. I adjust font size based on renderer.resolution as well, but maybe you wouldn't need that part...

[Taz]

FYI this seems to be working well for an easy way to keep the parent scale from affecting text object (I'm tinkering with this again too now, in search of easier-to-use more versatile way, prob by extending PIXI.Text)...

EDIT: er, not so fast, there's more complications than I thought at first, or have time for... I'll prob just stick with my old method for now:)

 

[royibernthal]

I think I got the picture, I'll see how I'll deal with this. Thanks