Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[uGUI] possible but with Text

Discussion in 'UGUI & TextMesh Pro' started by barzoon, Sep 3, 2014.

  1. barzoon

    barzoon

    Joined:
    Aug 17, 2012
    Posts:
    7
    While trying to make text size scale with aspect ratio changes/resolution changes I set it to "Best fit". It seemed to work perfectly in the editor but the second I built it for Android I saw massive fps drops when ever I changed the text of that Text object at runtime.
     
  2. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The frame drop is related to all those bitmap characters being added to the font atlas / texture for all those point sizes. If your auto-size goes from small to a larger point size, that font atlas / texture will also be growing in size (it doesn't take much to grow to a 2048 X 2048 or even 4096 X 4096) texture. You can check this by selecting the font (arial for instance) and expanding the font to reveal the texture and look at it in the preview.

    Dynamic texture atlasing is nice when dealing with large character sets like Chinese, Korean and Japanese as the Atlas is built on demand but on the flip side, the downside is the overhead and impact of adding all those mostly duplicate characters to handle different font sizes or bold treatment for instance.
     
    barzoon likes this.
  3. barzoon

    barzoon

    Joined:
    Aug 17, 2012
    Posts:
    7
    So what would be the best way to create text that scales with aspect ratio/resolution in 4.6?
     
  4. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    8,758
    Probably use a Reference Resolution?
     
    barzoon likes this.
  5. barzoon

    barzoon

    Joined:
    Aug 17, 2012
    Posts:
    7
    A reference resolution seems to be a solid replacement to best fit for text and yields better performance but I still have visible fps drops with text changes :(
     
  6. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    Use an sdf based solution. Don't have to look far for the absolute best option , check Stephan signature... :)
     
  7. bluescrn

    bluescrn

    Joined:
    Feb 25, 2013
    Posts:
    640
    I suspect we'll end up with a load of alternate text rendering systems on the store. It's always something that Unity has been a bit weak at, and I don't think there really is a one-size-fits-all solution. Dynamic fonts have advantages, but also clear disadvantages when it comes to performance, or if you want 'gamey' fonts with baked in glows/bevels/outlines etc.

    SDF systems also have their advantages and disadvantages. TextMeshPro looks impressive for higher-end platforms, but for mobile, I think I'll be after a straightforward BMFont-based bitmap font system, as included in NGUI and 2DToolKit. Not the optimal solution for text quality, but it's good enough in most cases - and more importantly, it's fast, uses simple shaders, is reasonably scalable (with mip bias+mipmaps at least) - and lets you insert custom glyphs (e.g. controller buttons, game currency icons) in full colour.
     
  8. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    In terms of performance, TextMesh Pro still uses a static font texture atlas (SDF) which means it has no performance overhead just like a static bitmap font texture generated with BMFont. Both of these static font atlas yield improved performance over Unity's dynamic font system which needs to add characters to a texture at run time which has a performance overhead.

    TextMesh Pro's SDF font assets (atlas) are typically smaller than their bitmap counterpart for the same number of characters. The tool to create these font assets is built-in saving you precious time when it comes to font atlas creation. One significant advantage of using TextMesh Pro's SDF text rendering is that ONLY ONE font asset is needed per font style (ie. Arial, Impact, Helvetica, etc) to display clean / sharp text at all sizes, resolutions and zoom factor as well as variants with strokes, shadows, glow, outlines, etc. vs. numerous font atlas when using bitmap atlases. This combined with the font assets being smaller in size can be a huge saving in terms of package size and resource handling.

    In terms of geometry TextMesh Pro uses the same (2) triangle / Quad per character which performs on par with bitmap fonts.

    With respect to the shaders, TextMesh Pro's shaders were highly optimized for both desktop and mobile platforms. All shaders are Shader Model 2.0. In all performance benchmarks (desktop and mobile platforms) TextMesh Pro's mobile shader performed either better or on par with Unity's plain text shaders.

    Here is a link to a post which contains a video comparing the performance and visual quality of Unity's Text Mesh vs. TextMesh Pro.

    See the following post for additional information on shaders. Also in the TextMesh Pro WIP as well as Asset Store Thread, there is tons of information about all aspects of TextMesh Pro.
     
    Last edited: Sep 7, 2014
    ortin and bluescrn like this.
  9. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    I agree that you get a benefit by mixing pre-rendered font character and other glyph in the same atlas,
    but at most this allow you to save one draw call per paragraph when it include some glyph.

    I dont think performance is a factor that comes into play when choosing bitmap or SDF for UI text.
    Even shader complexity, SDF is pretty simple at its core.

    Code (CSharp):
    1.  
    2.         fixed4 PixShader(pixel_t i) : COLOR
    3.         {
    4.             return i.faceColor * saturate(tex2D(_FontTex, i.texcoord0).a * i.p.x - i.p.y);
    5.         }
    6.  
    So the best reason to pick bitmap font is if you are making a custom pixel font,
    otherwise you are making your job harder and limit your visual quality, and most likely end-up with a large install size.

    Hands on experience from a team moving from bitmap font to SDF (Unite presentation @ 29:52).



    I dont have hard numbers, but consider modern mobile devices and creating a font that work with dynamic resolution.
    We are now looking at scaling from 4096x3072 down to 800x480 and for a '1:1' bitmap font this require 4 level of mipmap and in turn a padding of 8 pixels on each side, for 64x64 character (on the 4K display) thats 50% wasted space on the top level map. (3.5 MByte of blank space in the texture)
    And thats just to cover the dynamic resolution, if you plan to scale the UI up/down, you need to have a larger size top level if you dont want the text to get blurry (and this might not be possible if you limit yourself to 2kx2k textures), and you will need more padding to generate down level mipmap so you can down scale without artifacts.

    And like you hinted mipmaped font with bilinear or trilinear is not ideal for text quality.

    You can alleviate the padding issue by using/managing multiple bitmap font asset, but then you forgo smooth scaling and you have to manage asset based on device resolution yourself.

    Yet, the biggest issue I see, you get no real world benefits for jumping through hoops and using bitmap font,
    its more time consuming to create, and because its all baked you cant animate much at run-time.
    Want a different outline color ? switch to two pass with an outline shader, or built another set of bitmap font that you have to manage at runtime.
    Want version with a soft shadow? another set of bitmap font. (merged to keep it one pass, or separate and 2 pass)
    How about bold? or maybe another texture on the face? etc...

    Also a big one, people need to use "pixel perfect" text with bitmap font. If you dont your text gets a little blurry.
    This limit you in many ways. From smooth scrolling to scaling and even layout.
    SDF delivers "Sub pixel perfect" result. For UI / layout this alone can be a nice benefit over bitmap fonts.
    Minor thing, but this allow sub pixel kerning, very nice to have with cursive text at any size.

    Bitmap based font rendering is not going away, but its anything but straightforward :)
     
    Last edited: Sep 7, 2014
    bluescrn likes this.
  10. bluescrn

    bluescrn

    Joined:
    Feb 25, 2013
    Posts:
    640
    I guess I should give SDFs another look. Last time I tried (not in Unity), there weren't many tools available, and I didn't have much success. I've also been under the (perhaps incorrect) impression that they're great for scaling up, but maybe not so great for scaling down.

    (I've also been able to get better-than-average results from scaled bitmap fonts in the past by using mipmapping, trilinear filtering, and a mipmap bias - wrote a little blog post about that a while back: http://inverseblue.com/?p=268 )
     
  11. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    Seem like you got bitmap font to look good with the right mip bias. Does it look smooth when scale is animated?
    I havent done much bitmapfont stuff in unity, but what you outlined should be included by anyone offering bitmap based font solution (when the font is expected to be scaled down 50% or more).

    SDF is actually good for downscaling, the bad reputation come from the math approximation used by many.
    Valve method is actually a root cause for this perception, as most implementation seem to copy their method verbatim. (TextMesh Pro does not use Valve method for computing alpha coverage/ AA)

    Having said that, some font (not all) can use a technique called hinting to better support super small size.
    This deform the font to align with a pixel grid. Reshaping the font in two ways, offset and thickness.
    And this is what make the biggest different for very small fixed size font.

    For reference Arial in Unity using SDF (no hinting)
    and bottom a version using Windows clear type rendering with hinting.

    Its an extreme case as the character are like 4x5 pixels, but it show how far down SDF can render font decently.

    smallVS.png

    note: For massive upscaling, there is also better other ways to reconstruct the edge distance then originally proposed by Valve.

    You can see the curve reconstruction from the two method using a low res SDF.

    HW bilinear
    Comic 256x256_l.png

    HW assisted bicubic
    Comic 256x256.png

    edit: by 'HW', I mean the GPU texture filtering unit
     
    Last edited: Sep 8, 2014
    bluescrn likes this.
  12. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    If the SDF is correctly implemented which it is in the case in TextMesh Pro, the text will look great at any size (large or small) There are examples of that in the TextMesh Pro WIP Thread as well as Asset Store Thread as well as this video which addresses the misconception of SDF only being good for scaling up.

    EDIT: Stephan S. Posted one of the example from the TextMesh Pro WIP thread just before I posted my reply :)