Text follow a curve?

Is there a way to get the text to follow a curve or circle?

 

There is if you use Text Mesh Pro. See the following post which includes this example.



The script to do this is available on the product's user forum here. There are also similar scripts to animated the text included in the examples with the product.

 

@Nikola B. Gah you beat me to it. Yes TextMeshPro is one of the best solutions for this. We've looked in to it in the UI Extensions project but that is using the legacy text renderer solution, so as TextMeshPro replaces this, I find it much better.

 

If all you want is curved text, TMP can be pretty expensive and a bit heavy to add into your project. Plus, TMP doesn't use normal text box, making it harder to use with other stuff (like an input field, for example). It's great though if you want a lot more features, and we do use it in several projects at work.

However, I did find a smaller script for one of our projects. I would suggest the following

Note there are a couple things you might change though. If you look in the comments, someone modified the curvedText.cs script to allow curving in the other direction.

The other thing I did was comment out the OnValidate method as it was giving me some trouble. Other than that, it works great and has continued to work in all newer versions of unity.

Just remember that there are two scripts, one for the curve and one for the editor, so get them both.

 

Interesting @Brathnann will check that out and see if the version in the UI Extensions needs an update using that.
However depending on how much text is used, the Unity text system isn't efficient with walls of test (as each character is a quad), hence what I usually recommend people to use TMP. There is a price but from what you get it seems very much worth it.

But as ever, each to their own and if you are only using a few test boxes or labels, then the Unity text system is "good enough" (tm)

 

Correct, for my project, this is being used for a few headers and such that needed a bit of curve. And since it was a webGL project, needed to also keep the project small, so tossing in TMP would have added in a lot more than was needed.

TMP is a great asset if you can catch it on sale, but for your average starting out, it can be a bit much at full price. Plus, it's only downside(unless they have updated it) is it doesn't support input fields or have it's own version of it yet.

I have not seen that UI extension project before. Interesting. Will have to bookmark it to see what is there.

 

TextMesh Pro uses a RectTransform and the Rect Tool just like UI.Text and supports all the layout components available with the Canvas system.

Top is UI.Text and Bottom TMP.

The only change in terms of the controls are the extra white dots to control the margin which is added functionality. So from a use point of view, there is no difference with UI.Text other than the additional functionality offered by TextMesh Pro.

The Text Input Field was added to TextMesh Pro a few releases ago.

In terms of the curve tool you showed. I like the functionality and if you have TMP, you should modify the CurveText script to add those extra controls. I am sure that other TMP users would interest in that.

In terms of the size for WebGL, I'll run more tests but I believe if the Examples folder is removed and you only include the shaders that you are using, the size difference should be marginal.

 

By heavy, I mean it adds more stuff to your project and may or may not confuse some people because of all its features. The script I linked is very light in comparison if all you want is curved text.

TMP has it's own scripts. And since unity includes all scripts in builds, and since all scripts are packed into a single javascript file(for webGL), the less code there is, the better for webGL right now. The link below references where Eric mentions that scripts are all included.

http://forum.unity3d.com/threads/does-unity-include-all-assets-on-build.88781/

Don't get me wrong, we use TMP for projects at work, this just wasn't a good use case for the webGL project we use at work. And it's a inexpensive option for the OP if they can't afford TMP.

 

You can also use other systems with TMPro such as MegaFiers, in fact MegaFiers will curve any mesh based font but it does work brilliantly with TMPro

 

If you're looking for a simple way to do it with Unity's UI text, go for Curvy Text on Asset Store. It's just 5 bucks and get you job done before you can spell curved text

 

I think UI Extensions is fantastic!

 

For whoever may be interested, I had to create a TextMeshPro text that followed a circle, so I had to bang my head to modify the WarpTextExample... but in the end, I obtained something that worked decently!

To help other devs in the community in the same situation, I have created a repo with my scripts. I have also filled them with comments so that they are easier to understand. Feel free to use them in your projects!

https://github.com/TonyViT/CurvedTextMeshPro

Have fun

 

Hey TonyVT! Your scripts are great and work very well!
I would however like to have my individual characters not be rotated and also have the text seperated by words instead of characters.
Think of it like a analog clock (e.g. both characters for 11 and 12 share the same "spot" on the clock).

I managed to disable the rotation by just changing this line in "TextProOnACircle":

Code (CSharp):

1. return Matrix4x4.TRS(new Vector3(newMideBaselinePos.x, newMideBaselinePos.y, 0), Quaternion.AngleAxis(-Mathf.Atan2(y0, x0) * Mathf.Rad2Deg - 90, Vector3.forward), Vector3.one);

Into:

Code (CSharp):

1. return Matrix4x4.TRS(new Vector3(newMideBaselinePos.x, newMideBaselinePos.y, 0), Quaternion.identity, Vector3.one);

But I just can't figure out how to get the characters of each word to stay on the correct "line/position".