Jump to content

PIXI.Text doesn't look good when scaled down


royibernthal
 Share

Recommended Posts

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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:)

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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