Search Unity

Text Mesh Pro - The Ultimate Text Solution for Unity - Powerful & Flexible - Advanced Text Rendering

Discussion in 'Assets and Asset Store' started by Stephan-B, May 29, 2014.

Thread Status:
Not open for further replies.
  1. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    If you take a look at the <sprite> tag and Sprite Asset Creation video, you will see that TextMesh Pro makes it possible to combine graphics inline with the text. The size of the sprite can be controlled relative to the size of the text.

    See the following video about the Sprite Asset Creation process and Sprite tag

     
  2. SmartCarrion

    SmartCarrion

    Joined:
    Jul 27, 2013
    Posts:
    27
    I'm looking for a text plugin that will work with Valve 'Lab Renderer' which requires you to use materials that utilize their shader. Would text mesh pro be compatible with that, or is it using its own custom materials for all text?

    Thanks!
     
  3. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    TextMesh Pro includes a set of custom shaders which to my knowledge works as expected with the HTC Vive. I do have several users using TextMesh Pro with Oculus Rift, HTC Vive and Hololens.

    Having said that, I have reached out to one of my users that I know is using TextMesh Pro with the HTC Vive and will confirm tomorrow if there are any issue with it and TextMesh Pro or with Valve's Lab.
     
  4. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I did check with one of my users who develops on the HTC Vive and the text renders cleanly and beautifully.
     
  5. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Let's call this Text Silliness with TextMesh Pro.



    How is this done?

    About two releases ago, I added the ability to automatically split the geometry of the text object to get around the Unity 65,535 vertices limit. As the text object reaches this vertices limit, the subsequent characters are added into a sub text object just like the fallback fonts / characters or sprites are handled.

    Given this geometry split limit can actually be set to different values like (1) character, it turns out that TextMesh Pro can automatically split up the text object into separate sub text objects. Then by simply adding a Collider and RigidBody to each sub object, you can then have them affected by Physics and other objects colliding with them.

    In this example, I had to manually add the Colliders and Rigidbody to each sub text object but this process can easily be automated.

    I find it interesting that the addition of one feature for a completely different purpose indirectly opens the door for other functionality :)
     
    Tinjaw likes this.
  6. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    New <mark> Rich Text Tag
    This new rich text tag makes it possible to highlight the text (characters) enclosed between the <mark> and </mark> tag.

    The tag format is : <mark=#FF00FF80> which defines the color + alpha of the Highlight (background) region.

    Here is an example.



    This is the raw text in the Text Input Box
    "<font="Bangers SDF" material="Bangers SDF - Drop Shadow"><mark=#ff000010>R1<mark=#00ff0010>G2<mark=#0000ff10>B3<mark=#00000064>A4"
     
    Tinjaw likes this.
  7. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    712
    Hi there I recently updated from Unity 4.6 to 4.7.2 and it seems Textmesh Pro is broken now....
    Flooded with Namespace errors.
     
  8. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The compiler conditionals needs to be updated. See the following post on the TextMesh Pro User Forum.

    You will need to be a registered member of the user forum to see that section of the forum.

    P.S. Here is the relevant information anyway
     
  9. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    712
    Hi, yeah I saw that before but I didn't think it was that simple haha! Thanks!
     
  10. Xenoch

    Xenoch

    Joined:
    Mar 3, 2014
    Posts:
    9
    Hi Stephan- I have a question...

    Will TextMeshPro allow me to insert a tag which tells the renderer where I want the text centered around?
    For instance, for a list of name-value pairs, I may want to put in text:

    Name:<centerHere>Value
    SomeMuchLongerName:<centerHere/>Blah

    Of course, a tag wouldn't be the only way to do this.. the functionality is what I'm interested in.

    Thoughts?
    Thanks
     
  11. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    By centering, do you mean positioning of the text?

    Do you have an example?
     
  12. Xenoch

    Xenoch

    Joined:
    Mar 3, 2014
    Posts:
    9
    In this text, each whole line is centered.

    What I would like is to center the colon : such that the colons all line up in (or around) the center and the text to each side grows either left or right.

    Right now, I would end up with around 40 text boxes all manually aligned with the left boxes right-justified and the right boxes left-justified.
     
  13. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    How do you see the block of text aligned inside the text container / RectTransform? Basically, you will have each line aligned based on the ":" but as a whole how is it aligned?

    Can you provide a mock-up of this aligned as you expect it?

    Here is a crude example created in Photoshop.

    upload_2016-8-28_15-23-19.png

    Is this what you are looking for?
     
    Last edited: Aug 28, 2016
  14. Xenoch

    Xenoch

    Joined:
    Mar 3, 2014
    Posts:
    9
    Yeah that is exactly it. I sort of said "in (or around) the center" because, so long as it lined up the colons (or whatever character or whatever tag) I guess the rest of it could act like normal justification- Left Justified would move the colons as far to the left as to make sure the left-side text would fit, center would try to place the colons in the center of the container, etc. I think the most useful thing would be the lining-up of the colons (or tags, or however is easiest to implement)

    Thanks a ton for looking into this for me!
     
  15. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Reflecting on this, I think this is another example where tables would make sense. This is a feature that I am currently working on.

    In the meantime, here is an example where I use the <pos> tag to control the location of the ":" colon.



    Here is the raw text from the Text Input Box



    The <pos> tag like most tags in TMP can be defined in pixel (px) units, font units (em) and percentage (%).

    Using the <pos> tag isn't ideal as it's position (% value) is based on the longest word on the left side and width of text container. Now some of this could be automated finding the longest word on the left to determine the optimum width the text container needs to have thing line up neatly.

    Here is an example where I changed <pos=50%> and made the text container too narrow. This should make it easier to understand what I meant by determining the width the container needs.



    Using the <pos> tag makes it possible to move the text around (even over previous characters).
     
    Last edited: Aug 29, 2016
    Xenoch likes this.
  16. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Added control over Word Spacing in the TextMesh Pro Inspector panel. This now provides control over Character, Word, Line and Paragraph spacing per object.

     
  17. Xenoch

    Xenoch

    Joined:
    Mar 3, 2014
    Posts:
    9
    This is as close to perfect as I could wish for. There are tons of variables and what-ifs, but I believe this solution gets us 95+% there. Thank you so much!



     
  18. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    I see that Text Mesh Pro seems to nicely render \t tab characters; is there a way to specify the indent size?

    I realise that the <pos> tag is a possibility here; but if possible I would rather specify the tab size that is used in the Text component.

    Many thanks
     
  19. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The Tab Size can be defined per Font Asset in the Font Asset Editor panel.

    BTW: There is also an <indent> tag available as well.
     
    Last edited: Aug 30, 2016
    numberkruncher likes this.
  20. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    Thanks :)
     
    Stephan-B likes this.
  21. GemaYue

    GemaYue

    Joined:
    Jul 25, 2014
    Posts:
    2
    Hello,
    I am very interested in purchasing Textmesh Pro. Before that I want to make sure if this asset plugin support Asian Language and non-ASCII characters? Such as Japanese, Chinese, Korean etc. Thanks a lot!

    GemaYue
     
  22. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    How feasible would it be to apply your SDF algorithm to an SVG file? and then apply a TextMeshPro material for styling?

    (for non-text objects).
     
  23. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    TextMesh Pro does work with the full range of unicode characters (ie. ASCII, UTF16 and UTF32) which includes CJK. It is already used by many studios who publish their projects / title in multiple languages.

    When creating your Font Assets using the Font Asset Creator, you will need to select the characters you wish to include in those Font Assets and possibly Fallback Font Assets. There are different approaches when it comes to organizing these Font Asset and using the Fallback system. Most studios use language files which contain all the known text / characters used in their project for a given language or group of languages. Then using the "Characters from File" option in the Font Asset Creator, they create the necessary SDF Font Assets and Fallback Font Asset when needed.

    Depending on whether you plan to support user input or not, number of languages you plan to support, the approach for creating and organizing your font assets can change a bit but this is something we can discuss via email or on the TMP user forum when the time comes.

    I suggest you take a look at the following video about the Font Asset Creation Process which includes a discussion about localization. You should also watch and get familiar with Working and Using Material Presets which is important and provides great flexibility when it comes to visual styling of your text.

    TextMesh Pro also support proper line breaking for CJK as you can see in the example below.



    Feel free to follow up should you have any other questions.
     
  24. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I am working on a new Asset that will be used as a replacement for Unity's UI.Image component where you will be able to create SDF UI Sprites which will then work with custom shaders to provide similar functionality in terms of dynamically styling those UI elements to add Outline, Shadow, Bevel, etc. similar to how you can with the text in TMP.
     
    zyzyx likes this.
  25. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Added a new Flush Text Alignment mode which is similar to Justified where instead of keeping the last line left aligned, it distributes the characters of all line based on the blend ratio of word and character spacing.

     
  26. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    Awesome; I'll be buying that as soon as it becomes available :D
     
    Stephan-B likes this.
  27. mog-mog-mog

    mog-mog-mog

    Joined:
    Feb 12, 2014
    Posts:
    266
    TMP pro Fallback problem.

    Consider text "Demnächst" , where my primarily font is English and fallback is Unicode containing all characters. Now part of word is rendered using different font. Demn_chst is rendered using primarily font and ä is rendered using fallback font. I want whole word to be rendered using fallback font. How can I do that?

    Alternatively I can replace font with unicode font if text cannot be rendered fully by current font. Is there a way to detect whether current tmp pro text will be rendered by specific tmp pro font? If yes, then I can do like:

    Check whether text can be rendered by attached font. If not, replace font with unicode font and render the text.
     
  28. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    When a character is missing from the Primary Font Asset, in this case the "ä", TMP will look through any Fallback Font Assets assigned to the primary. If this character is still not found, TMP will through the general Fallback Font Assets assigned in the TMP Settings file.

    Unless all the characters of a given word are missing from a Font Asset, there is no easy way to have TMP switch to a different font if only part of the characters of a given word are contained in a Font Asset.

    The easiest way to handle this is to make sure the Font Asset you are using contains all the Latin based characters used in your project. Unless the font file that you are using does not contain the Extended ASCII set, you should be able to fit all those characters in a single font asset.

    Most of the time, the Fallback Font Assets are used when you are dealing with Latin based languages and then need access to CJK where you can't easily fit all those in a given Font Asset. When going from Latin characters to CJK, since those characters don't mix (ie. you can't have a partial Latin word that contains Chinese characters or vice-a-versa) this ensure the whole words or those other languages do get to use the same fallback font asset.

    Assuming you really needed to use the current font that you have where it does not contain some characters, the Font Asset API (TMP_FontAsset) includes several functions like

    public bool HasCharacters(string text, out List<char> missingCharacters)

    Which allow you to check if all the characters or certain characters are in a given font asset. However, I think having to do this is kind of complex and much easier handled by making sure your primary font asset includes all the known text for a given language or groups of language like (Latin, Cyrillic as they both fit in one asset if needed). Even if cannot fit all characters into the same font asset, by creating a Primary of a certain font file and then creating different Fallback from the same font file (which ensures the fallback characters will look the same), no one should be able to tell when comes from the Primary vs. Fallback.

    P.S. Make sure you post these types of questions on the TMP user forum as it helps keeps the discussion better organize and easier to find by any other user having a similar question.

    Let me know if this helps and if you need further assistance on this :)

    P.S. If I have time tonight or tomorrow, I will create an updated video about the Fallback system in TMP and also cover the best practices of the feature.
     
    Last edited: Sep 7, 2016
  29. mog-mog-mog

    mog-mog-mog

    Joined:
    Feb 12, 2014
    Posts:
    266
    I believe that textpro by default should switch the whole text to fallback font instead of each missing character as same word with different text looks very weird. My fonts are English only and does not contain Extended ASCII. I'll replace the primary font and using Unicode font for CJK as fallback.
     
  30. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Switching to a completely new font because a few characters are missing would be pretty wasteful. Furthermore, you could easily run into a scenario where the fallback itself is missing another character, would you then switch to a third fallback?This could get pretty messy really fast.

    The issue isn't about how many characters are used from the fallback but selecting and having a fallback that is from a different font file (family) where the fonts look too different from one another.

    Selecting a font file that supports the languages you are targeting is pretty important. Most of the fonts you will find form professional font sites or Google fonts, do support a broad selection of languages. Although most fonts that support Latin based languages don't necessarily support CJK, given how different CJK characters look, mixing with a different font file (family) is usually fine provided the alternative font's weight is similar. Ie. if the latin font is thick and the CJK is thin then it will look weird but if they are proportionally the same it will be fine.

    As mentioned in my previous reply,

    public bool HasCharacters(string text, out List<char> missingCharacters)

    Already makes it possible for you to switch to a completely different font if the currently selected font asset is missing any of the characters from the supplied text.
     
  31. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Hi,

    I have one question about Font Fallback. If I understand the feature correctly it lets us set fonts that will be used when missing character will be used. Is it possible to set Font Fallback per font ? In a same project we usually use 2 or 3 different fonts so it will be weird having different fonts using same Font Fallback.

    Thanks
     
  32. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    It is indeed possible to set up Fallbacks per Font Asset. This is great when you need to split the characters from the same font file between several Font Assets. This also ensure, you don't end up with a different font either or at least gives you control over which font will be searched and in which order as well.

    It is also possible to set up general Fallback Font Assets in the TMP Settings file.

    In terms of how the Fallbacks are handled (order wise)... When a character is missing from the currently assigned Font Asset, TMP will look through the list of Fallbacks assign to this Font Asset first. If the character is not found, TMP will then look through the general Fallback Font Assets assigned in the TMP Settings file. If the character is still not found, TMP will look in the Default Font Asset assigned in the TMP Settings file (typically ARIAL SDF). Now if the character is still not found then TMP will display the missing glyph square and if that is also not available then it will display whatever replacement character you have listed in the TMP Settings file.

    Here is a screenshot of the Font Asset Editor panel showing where the Fallback Font Assets get assigned.

     
  33. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Ok, that's great !
    Thanks
     
  34. gegagome

    gegagome

    Joined:
    Oct 11, 2012
    Posts:
    392
    UPDATE:

    I saved my Custom Character Set again and it worked just fine.

    Everything's fine. Thanks

     
    Stephan-B likes this.
  35. OniKys

    OniKys

    Joined:
    Jun 15, 2013
    Posts:
    13
  36. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    TextMesh Pro uses customized shaders to render the text and given this is not a plain bitmap like a sprite is for instance, other third party shaders would not work unless specifically designed to support TextMesh Pro.

    That shader would likely work if you were using a Bitmap font asset in TextMesh Pro but not an SDF Font Asset.
     
  37. w00dn

    w00dn

    Joined:
    Apr 28, 2010
    Posts:
    275
    Hey guys,
    Not sure if this has been mentioned somewhere in the 25 pages here, but if you need to use very small font sizes (10 -14pt) and the rendering of the font is odd, it helps when you enable "Underlay", then set the color to fully transparent and also change "Dilate" to 1. The text sometimes becomes a bit blurry but IMHO better a bit blurry than ugly :p

    Oh and here's an example. Left is the default and right is with the transparent underlay.

    textcompare.PNG
     
  38. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    At small point sizes, it also helps to Enable Extra Padding. Using Linear Color Space also helps although it might not always be possible to switch to that mid project.
     
  39. w00dn

    w00dn

    Joined:
    Apr 28, 2010
    Posts:
    275
    @Stephan-B Hey, great plugin btw :)
    I already changed to linear color space and set the padding to 8 but still only could get the text to render like shown on the left side of that picture. The underlay-trick does the rest. I wonder why that is... something to do with the added transparency?
     
  40. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    By Extra Padding, I mean the property in the Text Object Inspector panel.

    When Dilation and / or Underlay is added, it indirectly increases the padding around the geometry of the characters which is what Extra Padding does.

    upload_2016-9-14_2-56-44.png
     
  41. w00dn

    w00dn

    Joined:
    Apr 28, 2010
    Posts:
    275
    OH, how have i missed that checkbox?!
    Much easier than the underlay... :)
     
  42. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    If you have to use extra padding, it indicate that you are shrinking your font over 50%.
    Try creating the SDF at a half the point size.and since you are not using special effect,
    you can reduce the padding possibly all the way to zero. (And always use SDF32)
     
  43. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    Could I ask how do we clear the TM_InputField text through code? Currently, I call DeactivateInputField, then set the text to a string of "". Is there a proper way to do that through code?
     
  44. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    You should be able to just do TMP_InputField.text = string.empty;
     
  45. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    Ah, ok. I figured as much. Just though there might be some formal event or method to call that.
     
  46. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Added <rotate=xx.x> tag just for fun.

    Here is an example


    In the example above the raw text is using something like "Feeling <rotate=10>D<rotate=-8>i..."
     
  47. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Working on adding a new variant to the <sprite> tag in TMP. This new variant will make it possible to add animated sprites inline with the text. Below is a first simple example.



    In the above example the raw text was "Animated <sprite anim="0,8,30"> Sprites".

    The format for this new sprite tag attribute is <sprite anim="first frame, last frame, frame rate">.
     
    Tinjaw likes this.
  48. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Added the ability to use Positive or Negative Frame rate to control playback direction with the sprite tag anim attribute.

    Here is an example



    This is the text from the Text Input Box
    Now, I need to get some nice animated sprite examples from my users to show this off given my artistic skills are ... horrible. :(
     
  49. XaneFeather

    XaneFeather

    Joined:
    Sep 4, 2013
    Posts:
    97
    Parallel to a rotate tag, what about an "offset" tag? If not already in.
     
  50. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    <voffset> tag is already available.

    Since the <rotate> is implemented using a Matrix.TRS, I might expose more than just the rotate part of this. Just not sure yet.
     
Thread Status:
Not open for further replies.