[Solved] How to create a thick Text Outline?

I've added the "Outline" component to a UI object with a Text component and it adds a thin outline to it. I'd like to make it a lot thicker but cannot figure out how to do this.

 

Bump.

 

You can change the Effect Distance for X and Y but if you increase the values too much, it won't look good since this FX is done by stamping 4 copies of the text. Be aware that using these Ui Effect greatly increase the geometry count and have significant performance impact.

 

You can use this open source project: https://bitbucket.org/ddreaper/unity-ui-extensions

It has a component called NicerOutline which is basically just a thicker outline. Note that it's more resource heavy.

 

If you need more flexibility, you can always take a look at TextMesh Pro. When it comes to Outline and Shadow those visual styling effects can be added dynamically by tweaking material properties. See the following gif.



Once you achieve the visual look you desire, you can create a Material Preset which then allows you to assign these to any text object.

In terms of performance, a text object using Outline and Soft Shadows in TextMesh Pro is more than 10X faster than Ui.Text with Outline and Shadow Effect. See the following information from a previous post for details.




Top object is Ui.Text and bottom is TextMesh Pro.

 

Shameless ad?

Looks great.

What's the performance like for mobiles?

 

Re-ran those tests on an iPad 2 where the text is updated each frame and here are the results from the profiler.
Ui.Text ~0.55ms
Ui.Text + Outline + Shadow ~3.30ms
TMP + Outline + Soft Shadow ~0.41ms

Basically, we get the same performance when using plain text (slight edge to TMP) but when adding Outline + Shadow, TextMesh Pro is more efficient.

 

Sorry to dredge up an old thread, but I was having this problem and found this thread.

None of the solutions here were ideal for me, but I found a good, lightweight solution.

https://github.com/n-yoda/unity-vertex-effects
(The component called 'CircleOutline' in particular)

Open source & free, too!

 

Just be mindful these techniques duplicate the underlying geometry several times which can be crushing on performance especially on mobile devices.

Unity's Outline FX depending on the device is about (3X / 4X) slower than plain text. The Outline increases the geometry count by 4X. So a single character which normally is 4 vertices in this case is 20 vertices.

Using "The count is 100" with UI.Text (plain) is 72 vertices (as they are allocated in blocks). Ui,Text with Outline with the same text is 488 vertices. CircleOutline with the same text is over 1,100 vertices.

In the case of this CircleOutline, it is twice as slow as UI.Text with Shadow + Outline which is already super slow (too inefficient for mobile use) and more importantly, it generate allocations (GC) every single frame which is even worst.

 

I'm not sure this is considered lightweight. I would be concerned about the performance hit, specially on mobile.
Specially since it needs to draw the text 61+ times, even for a relatively small outline.
(And this does not support semi-transparent outline)

 

Now that TextMesh is included with Unity I have no problems.

 

Text Mesh Pro is no longer on the app store?

 

It is still available and free now https://assetstore.unity.com/packages/essentials/beta-projects/textmesh-pro-84126

 

congrats on getting acquired! found out shortly after

 

Since this thread is still open...

NicerOutline causes a lot of GC.Collect spikes, and unfortunately I couldn't manage to improve it much. Currently I don't need the complexity of TextMeshPro for my project and I would like to just make some quick changes to the original Outline component. Is the source code of it somewhere?

 

The TextMesh Pro text component(s) do provide substantial added functionality and would provide better performance especially when it comes to visual styling of the text. Although the tool is more complex as a result of all the added functionality, at the basic usage level it isn't that much more complex than UI Text but will give you a lot more flexibility should you eventually need it.

Using the Unity FX Outline and / or Shadow scripts results in a potential of more than 4X geometry count increase which can have significant performance impact on mobile devices. In addition, the Outline and / or Shadow still looks bad. Other scripts that try to create nicer looking Outlines increase the geometry count even more thus further impacting rendering performance.

If you are using Unity 2018.1, be sure to use the package manager version. The latest release of TMP for Unity 2018.3 includes the new Dynamic SDF system which makes managing font assets / character sets much more easier in regards to localization.

 

Thanks. To be more specific for my project...
- Game is not mobile
- Font must be dynamic, not bitmap, to have fallback to missing characters and complex languages
- Font is pixel-perfect with a 1px outline
- Texts with outline are really few

I will try TMP anyways though I'm not a big fan of it (but does it support Dynamic fonts? Can't remember).
My idea is dead simple anyways. It would be to sill use the standard Outline, but rendering the four shadows in a "x" pattern instead of a "+". Nothing more than that really.

 

Up.
I managed to fix all the GC spikes on the original NicerOutline script, was much easier than expected. Code is here for everyone.

 

Hi @Stephan_B , not sure if this is the right place to ask. I'm using Arial Black and it doesn't seem to be affected much by the Material Outline in TMP. Any suggestions?

 

The Ratio of Sampling Point Size to Padding determines the effective range of material properties like Dilation, Outline, Underlay Offset, etc.

What is the Sampling Point Size and Padding of your font asset?

 

Thanks for your response Stephan. It's currently 77 and 1 respectively.

 

The above values results in a sampling point size to padding ratio of 1.2% which in turn means the outline can only be about 1.2% of the size of the face of the text.

As per my previous posts, the effective range of material properties like Dilation, Outline, etc. is determined by the Sampling Point Size to Padding ratio. A typical ratio to use is about 10% where in this case, your padding values would need to be about 7 ~ 8.

Simply regenerate your font asset to increase the ratio.

P.S. There are several posts / threads about Sampling Point Size to Padding ratio. I would suggest doing on search on those to get additional information.

 

Thanks Stephan, I am getting a blurry font atlas when I do that though. Any suggestions when that happens? Thanks!

 

Isn't there a simpler method than using the TextMeshPro feature?
Textmesh Pro will generate a new TMP asset for every type of outline text per settings (thickness, color, etc...)