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

I agree, its a difficult font. Mainly because its features goes below 1 pixel in thickness when small.

If you need that font at a smaller size, TMPro hinted bitmap would be the option to use.
Below are SDF examples with sub pixel positioning. I will try it out using "hinted bitmap" next



Moving the camera closer



Adding an example with rotation (open in new tab to see 1:1)

 

Wooo!! i can believe i've missed this thread!!!!

 

Awesome, thank you, that looks better than I expected.

Looking forward to the release!

Edit: Ah, I believe you are also showing off a new feature, justify alignment. Almost missed it, neat!

 

I didn't mean to change to another pre-created SDF font, I meant creating one at runtime using some font picked by an user for example.

Thank you for yet another video showing the power of TMPro.

That would mean that all possible combinations would have to be pre-rendered. I guess that will be huge...
Isn't it possible to run the Font Atlas Creator in run-time instead of using the Editor?

Something else I noticed, why in text justify the space between letter breaks up? Shouldn't it be just spaces between words? I thought of that behaviour to be quite odd.

Thank YOU!

 

Whatever font this user picks, it has to come from either a TrueType or OpenType font. Are these font files already included in your project or are you talking about a user actually importing a font at runtime?

Looks like the Arabic character set is comprised of 28 characters which can take different forms / combinations... as a whole, do you have an idea of the number of potential combinations? Ultimately, 1000's of characters can be packed into an Atlas. Once they are in the Atlas, any of those in any combination can be displayed at any size and with virtually an unlimited number of visual looks.

It is not.

After I ship version 1.0 of TextMesh Pro, I can look at implementing a version of text justification that combines word spacing and character spacing so you don't end up with too much space between words or characters.

 

I've got a 3 foot beard waiting because of my solemn vow to never shave unless it's done with razor sharp SDF text. Help me once again experience the feel of a smoothly shaven face.

 

BTW, SDF explained

 

Count me in.

 

This thread is killing me. I'm going to buy the hell out of this TMPro when it arrives.

I heard it was going to be this week! >.>

 

TMPro is now feature locked, and thats good news.

So for the time being I will give more details on the TMPro Surface shader for 1.0.
(The first screenshot show Arial rendered as part of a scene with 3 lights)

The lighting is done by Unity, and for this reason we offer two versions of the surface shader.
A full featured one, and a mobile version that is simplified for performance reasons.

To have this render efficiently in real-time, the original Arial.ttf font is converted to TMPro own font format.
uncompressed : Arial.ttf - 761K , full ASCII set Arial.tmpf - 268K
compressed : Arial.ttf - 421K , full ASCII set Arial.tmpf - 98K

The 4x saving mainly come from the fact that the new asset include the full ASCII set. and not more.
(The font asset can be further compressed using various options, but thats for another post.)

But the main reason to change font format, from a set of bezier curves to a distance fields, is for real-time rendering lighting.

TMPro leverage the distance field in multiple ways. One is to generate high quality alpha channels, another to generate normals.
A dynamic 3D beveling option is used to create the inset bevel look in this example.
No normal map need to be generated or stored, its generated from the font data when rendered on screen.

Having said that, it is also possible to provide a normal map that can be applied on either/or the face and outline.

Since TMPro object have per pixel normals it is then possible to apply an environment map for reflections.
(Second screenshot, using the same Arial font asset)

TMPro object cast scene shadow, take care of dual sided lighting (1 mesh for both side), and objects sharing the same material are batched by Unity. (See second screenshot for Unity directional light shadow)

Another option is Emissive glow (Third screenshot below). Glow is controlled via 6 properties allowing a wide range of looks.
See the last 2 screenshot, but also older posts in this thread.

TMPro surface shader also support the following:
Per vertex color transparency, outline face texturing (color alpha), face dilation outline thickness control and edge softness. (And all the general text formatting, bold, underline, italic,..)


note: I'm using the free version of unity, so all the screenshots I post are from the free version.


This scene include a single directional light with a skybox, providing lighting and the ground shadow


Emissive glow, with a red point light attached as a children of the TMPro object to light surrounding scene objects.


Glow control example

 

This really looks good!!

 

@sschaem
I missed something: you and the OP (Stephan B) worked together? As a developer or a beta tester?.
Do you have an ETA for the final release?

 

Stephan and I are working together on TextMeshPro.

We are getting very close. Will release a Beta first to be on the safe side. The Beta should be released within the next 7 days and then if all goes well, release it in the asset.

 

Sounds brilliant. Some last minute scares from my side:

