Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.

Question How to force a font to look pixelated/low resolution

Discussion in 'UGUI & TextMesh Pro' started by jf065d, Dec 20, 2022.

  1. jf065d

    jf065d

    Joined:
    May 28, 2018
    Posts:
    17
    Hey all,
    When I use a font in photoshop, and make it super small, it becomes pixelated. I'm trying to replicate this pixelated look within my unity project, but all of my attempts still result in a smooth looking font. Please see attached for reference.

    Here's what I've attempted, but I'm new to Unity/TextMeshPro so I can certainly be missing something. I'm obviously just guessing at possible solutions here, lol:
    1. Reduce font size while increasing TextMeshPro object scale
    2. Adjusted with TextMeshPro front Asset Scale, Sampling Point Size, Atlas Width/Height
    3. Adjusted the imported Font File Font Size and Rendering Mode
    4.Created a new Canvas with a UI Scale Mode set to Scale With Screen and reduced the Reference Resolution and Reference Pixels Per Unity

    To get this effect with a sprite is super easy: just create the object in low resolution and then increase the Pixels Per Unity once imported. But I can't seem to get the same effect with fonts.

    Any thoughts? Is there a term(s) for this I should be using to search with for this topic?

    Thanks!
     

    Attached Files:

  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    32,178
    I think you need:

    - a UI-text-capable variant of the Transparent Cutout shader (see it in action under the legacy shaders or grab one off the net)
    - a non-filtered version of the TMPro Texture, which by default is filtered

    I don't have the second part easily doable here, but here's what the first part (cutoff) gets you, the sharp edge (left is cutoff obviously):

    Screen Shot 2022-12-20 at 7.00.10 AM.png

    Once the font texture has been set to Point sampling then I think you'd get what you want.

    That's just using the legacy Unlit/Transparent Cutout shader: (Play with that Alpha cutoff)

    Screen Shot 2022-12-20 at 7.01.53 AM.png
     
  3. jf065d

    jf065d

    Joined:
    May 28, 2018
    Posts:
    17
    Thank you very much for the guidance! I'm going to have to read it over a few more times and play around to see if I can get it to work. It seems pretty surprising I can't simply make a super small canvas with large font lol.
     
  4. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    32,178
    Yanno, come to think of it... maybe you can get close that way... But I don't think the pixel edges will be "hard" the way you want them. The font system will still try to anti-alias it, which was the point of the shader hack above.