Jump to content

Dancing TextField with right align


Recommended Posts


I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default.

There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: https://jsfiddle.net/7dv61c63/

Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.

Link to comment
Share on other sites

The reason this occurs within PIXI and not plain canvas is due to how PIXI does Text. Essentially, because drawing text is slow, when you change text on a PIXI.Text object, it draws that out to a canvas and then treats that as a texture to use a Sprite. Rendering this sprite each time is super fast. To get the alignment, it's taking this generated texture, and aligning that to it's right edge, rather than the text. I'm guessing this texture width is going up in non even amounts each time a 0 is added, and thus you're getting this pixel different wobble.

As for a solution... meh. The latest pixi has a .trim = true you can set in pixi style, which I think helps ( https://jsfiddle.net/7dv61c63/9/ ) but doesn't completely solve. It's also more intensive on cpu, trimming every texture generated by the text class. As a hack, u could also set the width of the text after it has been generated. The width size of your textures go 14 / 29 / 43 / 58 / 72. If you knew for example to manually set "00" to width 28, even though it's generate it as a 29 wide pixel, that might help?

Since changing values rapidly is not a great idea with text anyway, what I do for counters is either use a bitmap fixed width font, or draw out each number, save as a texture, and re-use that texture as sprites for a counter. So 0000 would use the single "0" generated texture in 4 different sprites evenly spaced apart. Now, changing numbers is just changing which texture to use, which is super fast

Link to comment
Share on other sites

The solution about .trim = true for some reason gives even more strong twitching...  Btw thanks for suggestions! As said: "the reason is how PIXI does text" -- everything is clear, PIXI does text as it does. But seems like this behavior is incorrect and the issue about non even amounts should be corrected at PIXI, am I right? In other words: there is no option to set "right" alignment for TextField without side effects.

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