Search Unity

TextMesh Pro - Advanced Text Rendering for Unity - Beta now available in Asset Store

Discussion in 'Works In Progress - Archive' started by Stephan-B, Feb 11, 2014.

Thread Status:
Not open for further replies.
  1. Mistale

    Mistale

    Joined:
    Apr 18, 2012
    Posts:
    173
    This looks really interesting! I love the sharpness of sdf fonts!
    I have one question... When dealing with sdf, there's always a need to determine a sharpness/bluriness factor in the shader based on how much the input texture differs in texel density compared to the rendered content. I.e when rendering an sdf font saved in size 60 in a much smaller pixel-size on the screen.
    What solution do you use to keep the content as crisp as possible without looking jagged or aliased in small sizes? Do you rely on ddx/ddy (and filterwidth guesstimations for mobile) or do you use extra input information to the shaders to allow proper calculations on texel density?

    The reason I ask is because your screenshots look beautiful, and I hope thats the case on real devices as well, regardless of physical resolution and rendered font size.

    If you've overcome this sort of problem in some other way, that would be very interesting to hear about too. I don't want to buy the asset only to find out that fonts only look good in specific scale envelope.
     
  2. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Long story short ... Additional information is passed to the shader to ensure that regardless of size the text remains as you put it ... Beautiful :)
     
  3. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    The key to do it right is in the name : signed _Distance_ field.

    We compute everything as distances and that become accurate pixel coverage for anti-aliasing.
    This start when creating an SDF Font atlas.
    The calculation are accurate, and the 'distance scale' stored with the atlas is well defined for shader computation.

    So it doesnt matter what size , what platform, DPI, etc.. the result is based on actual pixel coverage.
    This allow you to open a font and start to type, and it looks as it should, at any size... no fudge factor, no slider/value to tweak.

    We also decided to do the distance computation in the vertext shader.
    And we dont use ddx/ddy (or equivalent method) in our shaders to know correct pixel to texel ratio for pixel coverage.

    To get this type of results we do compute some anisotropic approximation in the vertex shader.
    $aniso.png

    For small font, you should see superior result compared to non hinted bitmap font.
    A sub pixel positioning text, Left is TMPro right is Unity built in font
    $subpz2.png

    Having said that, there is still a place for bitmap fonts. Small fixed size fonts. Simply because of hinting.
    This feature greatly transform the shape of a font when rending letter small (where features are about 1.5 pixel, or less in thickness)
    The down side is that:
    a) You cant position bitmap font freely (or you pay the price in term of sharpness)
    b) You loose kerning
    c) Forget about scaling or applying any matrix transform to your text
    d) You have to render the font altas to your target system DPI (so a run-time dependency)

    But if you can deal with those limitation, specially handling the target platform DPI scaling , TMPro also let you create hinted bitmap fonts.

    Since none of those limitation apply to SDF, bitmap font usage should be very rare.
    Specially on high DPI devices, where hinted fonts are simply not needed making bitmap font obsolete on those paltforms.
    $cursive2.png
     
  4. Mistale

    Mistale

    Joined:
    Apr 18, 2012
    Posts:
    173
    @Stephan B, sschaem: Thank you both for the information. The screenshots look really good!

    As you said, sdf provides excellent results on high dpi devices. The problem area for my solution is small thin font-sizes on low dpi devices (about size 8 and less in webplayer builds where the computer has 1366 x 768 res). There's simply not enough pixels for proper antialiasing in the shader. On one pixel, the centerline of the character is rendered, and on the next pixel, due to high texel density per pixel, the whole or part of the distance field falloff ramp is missed and therefore the characters look pixelated without blurring them somewhat.

    But as I said, your shots really look good, and it seems that you have a better way of dealing with this kind of situation.

    Really looking forward to this asset, keep up the good work!
     
  5. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    With TMPro and SDF you should be fine with small text.

    Here is your post in TMPro with Arial at a small point size.
    (I created a TMPro object, pasted your text, and sized the font down.)
    $small.png

    note: If you want crisper text you will need to use hinted font, and render it at your target DPI.
    But this show TMPro rendering small text in SDF mode.

    For reference, just moving the camera in closer to see the font features
    note: TMPro requires no CPU usage or allocation for dynamic font scaling.
    $big.png
     
    Last edited: Apr 23, 2014
  6. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    I want to be a beta tester, this is a must buy for me! =)

    How can I get a invite to test it?
     
  7. zipper

    zipper

    Joined:
    Jun 12, 2011
    Posts:
    89
    There is a line :)
     
  8. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Quick update: Private Beta has begun and it is going well thus far. *keeping my fingers crossed*

    I will be adding additional folks to the private Beta and presuming it continues to go well, I am thinking of a public Beta available through the Asset Store to help flush out any remaining potential issues and obviously gather even more feedback.
     
  9. DavidErosa

    DavidErosa

    Joined:
    Aug 30, 2012
    Posts:
    41
    Add me to the queue, please :)
     
  10. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Quick technical update:

    I finally got the Font Asset Creator plugins file management in a state that I am pleased with. The plugins along with everything else now resides inside the TextMeshPro folder structure. Regardless of the authoring environment; Mac, Windows, Unity Free or Pro, it all works and doesn't require users to copy or move any files. Simpy import the package and it all works :)

    Visual teaser ... One of the Beta testers asked if an Outline was required to add bevel to a character?

    The short answer is: No. Bevel is added to the character. Now, having an outline which can have a different texture or color from the face certainly can help make the bevel stand out more but an outline is not necessary.


    $TMPro - Wooden Characters.JPG

    The image above shows bevel applied just to the face of characters which has no outline. I applied a bump map to the face which due to lighting effects is mostly visible on the beveled part of the face which adds a nice touch.


    P.S. Be sure to open these images in separate tabs to see the details from close up.
     
  11. Bidule200

    Bidule200

    Joined:
    Apr 26, 2014
    Posts:
    17
    How can we apply to Beta ? :)
     
  12. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    Another example to show bevel on/off

    Default white text and then with the material Bevel/shadow option enabled

    The bevel is rendered using unity scene lighting (or optionally with a built in light)
    This mean that the bevel actually is a surface normal that react to lighting equations,
    and so you can also turn on features like env mapping on your TMPro text.

    $bevel.jpg

    This is how for example you can get a glossy look
    $gloss.jpg

    I used this cubemap for this. I also switched the bevel normal generation to inset (not just raised)
    $cubemap_512.png
     
    Last edited: Apr 26, 2014
  13. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    Plain text with no lights
    $no lights.jpg

    Adding 2 scene light with bevel and turning on emissive glow
    $2 lights.jpg
     
  14. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    It is all about abusing this wood texture for me tonight while testing :)


    The top example is of this font called Anonymous Pro Minus with no material / shader tweaks. This is how the font looks with nothing done. Well other than it a SDF Atlas.


    The bottom version has Face + Outline using the same Wood texture. Outline is very minimal to enhance the contour. Switched to using Inner bevel. I also tweaked the kerning since the spacing in the original font wasn't to my taste. Now with respect to the Glow ... I am being tricky ... however, this is still one TMPro object.


    $TMPro - Wooden + Kerning.JPG
     
  15. ThomasVandenberghe

    ThomasVandenberghe

    Joined:
    Feb 28, 2014
    Posts:
    22
    This is looking very nice.

    And it might be to early, but have you got any idea what price range you guys are looking at for the release?
     
  16. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Thank you :)

    The current thinking is $80.00 for the release version but I am planning on an open Beta using the asset store where it will be available at a discount of at least 20%.
     
    Last edited: Apr 26, 2014
  17. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    Did I hear Open Beta? :p
     
  18. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The private Beta is going well thus far. We are definitely getting closer to hitting the Unity Asset Store... the wait is almost over :)
     
  19. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Just wanted to drop by to keep you all informed on TextMesh Pro's progress.

    The private beta continues to go smoothly. I invited more users to the private beta as I continue to seek additional feedback.

    Looks like we have one Beta user ready to release their first product using TextMesh Pro! :p Funny how they get to ship before I do :)

    I have begun drafting and creating the Unity Asset Store package so we are not there yet but definitely inching closer day by day.


    Thank you all for your patience and most importantly, your interest in TextMesh Pro :)



    P.S. Now I just need to come up with that perfect tag line to describe TextMesh Pro for the Asset Store. I wished I had spent more time leveling my wordsmith skills back in my school days :wink:
     
    Last edited: May 7, 2014
  20. hadesfury

    hadesfury

    Joined:
    Jan 23, 2014
    Posts:
    51
    If you need newer beta tester … We're interested for our project -
    https://www.kickstarter.com/projects/1464350149/faeria-strategy-card-game
    http://www.faeria.net/
    We're changing technology from flash to Unity3D.

    Best regards
     
  21. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    I have two game almost ready for release and I'm just waiting to replace my texts with TextMeshPro... I can't wait anymore for it's release :p, An invite for beta-testing would be greatly appreciated. =)
     
  22. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    @hadesfury: Your project looks very impressive. How far along are you with your Unity conversion from flash? Can you please send me a private message with contact information.


    @Wagenheimer: Can you send me a PM with some details about your two games.
     
  23. ChezDoodles

    ChezDoodles

    Joined:
    Sep 13, 2007
    Posts:
    102
    Will you support bitmaps as well?
    A GUI is often a mix of text (fonts) and symbols (bitmaps). I understand the tech for making SDF images only supports black and white source material.

    But will you also support (black and white) bitmaps as source? It would be great if toolbars and other symbols could benefit from the same free-scaling and effects.

    Please, please :)
     
  24. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The Signed Distance Field textures are generated from binary images which contain for the most part letters (ie. a font).

    If I understand correctly, you are asking if instead of using a font to generate the Signed Distance Field from, could we use a texture instead?

    Assuming that was your question, the answer is currently no for the initial release because there isn't any method inside the Font Atlas Creator for defining what / where elements contained in this texture might be. Until such functionality is added, you can already use a 3rd party font creation tool to create a custom font (.ttf) that contains the symbols you wish to use. In a previous post an example of this was shown.

    BTW: For testing purposes, I added the ability to generate an SDF from any texture. Inside of TMPro, there is even an alternative mode for creating SDF from AA images instead of binary images. Right now those special modes / functions are hidden.

    Hopefully that answers your question.
     
  25. Civalice

    Civalice

    Joined:
    May 12, 2014
    Posts:
    7
    I would like to ask you that did Textmesh pro fully support Thai language? Because Thai language usually have some common issue.
    These are the text I'll sent to you. and you'll see what will happen to Thai language.

    "สวัสดีครับ" "ไหหลำ" "ลำ ล่ำ ล้ำ ล้า ลัน ล้น ลั้น"

    The issue is come from Vowel and stress symbol. Some of these vowel symbol will over the alphabet and the stress symbol and be over both of them that make those text look broken if it's not fully support. (It'll make those symbol shift right and not over the alphabet.)

    Here's example for you to test.
    Alphabet + Upper Vowel : สิ สี สึ
    Alphabet + Stress symbol : ส่อ ส้อ ส๋อ อ้น
    Alphabet + Upper Vowel + Stress Symbol : สี่ อั๋น อั้น
    Alphabet + Lower Vowel : หู กู ดู
    Alphabet + Lower Vowel + Stress Symbol : กู้ มู้ รู้
    Alphabet + Special Vowel : กำ ดำ ขำ << These only have 2 symbol alphabet + ำ << here's only one symbol.

    You can use these to test this out. And if this fully support please let me know and you'll take my money for sure.
    Thank you,
    Civalice
     
  26. sschaem

    sschaem

    Joined:
    Feb 14, 2014
    Posts:
    148
    Quick test for you:

    Alphabet + Stress symbol : ส่อ ส้อ ส๋อ อ้น

    $thai.jpg

    Note: only some font will render this correctly.
    This require special layout engine support to have it work with all Thai font.

    $thai2.png
     
    Last edited: May 12, 2014
  27. Civalice

    Civalice

    Joined:
    May 12, 2014
    Posts:
    7
    Thank you very much for quick testing and reply so fast.
    For this TextmeshPro...
    SHUT UP AND TAKE MY MONEY!!! :mrgreen:
    Can't wait until it release!!!
    This's seem enough for me to work with it.
    Thank you,
    Civalice
     
  28. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    @Civalice - You are welcome!

    @ Everyone who has been waiting - Unless I run into some major issue, I am planning on submitting TextMesh Pro for approval on the Asset Store on Sunday or first thing Monday.
     
  29. DavidErosa

    DavidErosa

    Joined:
    Aug 30, 2012
    Posts:
    41
    Amazing, thanks for sharing your plans with us :)

    Will this be a beta? Or are you considering this a RC/final version?
     
  30. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I am thinking of releasing TextMesh Pro through the Asset Store and calling this an Open Beta. Now for those early adopters / beta testers, I will be offering a discount as they will be helping me further improve the product and iron out whatever remaining issue that may not have been caught in the private Beta.
     
  31. Civalice

    Civalice

    Joined:
    May 12, 2014
    Posts:
    7
    How long does it take on Asset Store approval process?
     
  32. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Looks like 5 - 7 days assuming there are no issues with the Asset.
     
  33. Lemo76

    Lemo76

    Joined:
    Aug 7, 2012
    Posts:
    174
    I haven't been following along all the updates so far so correct me if I'm wrong,
    Is there a feature which lets you input the text via code into this and it makes a 3d model from the text with a mesh collider?
    Because that would be a very useful feature in typographic games.
     
  34. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    TextMeshPro includes a scripting interface just like Unity's TextMesh and as such TMPro objects can be created and their properties modified via code.

    The text object just like Text Mesh is a 2D Mesh since we are dealing with characters. This mesh can exist in 3D space but again, the text is 2D. As per the image below, you can see the mesh of one of the selected TMPro objects. Thanks to our Surface Shader, not only does this object live in the 3D scene but it is also affected by scene lighting and casts shadows as well.


    The selected object is using the TMPro Distance Field Surface Shader. The other two objects are using the TMPro Distance Field Shader


    A Collider isn't added to the TMPro objects by defaults but one can easily be added and it will match the bounds of the mesh.
     
  35. ferdegje

    ferdegje

    Joined:
    Apr 10, 2014
    Posts:
    1


    Hi Stephan,

    this looks amazing. We're currently working on producing an eBook within Unity. Is there any chance to use TextMesh Pro! on that project? Would of course be happy to give as much feedback as needed.
     
  36. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    At the request of some beta testers, added a new feature in the Underlay panel section. Underlay is currently used to create a secondary outline or shadow under the object. This new Underlay feature enables creating sort of an inner shadow.

    $TMPro - Underlay Inner.PNG $TMPro - Underlay Inner 2.PNG
     
  37. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    After months of development, I wanted to let you all know that the first public beta release of TextMesh Pro has been submitted to the Asset Store for review. :)
     
  38. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    Finally!!! =)
    I can't wait to get it!
     
  39. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Posts:
    28,171
    Congratulations and best luck for release!
     
  40. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Thanks :)


    P.S. Still waiting on Unity's review / feedback.
     
  41. Crazydadz

    Crazydadz

    Joined:
    Mar 29, 2012
    Posts:
    50
    Gratz Great works!
     
  42. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Thanks ... Should be able to post a link to the Asset Store any day now :)
     
  43. Crazydadz

    Crazydadz

    Joined:
    Mar 29, 2012
    Posts:
    50
    TextMesh Pro is out now :p I'm maybe the first to buy it woot lol
     
    Last edited: May 22, 2014
  44. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    A few users have purchased already but I can't see who yet so you might be the first. Regardless, a huge Thank You! :)


    It is now official: TextMesh Pro is now available on the Asset Store.

    This is the first public beta release so I am sure we will run into some unexpected issues and as such I have set up a TextMesh Pro Support Forum where you will find tutorials videos, request some assistance as well as provide feedback or suggest new features.

    I look forward to everyone's feedback :)
     
    Last edited: May 23, 2014
  45. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    Hi! =)

    I think a found a bug! When I try to create a font using the attached "Characters from File", when I click "Save TextMeshPro Font Asset", I got this error :

    View attachment $Letter to Render.txt

    Hi! =)

    I think a found a bug! When I try to create a font using the attached "Characters from File", when I click "Save TextMeshPro Font Asset", I got this error :

    ArgumentException: An element with the same key already exists in the dictionary.
    System.Collections.Generic.Dictionary`2[System.Int32,TMPro.GlyphInfo].Add (Int32 key, TMPro.GlyphInfo value) (at /Users/builduser/buildslave/monoAndRuntimeClassLibs/build/mcs/class/corlib/System.Collections.Generic/Dictionary.cs:404)
    TMPro.TextMeshProFont.ReadFontDefinition () (at Assets/TextMesh Pro/Scripts/TextMeshProFont.cs:201)
    TMPro.EditorUtilities.TMPro_FontAssetCreatorWindow.Save_SDF_FontAsset (System.String filePath) (at Assets/TextMesh Pro/Editor/TMPro_FontAssetCreatorWindow.cs:888)
    TMPro.EditorUtilities.TMPro_FontAssetCreatorWindow.DrawControls () (at Assets/TextMesh Pro/Editor/TMPro_FontAssetCreatorWindow.cs:533)
    TMPro.EditorUtilities.TMPro_FontAssetCreatorWindow.OnGUI () (at Assets/TextMesh Pro/Editor/TMPro_FontAssetCreatorWindow.cs:169)
    System.Reflection.MonoMethod.Invoke (System.Object obj, BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) (at /Users/builduser/buildslave/monoAndRuntimeClassLibs/build/mcs/class/corlib/System.Reflection/MonoMethod.cs:222)

    And a suggestion :

    Is it possible to set a TextArea where it shiriks the font If the current text does not fits on it?

    Thanks
     
    Last edited: May 23, 2014
  46. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I presume you are using a Mac and ran into the one thing I know for certain :)

    Until I release an update (on the Mac) generating a font from a file where the space character (32) is not first in the list or includes the non-breaking space (160), the plugin blows up. I fixed it on the PC but forgot to rebuild the plugin for OSX :( As a work around, put space first in your list.

    Here is an image of your font list in the asset creator.

    $Letter to Import.JPG

    You can see that all 226 characters were rastered. However, the Square one in the middle is missing from Arial so it is represented as that square in the TTF.

    It is not possible at the moment but something I have been looking into. There are some implementation challenges however given that many things affect the size of the text. Ie. Point size, Character Spacing, Bold Weight, Dilation, Outline Width, Kerning, Size Tag, etc... so when trying to make it fit, which of these do I alter?



    P.S. I approved you registration on the TMPro forums.
     
    Last edited: May 23, 2014
  47. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    Hi!

    Thanks! Removing some extra spaces from the text file solved the problem!

    Now I have another problem... my font renders beautiful on Scene Window (Left), but on Game Window (Right) it gets very ugly! What am I missing?

    $difference.png

    I don't know if is related, but I'm using tk2dCamera and the font size is 228.

    Same thing happens with your default fonts, tested with Bangers and it is almost impossible to read on game window.
     
    Last edited: May 23, 2014
  48. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
  49. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I presume the Camera is in Orthographic mode? If so, you need to set the Perspective Filter to a value of Zero for Ortho and 0.875 for Perspective Camera. This option if found in the Debug Panel of the Materials.

    $TMPro - Perspective Filter.JPG

    So what is this perspective filter, it makes object when view at sharp side angles look softer but for an Orthographic camera, it is not happy so we need to turn it off by setting it to Zero.

    $TMPro - Perspective Filter On.JPG $TMPro - Perspective Filter Off.JPG


    Let's take this to the TMPro forums. I approved you plus there is a whole discussions about this part on it :)


    EDIT: Upon further thoughts, I think since most users are likely to have their camera set to Orthographic mode, I have updated the shader to default to 0 which will prevent other users from running into this. The only shader that will have Perspective Filter enabled will be the surface shaders.
     
    Last edited: May 23, 2014
  50. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Glad that works :)

    There is no support for it right now but I see it in the renderer properties so I just need to educated myself on this. Found a video about it but not much in terms of docs on this lol.

    If you have a chance, post a feature request on the TMPro forum. It should be pretty straight forward to add this plus it gives me some ideas for future versions :)
     
    Last edited: May 23, 2014
Thread Status:
Not open for further replies.
unityunity