« previous next »
Pages: [1]

Author Topic: Bitmap Font is not pixel perfect  (Read 3295 times)

BrightBit

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 21
    • View Profile
Bitmap Font is not pixel perfect
« on: February 21, 2014, 04:13:07 AM »
Hello,

I am using NGUI 3.5.0 and Unity 4.3.2f1 and I've created a custom Bitmap Font that I am failing to get it pixel perfect. When I change the height of Unity's game viewport you can see something like this:



What am I doing wrong? Here a some of my settings and the affected font itself:

  1. info face="PixelFont" size=16 bold=0 italic=0 charset="ANSI" unicode=0 stretchH=100 smooth=0 aa=0 padding=0,0,0,0 spacing=1,1 outline=0
  2. common lineHeight=16 base=16 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=0 redChnl=4 greenChnl=4 blueChnl=4
  3.  page id=0 file="PixelFont.png"
  4. chars count=95
  5. char id=32   x=0     y=32    width=4     height=16    xoffset=0     yoffset=0     xadvance=4     page=0  chnl=15
  6. char id=33   x=16    y=32    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  7. char id=34   x=32    y=32    width=5     height=16    xoffset=0     yoffset=0     xadvance=6     page=0  chnl=15
  8. char id=35   x=48    y=32    width=8     height=16    xoffset=0     yoffset=0     xadvance=9     page=0  chnl=15
  9. char id=36   x=64    y=32    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  10. char id=37   x=80    y=32    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  11. char id=38   x=96    y=32    width=7     height=16    xoffset=0     yoffset=0     xadvance=8     page=0  chnl=15
  12. char id=39   x=112   y=32    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  13. char id=40   x=128   y=32    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  14. char id=41   x=144   y=32    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  15. char id=42   x=160   y=32    width=5     height=16    xoffset=0     yoffset=0     xadvance=6     page=0  chnl=15
  16. char id=43   x=176   y=32    width=5     height=16    xoffset=0     yoffset=0     xadvance=6     page=0  chnl=15
  17. char id=44   x=192   y=32    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  18. char id=45   x=208   y=32    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  19. char id=46   x=224   y=32    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  20. char id=47   x=240   y=32    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  21. char id=48   x=0     y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  22. char id=49   x=16    y=48    width=3     height=16    xoffset=0     yoffset=0     xadvance=4     page=0  chnl=15
  23. char id=50   x=32    y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  24. char id=51   x=48    y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  25. char id=52   x=64    y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  26. char id=53   x=80    y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  27. char id=54   x=96    y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  28. char id=55   x=112   y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  29. char id=56   x=128   y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  30. char id=57   x=144   y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  31. char id=58   x=160   y=48    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  32. char id=59   x=176   y=48    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  33. char id=60   x=192   y=48    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  34. char id=61   x=208   y=48    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  35. char id=62   x=224   y=48    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  36. char id=63   x=240   y=48    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  37. char id=64   x=0     y=64    width=8     height=16    xoffset=0     yoffset=0     xadvance=10    page=0  chnl=15
  38. char id=65   x=16    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  39. char id=66   x=32    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  40. char id=67   x=48    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  41. char id=68   x=64    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  42. char id=69   x=80    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  43. char id=70   x=96    y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  44. char id=71   x=112   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  45. char id=72   x=128   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  46. char id=73   x=144   y=64    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  47. char id=74   x=160   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  48. char id=75   x=176   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  49. char id=76   x=192   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  50. char id=77   x=208   y=64    width=7     height=16    xoffset=0     yoffset=0     xadvance=8     page=0  chnl=15
  51. char id=78   x=224   y=64    width=7     height=16    xoffset=0     yoffset=0     xadvance=8     page=0  chnl=15
  52. char id=79   x=240   y=64    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  53. char id=80   x=0     y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  54. char id=81   x=16    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  55. char id=82   x=32    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  56. char id=83   x=48    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  57. char id=84   x=64    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  58. char id=85   x=80    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  59. char id=86   x=96    y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  60. char id=87   x=112   y=80    width=7     height=16    xoffset=0     yoffset=0     xadvance=8     page=0  chnl=15
  61. char id=88   x=128   y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  62. char id=89   x=144   y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  63. char id=90   x=160   y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  64. char id=91   x=176   y=80    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  65. char id=92   x=192   y=80    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  66. char id=93   x=208   y=80    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  67. char id=94   x=224   y=80    width=7     height=16    xoffset=0     yoffset=0     xadvance=8     page=0  chnl=15
  68. char id=95   x=240   y=80    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  69. char id=96   x=0     y=96    width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  70. char id=97   x=16    y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  71. char id=98   x=32    y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  72. char id=99   x=48    y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  73. char id=100  x=64    y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  74. char id=101  x=80    y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  75. char id=102  x=96    y=96    width=5     height=16    xoffset=0     yoffset=0     xadvance=6     page=0  chnl=15
  76. char id=103  x=112   y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  77. char id=104  x=128   y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  78. char id=105  x=144   y=96    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  79. char id=106  x=160   y=96    width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  80. char id=107  x=176   y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  81. char id=108  x=192   y=96    width=3     height=16    xoffset=0     yoffset=0     xadvance=4     page=0  chnl=15
  82. char id=109  x=208   y=96    width=10    height=16    xoffset=0     yoffset=0     xadvance=11    page=0  chnl=15
  83. char id=110  x=224   y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  84. char id=111  x=240   y=96    width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  85. char id=112  x=0     y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  86. char id=113  x=16    y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  87. char id=114  x=32    y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  88. char id=115  x=48    y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  89. char id=116  x=64    y=112   width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  90. char id=117  x=80    y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  91. char id=118  x=96    y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  92. char id=119  x=112   y=112   width=10    height=16    xoffset=0     yoffset=0     xadvance=11    page=0  chnl=15
  93. char id=120  x=128   y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  94. char id=121  x=144   y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  95. char id=122  x=160   y=112   width=6     height=16    xoffset=0     yoffset=0     xadvance=7     page=0  chnl=15
  96. char id=123  x=176   y=112   width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  97. char id=124  x=192   y=112   width=2     height=16    xoffset=0     yoffset=0     xadvance=3     page=0  chnl=15
  98. char id=125  x=208   y=112   width=4     height=16    xoffset=0     yoffset=0     xadvance=5     page=0  chnl=15
  99. char id=126  x=224   y=112   width=16    height=16    xoffset=0     yoffset=0     xadvance=15    page=0  chnl=15
  100.  