- We work with console and sometimes mobile, so speed is really the number one most important consideration for us in choosing what quality we can get. So I am hoping there will be some fast plain options without all the details (mostly for us it's about quality rendering plain text).

- Wondering if changing the colour of a text mesh is via vert cols or shader. Vert cols would be nice for batching + various reasons if possible

- Can't wait!

 

With regards to Distance Field shaders, there are (4) at the moment. Standard Distance Field, Surface Distance Field, Mobile Distance Field and Mobile Surface. The Mobile Distance Field shader is a reduced feature set highly optimized shader for performance (basically your fast / plain shader).

Colors can be set via the following properties.

TextMeshPro.fontColor
Color32 color;

Code (csharp):

1. textMeshPro.fontColor = new Color32(255, 128, 0, 255); // This will affect the Vertex colors.

TextMeshPro.faceColor
Color32 color;

Code (csharp):

1. textMeshPro.faceColor = new Color32(255, 128, 0, 255); // This will affect the  "_FaceColor" property of the selected shader.

TextMeshPro.outlineColor
Color32 color;

Code (csharp):

1. textMeshPro.outlineColor = new Color32(255, 128, 0, 255); // This will affect the  "_OutlineColor" property of the selected shader.

Neither can I

 

To expand on Stephan answer.

The non surface shader (The one that dont interact with scene lighting) come in two flavors.
And if you dont need fancy shading (bump mapping, env mapping, ..) you can switch to the 'Mobile' version.

All shaders provided also allow you to turn on/off features at the compiler level that matter to you to increase performance.
The big issue we had was not to blow up shader count (specially for surface one)

To give some metric, the shader that provide outline control (Color + Alpha and thickness) + face color (Color + Alpha) with dilation, vertex color (Color + Alpha), boldness and edge softness clock in at : ps_2_0 : 8 ALU, 1 TEX

If you add a second underlay layer with its own offset control, dilation, softness, color (Color + Alpha) it then clock in at ps_2_0 : 13 ALU, 2 TEX. Here is an example of this shader.

This is the HLSL code that generates the 3 alpha layers according to your parameters for the face, outline, underlay, then perform RGBA alpha blending (correctly I should add) off those 3 layers.

texld r2, t0, s0
texld r0, t2, s0
mul r0.x, r2.w, t1
mov_pp r1, v1
add_pp r2, v0, -r1
add_pp_sat r1.x, r0, -t1.z
mad_pp r3, r1.x, r2, v1
add_pp_sat r0.x, r0, -t1.y
mul r1.x, r0.w, t4
mul_pp r2, r3, r0.x
add_pp_sat r1.x, r1, -t4.y
mad_pp r0.x, -r3.w, r0, c0
mul_pp r1, t3, r1.x
mad_pp r0, r1, r0.x, r2
mov_pp oC0, r0

If you dont need the underlay layers (to get a highlight, hard/soft shadow, glow, second outline ,etc..) the compile switch kick in and the shader drop to this.

texld r0, t0, s0
mul r1.x, r0.w, t1
add_pp_sat r0.x, r1, -t1.y
mov_pp r2, v1
add_pp r2, v0, -r2
add_pp_sat r1.x, r1, -t1.z
mad_pp r1, r1.x, r2, v1
mul_pp r0, r1, r0.x
mov_pp oC0, r0

We could add a another compiler switch to reduce this if no outline is applied, but at this stage we decided not to.

 

It all looks good - you'll probably include shader source right? so we can optimise further if we really have to

 

The shader code will be available just because I'm actually looking forward to your feedback

Also thanks to all of you that shared so much enthusiasm with what we presented so far!
I'm new to this community, and I have to say that I'm impressed how civil everyone is.

Well, back to the grunt work of the finishing touches...

 

Almost there... Just a few tweaks to the manual, building the Native Plugin for the Mac and we are ready to get the beta out.

Here is a picture showing the layout of the TextMeshPro Inspector Panel as well as the Material Editor Panel.




Here is the folder hierarchy along with the scripts and shader files. Let me know if you have any questions or suggestions on these.

 

Underlay

A new handy option was added to the Mobile and Normal SDF Shaders called Underlay. Underlay allows for an under layer to be added to the object. This Underlay can be used to simulate a shadow or outline for instance. Here is an example...





Here was can see a nice soft shadow added underneath the letters. You may have also noticed that Underlay does not add anymore geometry since it is done inside the shader. More importantly it is relatively inexpensive to do which is why it was also added to the mobile shader.

 

How do I get on board with the beta?

 

I revised how line justification is handled. Here is an image showing different options. I am leaning towards using the 60 / 40 blending mode.

 

Much better.

 

Since you've got them all, what's the downside to exposing the line justification ratio?

 

I am also wondering how to get into the beta. Everything so far looks great!

 

60/40 looks like a good default! An advanced option to tweak it might be neat if it does not clutter the interface too much.

 

I was simply hoping to avoid adding more UI Controls

When Justified is selected, I could have a slider show up representing the blend between words and characters. This would be per text object controls and default to maybe 60 / 40. This ratio could be changed via the API...

 

I'm pretty sure this one deserves a single slider for ratio though because it's one of those taste things, and it might actually not be one size fits all depending on font used. It might look better with chunkier fonts to not spread them much, or it might look better with calligraphic ones to spread them I don't use justification, I am just thinking out loud here from end user POV.

 

Here is the panel with the control over word wrapping. This slider only shows up when Justified is selected. Slider at zero fills the space by making the space between words larger. Slider at 1 fills the space by increasing the space between characters and somewhere in between 0 and 1, it blends between the two.

 

Eta?

 

Screen grab : Testing the Arial TTF as a 64K TMPro font asset.

The Arial TTF ascii set was converted to a 256x256 SDF texture (64K). (This is what you include in your game)
Result is about 3x smaller then the original TTF.

Extrapolation, over 6,000 characters can be packed in a single 2kx2k texture. using 4MB total of video memory.

To be noted. The font styles are not pre-rendered.
This allow you to scale the text to any size with no CPU usage and no allocation of any kind on the CPU or GPU,
and since your visual treatment is dynamic anything can be animate at will (done on the GPU).

In the bottom right you see the map used to render the few styles you see in this test.
For the big titles, a texture is used on the face, the bottom one use a bumpmap.

A beta package is around the corner, but I wanted to share some data as we internally test this preliminary release.

Open in a separate tab to view 1:1

 

A cursive font test

Open in new tab to view 1:1

 

So, in preparation for this beta, would one want to create new labels as TextMesh to be swapped with TMP? (just considering workflow here)

Also, do you have any working examples of TMP within vertical or horizontal scroll views?

And how about input text field? Will that be a possibility?

Anxiously waiting for this beta!

 

The system does have the option to use soft mask and scrolling.

ATM, you define a clip region (in object space) and a falloff.
You can then use the scroll X Y to pan your Text block in that region.

This will probably be refined during the beta as we get feedback...

With softness

 

This is the most impressive text rendering system I've ever seen in a game engine. If you guys are still looking for people to join the beta, I'd like to register my interest.

 

Switching over from TextMesh to TextMeshPro should be pretty simple as many of the properties match those of TextMesh.

Code (csharp):

1.  
2. // TextMesh Object - using default Arial font.
3. TextMesh textMesh = gameObject.AddComponent<TextMesh>();
4. textMesh.font = Resources.Load("Fonts/ARIAL", typeof(Font)) as Font;
5. textMesh.renderer.sharedMaterial = extMesh.font.material;          
6. textMesh.fontSize = 48;
7. textMesh.anchor = TextAnchor.MiddleCenter;
8.  
9.  
10. // TextMeshPro Object - using default Arial SDF font.
11. TextMeshPro textMeshPro = gameObject.AddComponent<TextMeshPro>();          
12. textMeshPro.fontSize = 48;
13. textMeshPro.anchor = AnchorPositionTypes.Center;
14.  

I encourage you to watch "Creating a TextMeshPro object via Script" if you haven't done so already. It should give you even better insight into this process.

In terms of labels, there are some differences in Rich Text Tags like; Unity uses <color=#FF8000>. TMPro uses <#FF8000>. I simply didn't feel like typing "<color=" all the time.

If you plan on using TextMeshPro.SetText() to format your text and avoid GC, then yes you would need to modify your string labels. Details on the SetText() function is here in this thread.

It won't be available in 1.0 but it is definitely in the list of things to add. I don't anticipate any real technical issues implementing text input / editing in game view.

Me too!

 

Thank you so much. Simply doing our best to make Unity look good



Here is an attempt at a new tag line / logo treatment for TextMesh Pro. Obviously this is all done using TMPro. The image is captured from scene view using a white background.



In terms of an update, it is super close. All looks good from a feature point of view. Shaders are humming along. Manual is still work in progress but it is close enough for Beta. All that is basically left is for me to purchase a Mac to built the Native Code Plugin and then a few days of solid testing to make sure it all works. Just keep your fingers crossed with me and hope nothing new / major pops up and Beta will finally be here

 

Here is another potential treatment for a logo.

 

I like the second one better. The first one is too busy/crazy.

 

'TextMesh Pro!' from the second picture
'Advanced Text Rendering for Unity 3D' from the first.

 

If these are just posted to showcase possibilities, or your intention is to generate a logo using the tool you are selling, then by all means disregard the following...

If you need an artist's touch, I can hook you up with some high quality freelance designers (that won't break your wallet), just let me know.

