{"id":2074,"date":"2025-02-14T14:07:25","date_gmt":"2025-02-14T14:07:25","guid":{"rendered":"http:\/\/nikolapacekvetnic.rs\/?p=2074"},"modified":"2025-02-26T23:21:51","modified_gmt":"2025-02-26T23:21:51","slug":"pixel-perfect-text-in-unity","status":"publish","type":"post","link":"http:\/\/nikolapacekvetnic.rs\/?p=2074","title":{"rendered":"Pixel Perfect Text in Unity"},"content":{"rendered":"\n

In this article we will take a look at the solution of the pixel perfect font problem in Unity as I implemented it for my currently developed game SODHARA<\/span><\/a>. Unity, given that it is a modern tool geared towards high res output, is not particularly friendly to the retro-inspired style of the yesteryear – the script presented in this article is one of the ways in which this hurdle can be overcome.<\/p>\n\n\n\n

1 Overview<\/h2>\n

In SODHARA<\/span><\/a> I use TextMeshPro<\/code><\/span> text components for everything text related. I use pixel perfect bitmap fonts in which all the glyphs’ sizes should be integer values, and the resolution is low enough so that each “pixel” (or, rather, a constituent square) of each glyph should correspond to a single pixel on screen.<\/p>\n

The truth is however that these fonts are not perfect, and the problem is mostly with padding<\/span>. This means that for the left (or right) aligned text the first glyph will probably be set properly but then the next one will note be an integer value pixels away, which will accumulate after a while and present rather unpleasant artifacts. Much bigger problem lies in centered text<\/span>, since usually not even the first glyph is properly set in such a case.<\/p>\n

This can be somewhat circumvented by carefully placing the text objects on screen<\/span> so that, even though their position lies between pixels, the text itself is rendered properly. This only works if the resolution of the game is 1:1<\/span>, i.e. if one pixel of the graphics corresponds to one pixel on screen. However, this approach yields diminishing results as one introduces features such as localization, template strings, and any process which tampers with the strings in runtime<\/span>, thus making it impossible to place the objects properly in advance.<\/p>\n

To get my point across, please consider images 1-4, whereas the odd ones are taken from the editor and the even ones are in-game screenshots.<\/p>\n\n\n\n

\"\"
Image 1. Centered text (font Uni 05_x by Craig Kroeger<\/a>) in Editor.<\/figcaption><\/figure>\n\n\n\n
\"\"
Image 2. Centered text (font Uni 05_x) in game.<\/figcaption><\/figure>\n\n\n\n
\"\"
Image 3. Centered text (font 5MikroPix by Winter Design Studios)<\/a> in Editor.<\/figcaption><\/figure>\n\n\n\n
\"\"
Image 4. Centered text (font 5MikroPix)<\/a> in game.<\/figcaption><\/figure>\n\n\n\n

Whenever a glyph pixel founds itself in a sub-pixel position<\/span> it will be “rounded” to the closest integer<\/span> value, which, in case of being around the center of the pixel, means it will appear in two places<\/span> at once, yielding “chunky” and irregular glyphs<\/span> (both in case of letters and spaces) all over the text. What’s worse, in case of dynamic text, the glyphs will change width and shape based on their (changing) position<\/span>, which I find truly horrendous.<\/p>\n

The solutions I found online usually boil down to either moving the entire text object<\/span> to such a sub-pixel position that will “trick” the rounding process and make the text snap into place, or using custom scripts that snap the text to grid<\/span>. As I stated previously, the first solution is problematic when one has to deal with varying text, i.e. when localization is involved, and it is near impossible to achieve with centered text. The second solution seemed more plausible, but none of the users that mentioned it shared the scripts they use. Thus, I decided to write my own.<\/p>\n\n\n\n

2 Pixel Perfect Text Enforcer<\/h2>\n

Retro-styled games usually use a small number fonts – SODHARA<\/a> in particular uses three, so the first step was to describe all the fonts used<\/span> in order to have relevant info on each of them in one place. The class I used is shown in listing 1.<\/p>\n

\n
public<\/span> class<\/span> CharSpacingInfo<\/span>\n{<\/span>\n    public<\/span> bool<\/span> IsFontMonospaced =<\/span>><\/span> _fixedCharWidth ><\/span> 0<\/span>;<\/span>\n    public<\/span> int<\/span> SuggestedWidthFor<\/span>(<\/span>float<\/span> width)<\/span> =<\/span>><\/span> \n        IsFontMonospaced ?<\/span> _fixedCharWidth :<\/span> (<\/span>int<\/span>)<\/span>(<\/span>width \/<\/span> _pixelSize)<\/span>;<\/span>\n\n    public<\/span> int<\/span> _pixelSize;<\/span>\n    public<\/span> int<\/span> _fontSize;<\/span>\n    public<\/span> int<\/span> _fixedCharWidth;<\/span>\n    public<\/span> int<\/span> _interCharSpaceWidth;<\/span>\n    public<\/span> int<\/span> _whitespaceWidth;<\/span>\n\n    public<\/span> CharSpacingInfo<\/span>(<\/span>\n        int<\/span> pixelSize,<\/span> int<\/span> fontSize,<\/span> int<\/span> fixedCharWidth,<\/span> \n        int<\/span> interCharSpaceWidth,<\/span> int<\/span> whitespaceWidth)<\/span>\n    {<\/span>\n        _pixelSize =<\/span> pixelSize;<\/span>\n        _fontSize =<\/span> fontSize;<\/span>\n        _fixedCharWidth =<\/span> fixedCharWidth;<\/span>\n        _interCharSpaceWidth =<\/span> interCharSpaceWidth;<\/span>\n        _whitespaceWidth =<\/span> whitespaceWidth;<\/span>\n    }<\/span>\n}<\/span><\/code><\/pre>\n
\n