Dancing TextField with right align

[sta-ger]

Hello,

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.

[FakeWizard]

I don't see anything dancing there, can you be more specific? Although I've simplified your animation loop by a little bit. 

https://jsfiddle.net/7dv61c63/3/

[sta-ger]

[sta-ger]

The "dancing" like on the gif preview below: left (red) zeroes moves left <-> right for a half pixel. Very strange you don't see it... Maybe some issue with font/browser/os. I use Ubuntu/Chromium.

[sta-ger]

I have just figured the this does not happen in Firefox...

[greendot]

I'm not a Pixi developer, but I found that playing with the font family helps:

https://jsfiddle.net/rqswbLsh/

[sta-ger]

Yes, some font families works fine, but most unfortunately not. Another note: this issue is happen bot on Canvas and WebGL renderers. Also I have try to implement the same animation on the simple canvas without PIXI and it works properly -- no twitching.
https://jsfiddle.net/o3zwpto2/

[themoonrat]

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

[sta-ger]

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.