Sometimes, its best to let an "outsider" handle branding/design.

 

* snores gently expecting some form of asset store release or a place to throw money *

 

+1 for what ZJP said

 

I vote for the title from the second as well and would completely remove the sub title. It doesn't contain any information that is not expressed by "pro" already.

+2 to Hippo

 

Hi 2 all! Any progress with asset release?

 

I would like to know the ETA as well

 

The User guide, API Docs, and most importantly the product (code) feels ready enough for the Beta. The only missing piece is the Native Plugin used by the Font Asset Creator for the Mac which I am finally able to work on having acquired a Mac. So barring any unforeseen issues, Beta should be right around the corner.

Sorry that it is taking longer than expected. Those darn computers seem to have a mind of their own

 

Here's the weekly post begging for an ETA

 

bump

 

The OS X plugin is finally working using multi-threading.

I was able to run our different test scenes on an iPad 2, iPhone 5c and iPhone 5s. Performance is still looking great. All the unlit shaders are working nicely.

The SDF Surface Mobile is working fine on all devices but obviously using multiple light source on mobile devices isn't ideal. The normal SDF Surface wasn't is more for desktop apps. It does work nicely on the iPhone 5s but requires opengl ES 3.0.

So basically, I believe we are ready to begin Beta. To be sure, I will be providing a few developers with a Beta on Monday and if all goes well, I will be opening it up to more developers shortly thereafter.