Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

TextMesh Pro Underlay Offset Measurement

Discussion in 'UGUI & TextMesh Pro' started by jonahyakuto, Jan 18, 2019.

  1. jonahyakuto

    jonahyakuto

    Joined:
    Mar 9, 2017
    Posts:
    11
    Hello,

    Is there any way to know the measurements of these offsets? What does -1 offset translate to? I need as pixel perfect measurement as possible.
    Screenshot 2019-01-18 at 15.13.05.png
    Thanks in advance!
     
  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The range of the material properties is based on the ratio of sampling point size to padding when the font asset was created. So if a font asset has a sampling point size of 100 with padding of 10 or 10% then the effective range of the underlay at value of 1 or -1 will be half of a font asset whose sampling point size is 100 with padding of 20.

    Using normalized values ensures that as you increase or decrease the point size of the text, that the outline or underlay, bevel, glow, etc. all remain proportional to the text whereas if this was in pixel size, it would not be consistent.

    When creating font assets, I typically use a ratio of 10% between sampling point size and padding. This give me a decent range to work with. If I plan to use a font asset for a big title where I need a larger range, then I simply increase this ratio of sampling to padding.

    It is also important to maintain this ratio on any fallbacks to ensure the thickness also remains consistent between them. So if the primary font asset has a sampling of 100 with padding of 10. The fallback can have sampling of 60 with padding of 6.
     
  3. jonahyakuto

    jonahyakuto

    Joined:
    Mar 9, 2017
    Posts:
    11
    Thank you for the quick and comprehensive response!
    I did some quick little test querying
    Code (CSharp):
    1. renderer.bounds
    and I found these results:
    Screenshot 2019-01-18 at 22.22.46.png
    On 50pt font size, both width and height grew by 8.125 (35.35% and 21.52% respectively)
    On 100pt font size, both width and height grew by 16.25 (35.35% and 21.52% respectively)

    I am using LiberationSans as the font asset with these settings:
    Screenshot 2019-01-18 at 22.06.13.png

    The point size is 100 and the padding is 10 which from what I understood from your response I should expect the underlay to add 10% to the original size. However as the image above shows, I don't get that number, instead I get 35.35% for width and 21.52% for height. I wonder where these numbers are from.
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    That was actually the short answer as there is more to this ...

    When using Bitmap render modes, the safe space around each glyph is the padding value which results in a space of 2X padding between each glyphs.

    When using Signed Distance Field, the space between each glyphs is 2x padding + 1 since the distance field data extended in this padding area where this 1 pixel between all of them is a value of zero.

    Since we can't have any portions of the visual styling reach outside the padding, as this would result in reading distance field data in the adjacent glyph, the custom material inspector used by TMP keep tracks of the values and computes ratios to prevent these values from exploding / breaking the visual material. These ratios restrict the reach of properties like Dilation, Outline, Underlay, etc. It also has to account for bold text which when simulated is Dilates / makes the glyphs larger which results in them taking extra space in the padding thus limiting the other properties listed above.

    Here is an image of a glyph using sampling point size of 100 with padding of 10. This glyph is displayed at 100 pts or 1:1 and happens to have a width of 100.

    In this image I have disabled the "Use Ratios" in the debug section of the Material Inspector. I am using Underlay offset of 1, -1. As you can see the glyph is 100 pixels width and the shadow is padding + 1 offset in both x and y axis.

    upload_2019-1-18_15-58-40.png

    You can see a smudge on the left side of the image which is a piece of the adjacent glyph showing up since ratios are disabled.

    In this example, I am only using Underlay Offset but if I was to also add Dilation or Outline, I would end up with a blown up / bad looking glyph which is what these Ratios work to prevent. But like I said before these ratios do end up restricting the range of these properties.

    All this to say that a 10% ratio of sampling to padding results in about 10% + / - which in the example above given I am using a sampling point size of 100 with padding of 10 and displaying the glyph at 1:1, we end up with 11 pixels. If the displayed point size changes, the shadow would remain proportionally spaced.

    P.S. Since bold might be used in a text object and we can't afford to have these ratios change when bold is used or not, the effective range is a bit truncated to make sure bold won't become an issue if the user was already using Dilation + Outline + Underlay.
     
  5. jonahyakuto

    jonahyakuto

    Joined:
    Mar 9, 2017
    Posts:
    11
    Thank you for explaining further!