The Bitmap Font is here (It's white with transparency, so it's probably hard to see):



Some configurations of GameObjects that I thought might be important:



What can I do to fix my font problem?


Greetings
BrightBit
Logged

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Bitmap Font is not pixel perfect
« Reply #1 on: February 21, 2014, 03:01:36 PM »
Your label can never be pixel perfect as it's in world space. Only 2D UI set in screen space with UIRoot set to Pixel Perfect can be pixel perfect. You are not even using UIRoot. The best you can do is set the atlas texture to mip-mapped, trilinear filtered with anisotropic filtering set to 4 or 8.
Logged

BrightBit

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 21
    • View Profile
Re: Bitmap Font is not pixel perfect
« Reply #2 on: February 22, 2014, 06:24:41 AM »
Thank you ArenMook,

I tried that before but the Game Tab of Unity's Editor was showing artifacts nonetheless. However, I tried it again and the actual game application seems to be pixel perfect, so that's good enough for me.

Yet, there's another thing that you might should know: The boundaries of sprites are slightly off. Here's an image to show you what I mean:



So the NGUI handles and Box Collider will start half a pixel next to the actual sprite.
Logged

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Bitmap Font is not pixel perfect
« Reply #3 on: February 22, 2014, 11:07:40 AM »
Half pixel offset happens on windows machines. You can read up on that oddity if you like. Just google "half pixel offset dx9".
Logged

BrightBit

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 21
    • View Profile
Re: Bitmap Font is not pixel perfect
« Reply #4 on: February 23, 2014, 06:30:33 AM »
Hi again, :)

I already know the half pixel offset problem caused by some UV mapping differences between OpenGL and DirectX but that's nothing that can't be fixed, isn't it? Can't you change the calculations of the collider boundaries accordingly? E.g. with a macro that asks if the user is using windows?


Greetings
BrightBit
Logged

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Bitmap Font is not pixel perfect
« Reply #5 on: February 23, 2014, 12:38:33 PM »
The drawing is offset by half a pixel so that the images come out crisp. Nothing else is offset.
Logged
Pages: [1]
« previous next »