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

** Please post TextMesh Pro related questions in the Unity UI & TextMesh Pro section of the user forum. Be sure to add the TextMeshPro prefix to these posts.

UPDATE The first public beta of TextMesh Pro is now available on the Asset Store

Here is a link to the new Asset Store Forum Thread.

Should you have any questions about the functionality / features of TMPro, please feel free to ask in this thread. For assistance, please visit the TMPro User Forum where you can request help as well as find instructional videos which should help you get started familiarized with TextMesh Pro.


IMPORTANT NOTE: The latest beta releases of TextMesh Pro with support for Unity 4.6 and the new UI as well as beta releases for Unity 5.0 are available to all registered users of the product on the TextMesh Pro User Forum. Once your registration to the forum has been approved, you will find the latest beta releases in the "TMPro - Alpha & Beta Releases" section of the forum.


Hello Everyone!


Today I am pleased to make my first WIP post and to finally get to show fellow Unity users what I have been working on over the past few months. So without further ado, I now introduce you to:


Image from actual text as seen in the Unity Editor.[SUP]1[/SUP]


Introduction
TextMesh Pro! is essentially an advanced version of Unity's built-in TextMesh Component. It was designed to provide users with a more powerful and flexible solution while remaining easy to use and with improved performance.


Improved Text Formatting
Starting with a larger text input box to a more comprehensive list of Rich Text <tags> which include underline, superscript, subscript or size to dynamic character spacing or word wrapping as well as support for kerning, TextMesh Pro! has you covered.


Example showing superscript, subscript and center justification.[SUP]1[/SUP]


Advanced Real-Time Font Rendering
Just like all other text rendering tools, TextMesh Pro works with standard bitmap font atlases. However, a lot of the power and flexibility of TextMesh Pro comes from the use of Signed Distance Field "SDF" font atlases. The combination of SDF based font rendering and a set of advanced custom shaders delivers substantial visual quality improvements over normal bitmap fonts while giving users amazing flexibility when it comes to font styling texturing.


"S" Letters shows some of the dynamic changes that can be applied to a single SDF font asset. With the exception of the first bitmap "S", all visible text including the captions is an example of SDF based font rendering.[SUP]1[/SUP]


An unlimited number of visual styles treatments are virtually possible from a single SDF Font Atlas and they look great at any size.



Close up - These two letters are using the same SDF Font Atlas. They are simply using two different materials.[SUP]1[/SUP]


Font Asset Creator
Want to use some new TrueType or OpenType font but need to create a font atlas for it? Not a problem with TextMesh Pro!. Just import your font in Unity. Open the built-in Font Asset Creator and within 30 seconds your new font asset is ready.


Built-in Font Asset Creator. No need for any external tools. Can create normal bitmap font assets or SDF font assets.[SUP]1[/SUP]


Intuitive User Interface
TextMesh Pro! features several custom inspectors editor panels. They were created to give users access to what they need while keeping things simple.


Shown TextMesh Pro!'s custom editor material inspector.[SUP]1[/SUP]


Scripting Interface
Need to create or modify text objects via scripts? All of Unity's components offer a scripting interface and so does TextMesh Pro! All of the relevant properties of TextMesh Pro! can be accessed via script.


Example of TextMesh Pro! object creation via script.

[HR][/HR]

Here is a list of some of TextMesh Pro's features.

TextMesh Pro! Main Features

• Easy to use with simple UI featuring custom inspectors and editor panels.
• Supports both Bitmap Signed Distance Field font atlases.
• Built-in Bitmap SDF font atlas creation tool.
• TrueType OpenType font support.
• 2D Text objects can be created in the Editor or dynamically via scripts.
• Better performance than Unity's built-in TextMesh and No Alloc.

Formatting Styling Options

• Dynamic font sizing. SDF font atlas renders sharp and great looking text at any sizes.
• Rich Text support. Per character tags include color, bold, italic, underline, superscript, subscript, size, tab and position.
• Text Anchoring - The usual 9 positions.
• Text Alignment - Left, Center, Right and Justified.
• Line character spacing.
• Automatic word-wrapping.
• Kerning.
• Multiple Texturing Mapping options.

