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

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.

 

Long story short ... Additional information is passed to the shader to ensure that regardless of size the text remains as you put it ... Beautiful

 

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.


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


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.

 

@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!

 

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.)


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.

 

I want to be a beta tester, this is a must buy for me! =)

How can I get a invite to test it?

 

There is a line

 

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.

 

Add me to the queue, please

 

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.




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.

 

How can we apply to Beta ?

 

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.



This is how for example you can get a glossy look


I used this cubemap for this. I also switched the bevel normal generation to inset (not just raised)

 

Plain text with no lights


Adding 2 scene light with bevel and turning on emissive glow

 

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.

 

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?

 

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%.

 

Did I hear Open Beta?

 

The private Beta is going well thus far. We are definitely getting closer to hitting the Unity Asset Store... the wait is almost over

 

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! 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:

 

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

 

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 , An invite for beta-testing would be greatly appreciated. =)

 

@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.

 

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

 

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.

 

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

 

Quick test for you:

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



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

 

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

 

@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.

 

Amazing, thanks for sharing your plans with us

Will this be a beta? Or are you considering this a RC/final version?

 

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.

 

How long does it take on Asset Store approval process?

 

Looks like 5 - 7 days assuming there are no issues with the Asset.

 

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.

 

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.

 

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.

 

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.

 

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.

 

Finally!!! =)
I can't wait to get it!

 

Congratulations and best luck for release!

 

Thanks


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

 

Gratz Great works!

 

Thanks ... Should be able to post a link to the Asset Store any day now

 

TextMesh Pro is out now I'm maybe the first to buy it woot lol

 

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

 

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

 

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.



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.

 

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?



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.

 

Just one more thing. There is no native support for Sorting Layers?

I added SortingLayerExposed from https://github.com/nickgravelyn/UnityToolbag/tree/master/SortingLayer and it seems to be compatible.

 

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.



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.




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.

 

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