Author Topic: Pixel-perfect bitmap fonts in NGUI - 2015  (Read 5079 times)

bac9

  • Full Member
  • ***
  • Thank You
  • -Given: 2
  • -Receive: 4
  • Posts: 113
    • View Profile
Pixel-perfect bitmap fonts in NGUI - 2015
« on: August 20, 2015, 04:50:33 AM »
Most of the tutorials I can find on the net date back to 2012-2013 and NGUI underwent many changes since, which makes me doubt whether I'm doing everything right. So I'll try to make a short tutorial on that - please correct me if anything I'm writing here is wrong.

Let's say I have a .ttf source font. Popular example of one is 11px GohuFont:



How do I get it into NGUI with the same pixel-perfect crispness? Obviously, Dynamic Unity fonts are out, I should be using atlased bitmap font. As far as I see, there is a Font Maker tool now.
Unfortunately, I was unable to get good results out of it's Generated Bitmap mode: unless you leave the default size value of 16 unchanged, Font Maker creates a mess like this:



And setting glyph size to 16 is obviously incorrect for this font:



So I tried another approach - digging out BMFont and importing my .ttf there. I used the following settings:



I then used the resulting .txt definition file and .tga atlas file, plugging them into NGUI Font Maker switched to Imported Bitmap mode.
The resulting font prefab looked more like it:



Except, obviously, alpha was missing. I tried to change BMFont export options with no luck, it insisted on exporting RGB or grayscale image with no alpha. So I simply created a new image with white fill in RGB and BMFont output in A, and reimported the font using NGUI Font Maker with that new texture. Now that's better, I'm getting almost perfect replication of results I wanted in game view, especially with pixel perfect snapping of widgets:



Only doubt left is texture filtering. No matter how well pixel perfect alignment lines up your labels and sprites, wouldn't the bilinear/trilinear filtering unavoidably dilute and dim the edges, especially pixel-thin lines like ones used in such a font? If you need 1:1 translation of pixels with no smoothing, why not set the filtering of your atlas to Point mode? Well, after trying it out, I'm not sure.



I'm unable to pick up any differences in label pixel colors between Point and Trilinear filtered atlases. It's not even subjective, Photoshop Difference layer mode literally returns black everywhere.
So, I guess Point filtering only makes sense in some exotic cases - for example, when you perfectly scale up your UI by 200 or 300 percent on XXXHDPI Android devices. In that case, getting crisp pixels on magnified sprites can only be achieved like that.

Did I miss anything, or that pretty much covers it all?
« Last Edit: August 20, 2015, 05:32:22 AM by bac9 »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Pixel-perfect bitmap fonts in NGUI - 2015
« Reply #1 on: August 22, 2015, 02:20:09 AM »
The font maker should work just fine. I tried it on my end with another font -- Arimo -- and it worked perfectly. The TTFs for the font you wanted (GohuFont) are corrupted on the website you linked. Unity just crashes when I try to use them, and if I double-click on the font itself it just gives an error, unable to preview it.

bac9

  • Full Member
  • ***
  • Thank You
  • -Given: 2
  • -Receive: 4
  • Posts: 113
    • View Profile
Re: Pixel-perfect bitmap fonts in NGUI - 2015
« Reply #2 on: August 22, 2015, 02:09:06 PM »
There are two TTF conversions of the font, one of them is corrupted, yes. I used one from the Github, with Unicode support (*uni-11.ttf and so on), that one is valid:
https://github.com/koemaeda/gohufont-ttf