Search Unity

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

[Text] Possible effects?

Discussion in 'UGUI & TextMesh Pro' started by NelsonPRSousa, Nov 30, 2015.

  1. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    Hello,

    I am making my first mobile game and I've one question: is possible to replicate this text effect in Unity3D? I am using Unity UI.

    Thank you for your reply :)
     

    Attached Files:

    • text.png
      text.png
      File size:
      105.2 KB
      Views:
      1,293
  2. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
  3. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    Isn't possible to do it without costs? :/

    Thank you for your reply :)
     
  4. hippocoder

    hippocoder

    Digital Ape

    Joined:
    Apr 11, 2010
    Posts:
    29,723
    If you make the shaders yourself.
     
  5. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    Is that hard to learn? I've read docs from shaders and don't quiet understood
     
  6. hippocoder

    hippocoder

    Digital Ape

    Joined:
    Apr 11, 2010
    Posts:
    29,723
    Probably. Have you tried searching? Game dev isn't the easiest thing if you don't want to pay anything. You can try searching for shaders. Some are free. I haven't seen any specifically text ones for free (these are transparent shaders, typically).
     
  7. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    Hmm, okay, thank you for your reply. I'll take a closer look! :)
     
  8. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    What font (ttf) is used in the example you posted?
     
  9. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    Hello, thank you for your reply.

    I am using komika.

    I think I downloaded it from http://www.dafont.com/pt/komika-axis.font

    Have a nive day!
     
  10. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
  11. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
  12. NelsonPRSousa

    NelsonPRSousa

    Joined:
    Jan 10, 2014
    Posts:
    43
    What can I do to reduce that impact?

    I don't understood your P.S.

    Thank you for your reply.
     
  13. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Nothing really as those FX are designed that way.

    I wanted to create an example of that visual style / FX using TextMesh Pro just to see how close I could get to matching it. It is good testing :)

    upload_2015-12-1_18-46-9.png

    For this example, I created a font asset using the font (ttf) you referenced. The same font asset is used in these 4 examples where I simply have different material presets assigned to the text objects. The first (top) is plain text without any material tweaks. The second uses a material with an outline. The third has a material with a soft shadow and the last one using beveling and soft shadow. In all 4 cases, the geometry is the same which is 2 triangles per character.

    The blur effect could be done by using an Environmental map on the text object.
     
    Last edited: Dec 2, 2015
  14. Nikola-B

    Nikola-B

    Joined:
    Jan 31, 2014
    Posts:
    42
    That last visual effect with the highlight looks very nice.
     
  15. Alex Storm

    Alex Storm

    Joined:
    Jul 21, 2014
    Posts:
    11
    Can those characters still be animated like in this example you posted before?

     
  16. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    can you recommend anything to read - how to write shaders for UI elements like Text ?
     
  17. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Yes. The visual style of the previous example of text is just done by adjusting the material properties whereas these dangling letters are achieved by simply adjusting vertex positions using an extra script. In this example the position of the vertices if offset to the top middle before applying a matrix rotation to create the dangling FX. See the following video which in the explains how these types of things are done.

    In order to do these types of things you'll need to learn about shaders but also about Signed Distance Field which is what makes doing these types of visual fx possible. Instead of using a bitmap to represent the shape of individual characters, this data is encoded into a texture using Signed Distance Field.

    There is lots of information on the internet about Signed Distance Field which is what TextMesh Pro uses to render the text but not really any resources in the context of how to write shaders for text leveraging signed distance field in Unity.

    The whole Signed Distance Field thing has been used in the medical field for decades but Valve was the first company to use it in the context of text rendering for games. Here is a link to their white paper.

    The shaders certainly play a significant role in TextMesh Pro but the layout engine with improved text formatting capabilities is as significant. Then the overall performance is key as well as it also matches or out performs Ui.Text in all aspects while providing much greater functionality.
     
    Last edited: Dec 12, 2015
    hippocoder likes this.
  18. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    Is there a source code of the original UI.Text renderer shader? That would be a good start coz all I want is to write a frag shader effect. I'd just modify a standard UI.Text renderer shader but I cant find it.
     
  19. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    When you go to the Unity Download section, there is the pull down for Additional Downloads. In there you will find the built-in shaders.
     
    vladstorm_ likes this.
  20. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    thank you. i downloaded them. do you know which one is responsible for ui.text rendering ?
    i found UI-Unlit-Text.shader and UI-Unlit-TextDetail.shader . Can I just modify them and add to the UI.Text Element? or there's some more magic ?)
     
  21. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    You would create your own Shader based on any of the Unity shaders and then create a new material to which you would assign your shader. You would then assign the material to the text object.
     
    vladstorm_ likes this.
  22. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    yea. this i know. i just was wondering are these shaders are the right ones to modify to make text effect or not.
     
  23. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    also, in the source code , there's not vert/frag parts. can i just add them? unity shaders are sometimes confusing)
     
  24. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    184
    ok, i made it work. i found out that i have to modify UI-Default.shader.
    but it seems like it modifies each character separately.
    How can I make the whole text effect?
    Which shader is responsible for that ?
    Maybe I can start with modifying Text Shadow Effect? but I can't find a shader for that :<
     
    Last edited: Dec 14, 2015