Search Unity

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

[Solved] How to create a thick Text Outline?

Discussion in 'UGUI & TextMesh Pro' started by Deleted User, Nov 7, 2015.

  1. Deleted User

    Deleted User

    Guest

    I've added the "Outline" component to a UI object with a Text component and it adds a thin outline to it. I'd like to make it a lot thicker but cannot figure out how to do this.
     
  2. Deleted User

    Deleted User

    Guest

  3. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    You can change the Effect Distance for X and Y but if you increase the values too much, it won't look good since this FX is done by stamping 4 copies of the text. Be aware that using these Ui Effect greatly increase the geometry count and have significant performance impact.
     
  4. liortal

    liortal

    Joined:
    Oct 17, 2012
    Posts:
    3,562
    Deleted User likes this.
  5. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    If you need more flexibility, you can always take a look at TextMesh Pro. When it comes to Outline and Shadow those visual styling effects can be added dynamically by tweaking material properties. See the following gif.



    Once you achieve the visual look you desire, you can create a Material Preset which then allows you to assign these to any text object.

    In terms of performance, a text object using Outline and Soft Shadows in TextMesh Pro is more than 10X faster than Ui.Text with Outline and Shadow Effect. See the following information from a previous post for details.




    Top object is Ui.Text and bottom is TextMesh Pro.
     
    Last edited: Nov 12, 2015
    sonnyb, BitPax, ina and 2 others like this.
  6. Deleted User

    Deleted User

    Guest

    Shameless ad? :p

    Looks great.

    What's the performance like for mobiles?
     
  7. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Re-ran those tests on an iPad 2 where the text is updated each frame and here are the results from the profiler.
    Ui.Text ~0.55ms
    Ui.Text + Outline + Shadow ~3.30ms
    TMP + Outline + Soft Shadow ~0.41ms

    Basically, we get the same performance when using plain text (slight edge to TMP) but when adding Outline + Shadow, TextMesh Pro is more efficient.
     
    Last edited: Nov 13, 2015
  8. cowlinator

    cowlinator

    Joined:
    Mar 15, 2012
    Posts:
    69
    Sorry to dredge up an old thread, but I was having this problem and found this thread.

    None of the solutions here were ideal for me, but I found a good, lightweight solution.

    https://github.com/n-yoda/unity-vertex-effects
    (The component called 'CircleOutline' in particular)

    Open source & free, too!
     
  9. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Just be mindful these techniques duplicate the underlying geometry several times which can be crushing on performance especially on mobile devices.

    Unity's Outline FX depending on the device is about (3X / 4X) slower than plain text. The Outline increases the geometry count by 4X. So a single character which normally is 4 vertices in this case is 20 vertices.

    Using "The count is 100" with UI.Text (plain) is 72 vertices (as they are allocated in blocks). Ui,Text with Outline with the same text is 488 vertices. CircleOutline with the same text is over 1,100 vertices.

    In the case of this CircleOutline, it is twice as slow as UI.Text with Shadow + Outline which is already super slow (too inefficient for mobile use) and more importantly, it generate allocations (GC) every single frame which is even worst.
     
  10. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    I'm not sure this is considered lightweight. I would be concerned about the performance hit, specially on mobile.
    Specially since it needs to draw the text 61+ times, even for a relatively small outline.
    (And this does not support semi-transparent outline)
     
  11. Deleted User

    Deleted User

    Guest

    Now that TextMesh is included with Unity I have no problems. :)
     
  12. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    1,075
    Text Mesh Pro is no longer on the app store?

     
  13. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    ina likes this.
  14. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    1,075
    Stephan_B likes this.
  15. DanjelRicci

    DanjelRicci

    Joined:
    Mar 8, 2010
    Posts:
    308
    Since this thread is still open...

    NicerOutline causes a lot of GC.Collect spikes, and unfortunately I couldn't manage to improve it much. Currently I don't need the complexity of TextMeshPro for my project and I would like to just make some quick changes to the original Outline component. Is the source code of it somewhere?
     
  16. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The TextMesh Pro text component(s) do provide substantial added functionality and would provide better performance especially when it comes to visual styling of the text. Although the tool is more complex as a result of all the added functionality, at the basic usage level it isn't that much more complex than UI Text but will give you a lot more flexibility should you eventually need it.

    Using the Unity FX Outline and / or Shadow scripts results in a potential of more than 4X geometry count increase which can have significant performance impact on mobile devices. In addition, the Outline and / or Shadow still looks bad. Other scripts that try to create nicer looking Outlines increase the geometry count even more thus further impacting rendering performance.

    If you are using Unity 2018.1, be sure to use the package manager version. The latest release of TMP for Unity 2018.3 includes the new Dynamic SDF system which makes managing font assets / character sets much more easier in regards to localization.
     
  17. DanjelRicci

    DanjelRicci

    Joined:
    Mar 8, 2010
    Posts:
    308
    Thanks. To be more specific for my project...
    - Game is not mobile
    - Font must be dynamic, not bitmap, to have fallback to missing characters and complex languages
    - Font is pixel-perfect with a 1px outline
    - Texts with outline are really few

    I will try TMP anyways though I'm not a big fan of it (but does it support Dynamic fonts? Can't remember).
    My idea is dead simple anyways. It would be to sill use the standard Outline, but rendering the four shadows in a "x" pattern instead of a "+". Nothing more than that really.
     
  18. DanjelRicci

    DanjelRicci

    Joined:
    Mar 8, 2010
    Posts:
    308
    Up.
    I managed to fix all the GC spikes on the original NicerOutline script, was much easier than expected. Code is here for everyone.
     
    protopop likes this.
  19. ProgrammingWhileSleeping

    ProgrammingWhileSleeping

    Joined:
    Nov 10, 2017
    Posts:
    17
    Hi @Stephan_B , not sure if this is the right place to ask. I'm using Arial Black and it doesn't seem to be affected much by the Material Outline in TMP. Any suggestions?
     
  20. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The Ratio of Sampling Point Size to Padding determines the effective range of material properties like Dilation, Outline, Underlay Offset, etc.

    What is the Sampling Point Size and Padding of your font asset?
     
  21. ProgrammingWhileSleeping

    ProgrammingWhileSleeping

    Joined:
    Nov 10, 2017
    Posts:
    17
    Thanks for your response Stephan. It's currently 77 and 1 respectively.
     
  22. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The above values results in a sampling point size to padding ratio of 1.2% which in turn means the outline can only be about 1.2% of the size of the face of the text.

    As per my previous posts, the effective range of material properties like Dilation, Outline, etc. is determined by the Sampling Point Size to Padding ratio. A typical ratio to use is about 10% where in this case, your padding values would need to be about 7 ~ 8.

    Simply regenerate your font asset to increase the ratio.

    P.S. There are several posts / threads about Sampling Point Size to Padding ratio. I would suggest doing on search on those to get additional information.
     
  23. ProgrammingWhileSleeping

    ProgrammingWhileSleeping

    Joined:
    Nov 10, 2017
    Posts:
    17
    Thanks Stephan, I am getting a blurry font atlas when I do that though. Any suggestions when that happens? Thanks!
     
  24. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,733
    Isn't there a simpler method than using the TextMeshPro feature?
    Textmesh Pro will generate a new TMP asset for every type of outline text per settings (thickness, color, etc...)