Built-in Custom Shaders

• Basic Bitmap text shader
  - Face vertex color
  - Face Texturing with multiple mapping options
• Basic SDF text shader
  - Face vertex color
• Advanced SDF text shader
  - Face vertex color
  - Face texturing with multiple mapping options
  - Border texturing
  - Border thickness softness control
  - Beveling + Glow control
• Advanced Surface SDF text shader
  - Real-time lighting shadow casting
  - Plus same features as Advanced SDF text shader

[HR][/HR]

Final Note
Well! That is it for my first post. Obviously, I would love to get your feedback impressions of TextMesh Pro! thus far as well as answering any questions you may have.

I do plan on following up with additional example images videos to provide better insight on some of the features and operation of TextMesh Pro!


Thanks everyone



[HR][/HR]
*1 Images are of actual unedited screenshots taken from within Unity's Editor.

 

Thank you! I look forward to seeing TextMesh Pro! working with ScoreFlash.

 

Thanks

I have not yet decided on a price.

TextMesh Pro! currently outperforms Unity's TextMesh in the performance tests done thus far on desktop(s) and android devices. I am looking forward to testing it on iOS devices and am hopeful that we will perform nicely there as well.

Here is a video of a performance test I did a few months ago. This is using the Advanced SDF shader which is more complex than our Basic SDF shader. Be sure to watch in HD.

Unity's TextMesh vs. TextMesh Pro. This is a crazy amount of objects.

On the memory side, there is no allocation made per frame but I'll give you a more detailed answer later today.

 

Here is a video I made last night going over the basics of the tool in the Unity Editor.

 

Here are a few examples of the results I got from playing around with this font I downloaded.


After creating the SDF font asset for this font, I created a new game object to which I added a TextMesh Pro component. This image shows how this font looks without any treatments applied to it.




After making a few tweaks (adding a border + texture + bevel + glow) ... this same plain font was transforms into this.




In order to get this new look, 3 new material we created from this original plain one. This final image is comprised of 3 TextMesh Pro objects, the Bevel + Red Glow, the Shadow and lastly the Blue Glow.

Here is an image of the Blue Glow material applied to this font.




Edited the text and made some tweaks to the bevel and glow.




If anyone is interested, here is a video showing the some of this process.

Lastly, here are a few more variations. Again keep in mind that all these different text objects / images are using a single 512 X 512 SDF font atlas that is only 256K in size and contains the full ASCII character set. The only difference between these objects are the dynamic material shader properties being different.

 

I would love to release TextMesh Pro! within the next 30 days but it all depends on getting enough feedback. I really want to make sure it includes the majority of the features that potential users would want.

So far, the feedback is slow to come. I really don't know if that is typical or if the title of the post needs to be changed or maybe few care about a more powerful alternative to Unity's built-in TextMesh component.

 

Text can be provided as either a string or char[]. The string is parsed and converted into a char[] since internally the process works on char[]. Currently when updating a text object each frame, GC Alloc is zero. However, whatever small script is feeding that .text (string) is inviting that GC monster. So in terms of providing a function to enable users to easily take their data to turn it into a char[] and avoid string manipulation, I'll give it some thought.

I certainly agree that Signed Distance Field font rendering is awesome. On the other hand, I am not sure I understand your point given that every single example in my previous posts are using SDF font atlases created with the TextMesh Pro's built-in Font Atlas Creator and using one of the included custom SDF shaders.

Signed Distance Field font rendering is pretty amazing which is why TextMesh Pro! was designed to fully leverage that power and flexibility.


Example of changing some of the SDF Shader properties via script. Text shown is using the same SDF font atlas as the RED Zone examples in previous posts. This is just a different material with different shader properties.

The mesh / text object creation process currently results in a struct that contains key information about each characters part of the mesh. Such information could be used to further manipulate the mesh / layout or enable editing of the text in the camera view, etc...

Do you have anything specific in mind?


In terms of your last point, let me get back to you on that one if I may.

 

Here is a screenshot of the Unity Editor showing the properties of TextMesh Pro's Advanced Text shader that can be changed either in the editor or via script.

