Search Unity

Add Outline Outside of Underlay

Discussion in 'UGUI & TextMesh Pro' started by Finijumper, Jan 17, 2021.

  1. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    Hi, I'm trying to achieve a text effect similar to the text in Homescapes when you finish the level:



    But the problem is that when I try to add an Outline effect and an Underlay I get this result, the Outline doesn't go outside of the Underlay:



    The only solution I've found is to use multiple TextMeshPro texts, 3 in total, this is the result I'm getting:



    But this might affect performance since my game is running on mobile devices and I will also be adding vertex animation so it will be a problem to handle multiple texts in slightly different positions.

    Is there a way to do it only using one TextMeshPro element?

    Thanks, I hope you can help me :)
     
    Last edited: Jan 20, 2021
  2. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    There isn't a way to add an outline that is drawn outside of the underlay?
     
  3. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Would you be able to achieve the desired look if you could offset the Outline or Glow just like you can for the Underlay?
     
  4. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    Thanks for your reply. If the outline was offset lets say a positive value on the Y axis then it couldn't be seen from the top and only at the bottom right? If so then I wouldn't be able to achieve the desired result, which is this (that I've achieved using 3 TMPro texts):


    As you can see there's the orange Underlay at the bottom and an Outline covering the outside of the letter.
     
  5. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Here is a preview of what will be possible with the new Shader Graph shader(s) which already includes support for Face + 3 Outline + Underlay to which as per your feedback / request the ability to offset those outlines was added.

    upload_2021-1-22_17-6-53.png

    Here is another example.

    upload_2021-1-22_17-34-52.png

    The shader graphs / shaders are in good shape. I still need to finish the custom material inspectors as without them, there is no sanity check on material property values which can lead to blowing up the material where the text turns into a solid square or as seen above bleeds into the adjacent character. But achieving this type of fake 3D look will definitely be possible.
     
    Lurking-Ninja likes this.
  6. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    It looks awesome! That's exactly what I'm trying to achieve :) Can't wait to try them.
     
  7. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    @Stephan_B are the Shader Graph shaders available to the public yet?
     
  8. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    79
    Hi @Stephan_B, do you think it's possible to achieve that effect using only 1 text object in the current version of TMP?
     
  9. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    You should be able to achieve those results with the latest SRP shaders included in version 3.2.0-pre.3 of the TMP package for Unity 2020.3 or newer.

    Note that you will need to re-import the TMP Essential Resources which contain these new SRP shaders.
     
  10. doseon

    doseon

    Joined:
    Mar 17, 2021
    Posts:
    39
    HI @Stephan_B Is the effect not available in the built-in pipeline?
     
  11. ddfanns83

    ddfanns83

    Joined:
    Oct 18, 2022
    Posts:
    1
    Any idea how they achieved animation/bouncy effects of the letters? :)