Text baseline alignment issues

[Pasty]

I'm experiencing some issues with dynamic fonts incorrectly lining up vertically. See attached image.

At first I thought this might be an issue with the calculated baseline of the characters, which I know has changed in recent versions of NGUI. I tried a few older versions and am still getting the same results. Now I believe it has to do with the way Unity is handling the scaling of the characters. If you look at image, you can see that only those characters with flat horizontal pixels along the baseline appear slightly raised.

To reproduce:
Create a label and set Keep Crisp to Always
Set UI Root to FixedSize or to a PixelPerfect range that the actual window size is outside of, so that the UI is being scaled (may not be necessary)
Try a few different screen dimensions, the problem is more apparent at different heights

The font I am using is also attached for reference. Does anyone have any insight here or suggestions?


EDIT: In doing some testing, I found that the filtered font texture does not update on viewport resize. Doing it manually (setting Keep crisp to Never and back) will leave you with a different looking label. However, this does not resolve my issue fully.

[ArenMook]

Whenever you scale the UI, things like these start becoming apparent. This is why pixel-perfect mode is useful, and so is ensuring that everything leading up to and including your labels is using whole integer values for position, and (1, 1, 1) for scale. It's also important to make sure that your game window is using dimensions that are dividable by two. If you have something like 1204x711, then your UI won't be pixel-perfect.

That said though, looking at it there might be something wrong with how the label is positioned. I see that offsetting the Y by 0.5 makes it appear crisp.

Try this... NGUIText, line 238 is currently just "return glyph;". Change it to:

1.                                 glyph.v0.x = Mathf.Round(glyph.v0.x);
2.                                 glyph.v0.y = Mathf.Round(glyph.v0.y);
3.                                 glyph.v1.x = Mathf.Round(glyph.v1.x);
4.                                 glyph.v1.y = Mathf.Round(glyph.v1.y);
5.                                 return glyph;

[Pasty]

I tried out a few things:
Made sure window dimensions were even numbers
Made sure UI root panel dimensions were even numbers
Made sure Label scale was 1 and position was whole, even numbers
I had to keep UI root at FixedSize and the entire project I'm working on was designed this way. I made sure the manual height was an even value.

Still got the same issue at some dimensions, it's just something about the way curves are being filtered as opposed to straight lines. Straight lines seem to tend to sit exactly on a pixel baseline (they rarely get any aliasing at the baseline, pixels are usually either solid or blank when compared vertically) while curved characters are aliased below that baseline.

I also tried adding the rounding code you provided to NGUIText. Rounding y values leads to the reverse of my issue, with the baseline of straight-edged characters appearing slightly lower than that of rounded characters. It's almost as if all rounded characters are offset 0.5 pixels from straight-edged characters.

[Pasty]

Please excuse the double post

I've been struggling with this a bunch today and I think I'm closer to the issue. It seems to happen with every font, but is much more prevalent in the one I posted above. Part of the problem seems to simply be the dynamic textures are generated. Rounded edges at the baseline will extend lower than flat edges (See attached image)

Then, when this texture is scaled, the problem is exacerbated and can lead to as much as a two pixel difference between round-bottomed and flat-bottomed characters.

I plan on trying a few things to minimize the effect: Changing fonts, writing a script to keep the game window within even-valued dimensions, and re-checking all my label scaling and positioning.

I would still greatly appreciate any other ideas for solving this issue.

[ArenMook]

The key is to ensure that the labels are not scaled. They can't be crisp if they are scaled. The code I posted fixes the half-pixel mis-alignment I was seeing on my end with your font, and everything seems to look crisp. I'd suggest you use bitmap fonts in any case though. Dynamic fonts are on Unity's side, and are one of many unfinished features in Unity that don't work quite right in some situations. Randomly missing characters and such.