In the case of this glow effect, this little script is simply changing the value of the Glow Power in a Coroutine. The script can be seen in this image as well. Note that animating most of these properties does not cause the text object / mesh to be redrawn and is therefore very efficient.

All of the techniqu named materials use / reference the same techniqu SDF font asset which contains the atlas and font data. By applying the Metal Red + Glow material to this text object, it would instantly make it look like one of the RED ZONE examples.

 

Thank you!

 

Here is a follow up on your suggestion Hippocoder


New function TextMeshPro.SetText(string, arg0 ... arg2); arguments can be a mix of ints / floats.

Here is an example of usage.

Code (csharp):

1. m_textMeshPro.SetText("The first number is {0}, the 2nd is {1:3} and the 3rd is {2:4}.", 1479.356f, -137.5698f, 4.25f);

{0:2} means first argument and rounding to 2 decimal places. I figure 3 arguments should be good enough,


Performance Benchmark
I tested the following forms of string formatting and iterated over each of them 1 million times and timed it with system diagnostics stopwatch. I then separately tested each of them in an Update() loop to check GC Alloc.

Code (csharp):

1.  
2. // ~ 4461ms Mem Alloc 0.8KB
3. string.Format("The first number is {0}, the 2nd is {1:f3} and the 3rd is {2:f4}.", 1479.356f, -137.5698f, 4.25f); // 4461ms mem alloc 0.8 KB.
4.  
5. // ~ 3670ms Mem Alloc 310 bytes
6. _stringBuilder.AppendFormat("The first number is {0}, the 2nd is {1:f3} and the 3rd is {2:f4}.", 1479.356f, -137.5698f, 4.25f); // 3670ms mem alloc 310 bytes.
7.  
8. text = "The first number is " + 1479.356f + ", the 2nd is " + (-137.5698f).ToString("f3") + " and the 3rd is " + (4.25f).ToString("f4") + "."; // 3275ms mem alloc 472 bytes
9.  
10. // ~ 2594ms Mem Alloc 194 bytes
11. _stringBuilder.Append("The first number is ").Append(1479.356f).Append(", the 2nd is ").Append((-137.5698f).ToString("f3")).Append(" and the 3rd is ").Append((4.25f).ToString("f4")).Append("."); // 2594ms mem alloc 194 bytes
12.  
13. // ~ 620ms Mem Alloc 0
14. m_TextMeshPro.SetText("The first number is {0}, the 2nd is {1:3} and the 3rd is {2:4}.", 1479.356f, -137.5698f, 4.25f); // 620ms mem alloc 0  
15.  

Conclusion
TextMeshPro.SetText() achieved the best performance with ZERO alloc.

I was aiming for no allocations but did not expect to crush the other function by that much on performance. Obviously, I don't support the multitude of formatting options they offer but for the typical usage, TextMeshPro.SetText() should do the trick.


Thanks for the suggestion.

 

Text Rendering Comparison
Here is a comparison of text rendered at different sizes using TextMesh Pro! vs. Unity's built-in TextMesh.



Great looking text at any size
One of the many advantages of using Signed Distance Field (SDF) text rendering is that it looks great at any size. Whether your text is 16 pts, 256 pts or even something crazy like 3797 pts, it scales linearly and maintains its visual quality which is not the case for bitmap fonts.

Another huge advantage of SDF text rendering is that only (1) relatively small SDF font atlas is needed to render text at any size to which dynamic changes can be made to virtually achieve an unlimited number of visual looks. As you can see the SDF font atlas is a small 512 X 512 texture only 256 KB in size for the full ASCII set vs. a huge 4096 X 4096 texture that is 16 MB containing only the visible characters.

A big misconception about SDF Text Rendering is that large text looks great but small text looks bad. Well, that is not the case with TextMesh Pro's Advanced Signed Distance Field shaders. TextMesh Pro's SDF text looks awesome at large sizes and looks as good or better than bitmap text at small sizes.

The image above is a composition of a few screenshots. First, the text of size 32 to 256 is TextMesh Pro vs. TextMesh side by side in Game view with camera in Perspective mode. The smaller 8 to 20 pts text is from Game view with camera in Orthographic mode.

As you can observe the SDF based text on the left looks great at medium to large sizes. It still looks decent at the smallest possible sizes. By comparison, the bitmap base text on the right breaks up at the smaller sizes, looks too soft in some areas, shows clipping and artifacts in other spots and shows aliasing at larger sizes.


Conclusion
In all aspects from the size of the assets to versatility in terms of visual looks and treatments to how the text looks on screen, Signed Distance Field text rendering outperforms its bitmap counterpart.

 

In my previous post, the size of that Signed Distance Field font atlas which contained the full ASCII set for that particular font "Arial" was 512 X 512 and 256 KB which was pretty impressive given the visual quality of that text.

Just for fun, I created a new SDF font atlas for this Arial font but decided to pack it into a smaller 256 X 256 texture whose size is a tinny 64 KB. In the image below, you can see how the text turned out as well as the signed distance field font atlas.

 

If that new feature alone is reason enough for users to invest in TextMesh Pro then that will add a lot of weight to the case for "GC" being the greatest of evil.

For my part, I am just hoping that TextMesh Pro with the sum of all of its features lives up to users' expectations and proves to be a great asset and investment for them.

Thanks

I'll be sure to contact you when we are ready for beta testers



P.S. A quick note about this new function. TextMeshPro.SetText does result in some Alloc in Editor Mode Only simply because I am converting the Char[] into a String to populate the Text Input Box in the Editor Panel to give users feedback. This conversion is wrapped into #if UNITY_EDITOR so SetText() results in Zero allocation in a build. Let me know if that's fine?

 

I so wish we could have better control of the GC process. It would be so great to be able to budget / limit GC per frame.

You can rest assured that it will be tested in order to ensure it performs as expected.

One of my main concerns remains getting enough feedback and right now it is pretty slow / slim. I am not sure if this is typical or if the title of the post is bad or what to think.

 

For those who may wish to implement their own text formatting, I added a new function which allows using a char[] to set the text that will be displayed by TextMesh Pro.

There are now three convenient ways to provide the text to be displayed to TextMesh Pro.

TextMeshPro.text
string text;

Code (csharp):

1. textMeshPro.text = "The count is:" + count;

TextMeshPro.SetCharArray
void SetCharArray(char[] characters);

Code (csharp):

1. char[] chars = { 'T' }; // use whatever implementation you wish to create this char[]. Hopefully one that does not generate GC.
2. textMeshPro.SetCharArray(chars);

TextMeshPro.SetText
void SetText(string text, <T> arg1, <T> arg2, <T> arg3);

- Arguments can be integers or floats. The 2nd and 3rd arguments are optional.

Code (csharp):

1.  
2. textMeshPro.SetText("The first number is:{0}, the 2nd {1:2} and the third {2:3}.", 14, 13.446f, 3.1415f);
3. // Output:
4. // The first number is:14, the 2nd 13.45 and the third 3.142.
5.  
6. textMeshPro.SetText("The count is:{0}.", count);
7. // Output:
8. // The count is:42.
9.  
10. // Using SetText helps keep the GC monster away. Zero allocations.
11.  

 

I presume once it is ready

 

Are you referring to the Text Input Box for instance or the labels on those?

 

I do plan on making sure the UI matches the selected Unity Skin (ie. the light or dark one). This dark background does look bad on top of the light skin

How about this?



In terms of the larger labels, it is just to help separate options in the UI.

 

This is an area that needs to get flushed out. Currently, you can create an SDF Atlas for any given range(s) of characters but there is only so much you can pack in a texture. Right now, dynamic atlas creation isn't supported but something considered for subsequent versions depending on how the tool does on the asset store.

Here is an example of characters from Meiryo.ttc (already had to change the code to support .ttc which I guess Unity doesn't). Here you can see an SDF of 205 Japanese characters (a subset of their character set I presume) packed in a 512 X 512 texture. So we could pack over 13,000 in a 4K atlas.



Typically, when using non dynamic atlas creation, how many characters do you end up using for an average game?

How large are those textures typically?