Text Box

Catlike Coding's Text Box 2
for advanced text layout in Unity
​

Want to do some serious text layout in Unity? Now you can! Mix custom styles and fonts. Write your own renderers. Create multi-column layouts. Flow text around custom shapes. Use nested clipping and scrolling. Support clickable text. And it renders fast, on mobiles, with dynamic text, while keeping memory clean.

Text Box 2 is currently in beta. New features are released regularly, but documentation is still sparse. Text Box 1, which still runs on Unity 3.5.7, is also included in the package.

Version 2 beta 3.2 is now available!

$45 on the Asset Store

Product Pag, Demos, and Docs


​

(Below is the introduction for Text Box 1, which works with Unity 3.5.7 and is included with Text Box 2 beta.)

Here's a text box that is powerful, fast, efficient, and runs anywhere. With word wrapping, text justification, character modififcations, outlines, shadows, and other fancy effects. For when "just text" isn't good enough and you want the ultimate text solution for Unity.

Features

What key features does the ultimate text box have? I say these:

• Automatic word wrapping
• Text justification
• WYSIWYG editing
• Color and placement modification
• Excellent performance
• Memory-friendly dynamic content
• Clickable text
• Fancy text effects
• Bitmap font importer
• Gradient tool
• Documentation
• Support

It renders text using imported bitmap fonts, which means you can include exactly those characters you want, packed as efficiently as possible. There are multiple free tools to do this with. All characters from the Basic Multilingual Plane are supported.

Screenshots

Here's some screenshots. All text is rendered using distance maps, the effects are applied by modifiers and shaders.
(The images get scaled down a bit to fit the forum, open them in a new view to see them at full size)


vertical gradient plus outline, text justified and set to stay inside the box width


shadow added with a shader


marked text colored yellow with a modifier


wrapped around a cylinder with a modifier


text made vague at a distance with a shader

Those screenshots were all from editor mode scene view, by the way. Here's one with the text selected.



And here's the text component's inspector.



You also get a gradient asset, for those extra special color transitions.




Demo Scene

Here's the demo scene, running on an iPad.



Demo Video

Here's a demonstration video that shows how to get a nice text box up and running.

Go grab it from the Asset Store!

 

Any idea of price? This looks like an absolutely solid text system that I can't wait to use for my games.

 

Nice tool!
Does it support to display a text from a variable inside a script? for a high score?

 

Looks like a pretty useful and well made tool. Can't wait to see what it will cost. But so far, nice work!

 

Yes looks very good. +1

 

no demo?

 

How do you render text? Does it support other languages?

 

@nickgravelyn @Chickenlord

As it stands now, the initial release version will be available for $45.

@Lars Steenhoff

It definitely supports variable content. It actually supports a very memory friendly method to do so, via a StringBuilder object. I have also included a utility class with useful methods for getting ints and floats into StringBuilder object without a hassle.

There's a simple high score list example at the bottom of the text box component's scripting documentation page.

@imtrobin

You were ahead of me! I just made the demo scene available as a webplayer.

@mente

Text is rendered by drawing a mesh full of sprites with character data from a bitmap font. The nice text effects are achieved by using distance maps and shaders. Text Box has its own font asset that imports BMFont-compatible bitmap fonts. There are multiple free tools for converting TrueType fonts to bitmap fonts, which allow you to fine-tune the characters to include. You can use my free Unity tool for generating distance maps.

Many modern languages are supported, the text box can handle all characters in the Basic Multilingual Plane. All you need is a font that includes the characters you want.

 

looks good. 2 questions

1. How is performance, number of draw calls?

2. Asian language support?

 

@imtrobin

1. Performance is excellent! As fast or faster than Unity's own TextMesh, while it does more. It's one draw call per text box, ignoring Unity's batching and such.

2. Anything in the Basic Multilingual Plane is supported, though only left-to-right and rendered as-is, with kerning. So languages like Chinese and Japanese are no problem, but it won't do any smart rendering of Arabic characters and such.


"Hello world" in multiple languages, according to Google Translate

An advantage of bitmap fonts is that you can prune characters. I used a TrueType font with thousands of chinese and japanese symbols, but only imported the few that were necessary to display "hello world" into Unity.

 

Edit: nm!

 

Not to criticize your pricing, but $95 for just a UI system? Considering that Unity already has a UI system and is available for free, $95 seems a little steep.

Of course, if "just a UI system" isn't good enough, then $95 is a steal for the features your UI system has. Right?

If you want "just text", Unity has that covered for free.

 

The price seems high to me as well ... I would have thought something around $20. However, it's your product so best of luck.

 

I'd certainly spend way *waaaaaayyy* more than 45 bucks in time to implement these. This came at a perfect time for me as I was *just* about to implement many of these features myself for my next game.

I'll gladly pay the 45 bucks for this. It does not have good competition in the asset store that I know of, so it's not fair to compare it's price tag with that of UI systems, which currently are the assets that are competing the most.

 

Fair enough. I actually re-read what your product does. I completely missed the distance maps part. That's actually pretty cool. I suggest you market it as the perfect solution for text decals.

 

I made a short demonstration video that goes through all the steps necessary to get pretty text.

@petrucio

That's fortunate timing! The product is pending review and should be available in a few days.

@ArenMook

Thank you. I'll keep marketing it as an all-purpose text box though. Lots of people looking for text don't know what decals are, even if they're using them.

 

Text Box is now available on the Asset Store!

Grab it for just $45!

Strangely, the initial release contained files that were outside the project and shouldn't have been included. It also lost its screenshots. I worked with Unity to get an update on the store within an hour that resolved all this. Still, people managed to buy it during that time, so please fetch the product again if you're one of them. I did use the opportunity to sneak in a tiny bug fix concerning prefabs.

 

Version 1.0.2 is in the pipeline. It will contain some WYSIWYG improvements and support for multi-object editing. You will also get a new text modifier that tweaks vertices instead of colors.


With minimum effort, you can wrap your text around a cylinder.

 

This package looks great only there is one feature that I can't tell if it is available in any way or how hard it would be to implement. Can you easily detect which letter or word you are touching? Some sort of raycast to word would be ideal (for providing links, access to dictionaries, etcetera).

 

That sure sounds like a useful feature! So I've included support for it in the upcoming version 1.0.2. If you add a mesh collider to the text object, it will work with ray casts and you can ask it to convert hit info into a character index.

As I currently seem unable to log into the package manager, I'm not sure how long you'll have to wait before 1.0.2 becomes available. I hope it'll be a few days at most.

 

Version 1.0.2 is out!

1.0.2 Changes

Added CCTextCylinderWrapper.
Added MeshCollider support.
Added multi-object editing support.
Improved WYSIWYG editing.

Here's an example component that shoots a ray when you click and debugs the index of the character that was hit. You only need to add a MeshCollider component to the text object to make this work.

Code (csharp):

1. using UnityEngine;
2.  
3. public class HitTest : MonoBehaviour {
4.  
5.     public CCText text;
6.  
7.     void Update () {
8.         if(!Input.GetMouseButtonDown(0)){
9.             return;
10.         }
11.         RaycastHit hit;
12.         if(Physics.Raycast(Camera.main.ScreenPointToRay(Input.mousePosition), out hit)){
13.             Debug.Log(text.HitCharacterIndex(hit));
14.         }
15.     }
16. }

 

I noticed that textbox support chinese/japanese font,also support all the font effect? like shadow/outline?

 

Yes, if you provide a font that includes the symbols, you can use chinese and japanese text. Keep an eye on your atlas size though, only include the characters you need when creating a bitmap font.

Yes, shadow, outline, and other visual effects are provided by shaders and the distance map generator.

 

Version 1.0.3 is up next. Currently, Unity chokes on Text Box when building for Flash. I fixed that. I also added a neat torus wrapper! Expect the update on the Asset Store in a few days.


Lorem ipsum donuts are the best!

 

Just bought a license,good for english text,but not handy for using unicode font(CJK),,also the shader effect is not good for CJK font,so not recommand for asian users!

 

Thanks for buying Text Box, liverol! Please let me know what trouble you're having, because it should just work. If it doesn't, I ought to fix it.

Having said that, CJK fonts are definitely tricky. First, the font atlas can get positively huge. Second, if you have a font that contains the characters as rasterized bitmaps, then you're stuck with the resolution of those, which is usually very low. It really pays off to use a font that does not rely on bitmaps.

Here are two examples to show that it can work. I confess that I'm not really familiar with Asian languages. I picked some Chinese proverbs from wikipedia as test material. I hope I don't offend you with the choice of language and possibly unintended butchering of it.

Example 1: the whole CJK Unified Ideographs block

First, I use the free TWL Theme Editor to convert TrueType fonts to bitmap fonts. It allows you to select which unicode blocks to include, which is very convenient.

I use the Arial Unicode system font that's on my Mac.
I include the Unicode blocks Basic Latin, Latin 1 Supplement, Latin Extended A, Latin Extended B, and CJK Unified Ideographs.
With a font size of 28, I can fit all that on a 4096x4096 texture.

In Unity, I generate a distance map from that, which takes about half a minute. As a 4096x4096 Alpha 8 texture with mip maps, it requires 21.3 MB (don't forget to set the Max Size property, otherwise Unity scales it down).
The CCFont contains 21274 non-ASCII characters, which is an awful lot.

The resource requirement is huge, but I now have a text box that supports very many characters. I can apply some modest shader effects, but not much, because the font atlas doesn't have a high resolution and is very tightly packed.





Example 2: only what's needed

If I'm lucky enough to only need a few symbols, I can use a different approach. This time, I include no unicode blocks at all. Instead, I paste my Chinese proverbs text in the Manual characters box and that's it. With a font size of 30 and 3 padding in all directions, I can export that on a 256x256 texture.

In Unity, I again generate a distance map, which can extend further this time, because there's lots more space between characters. As a 256x256 Alpha 8 texture with mip maps, this one only requires 85.3 KB.
The CCFont now includes only 51 non-ASCII characters.

I did sacrifice a lot of flexibility, but I gained text quality and the room to apply stronger effects.

 

Thanks for the details,i just try a truetype font and got some error,also the texture is really huge,will follow your hints to do more tests!

 

Awesome Product !!!
This tool make my life with Unity Text so much better !
Highly Recommend this ! A must have if you work with Text.
Performance is awesome... nothing better out there...
thank you Jasper !

 

I tested with TWL Editor,the auto-gen texture works,but i can't paste the chinese words to the Manual Character field?any hints?

 

@Muckel

Glad you got around to using it!

@liverol

I'm using a Mac and Command-V doesn't always work with the TWL tool, but there's a (right-click) context menu on the input field that lets me paste stuff. Pasted Chinese characters don't show up in the input field - because its font doesn't include them - but they do show up in the bitmap font and texture preview, if that font does include them. This is easiest to check if you don't activate any unicode blocks. If that still doesn't do the job, maybe another tool like Hiero might be an option. I hope that makes it work for you, please let me know if it doesn't.

 

This is a really cool product, any chance of multiply shader options in the future? not very good at shader coding myself, but this looks like a crazy complete kit

 

You mean combined effects shaders, like outline plus shadow? That's likely. I've created a set of default shaders that covers some default cases, but you can expect me to include more with updates, just like I'm doing with modifiers. What gets added is determined by what I think is neat and useful, and what people ask for specifically.

 

Awesome, I'm an official owner, I look forward to the updates. Combination shaders would also be useful, however, I was also interested in perhaps an "additive, and multiply" shader option for the awesome ones already included. I'd like the ability to multiply text especially Great system though, took a bit to get up to speed with the font conversion stuff, but overall it was pretty flawless thanks!

 

Hi Jasper Flick!
First of all, I'd like to thank you for your wonderful product.

I look arount to get Outline Text from TTF not from BMFont, and your Text Box looks support that.

If following conditions are possible, I'll purchase your article right away.

- Dose TextBox uses system TTF like Arial, NanumGothic...?
I am wondering if it uses ttf.
Other frameworks like EzGUI, NGUI uses BMFont but if I am going to add another language I should make korean BMFont and do so on.
It makes me hard to apply asian font.
It also makes me hard to change font in run-time.
But according to your words, it supports multligual font and it makes me interesting.

- Dose it supports korean like following image?
My goal is to implement the following text from any text by setting any font.

Please help me.

Thank you,
Adam.

 

I haven't mentioned it here yet, but Text Box version 1.0.3 is available on the Asset Store! It now works with Flash, and you get a nice torus wrapper.

@innercircus

Awesome!
You mean combining text as if they were photoshop layers? Something like this?


adding


multiplying

Adding only requires a blend mode change to Blend SrcAlpha One. Multiplying needs a bit more fiddling to get right. I can definitely put that in the next update.

@AdamWorld

Text Box uses (BMFont compatible) bitmap fonts. It doesn't use system fonts directly, you'll have to convert them yourself first. Basically, you can't get around using bitmaps if you want text in your game, at best the details are mostly hidden from you, like in the case of Unity's default TextMesh.

Text Box requires you to perform the conversion from TrueType font to bitmap font yourself, but it does allow you maximum control and flexibility. While this isn't trivial for CJK fonts, it can be done. As I explained a few posts upwards, you can either make a gigantic texture atlas, or a minimalist one, depending on your needs. The TWL tool is pretty handy for that purpose.

If you want to change fonts at run time, you'll have to include all required bitmap fonts in your project beforehand. Once you have that, you can switch the used font by changing the box's Font property and material. The demo, which is included in the product, is an example of this.

Please let me know if you have any more questions!

 

I like to have a spline wrapper anything really were i can pinch the the cylinder for desired efftect

 

Thank you for your kind reply.

I thought TextBox used System Font but you said it doesn't.
In asian language case, BMFont converted from ttf requires many capacity.
If I am going to use 10 different fonts, bmfont of all fonts will be huge amount of memory.
Other language like WPF, WinForm never used BMFont for the effect of Text.
They used system font directly.
http://www.codeproject.com/Articles/42529/Outline-Text

So I'd like to ask you one more.
Is it impossible to implement outline text from system ttf?
- If it's possible I want you to make TextBox implement it.
- If impossible, why?

Best Regards,
Adam.

 

@runner

I'm currently looking into adding curve/spline options to the wrapper. However, keep in mind that individual characters stay flat, so sharp transitions aren't going to look nice.

@AdamWorld

No, it's not possible to directly use a system TTF with Text Box. You must make the conversion to bitmap. That's because the Unity game engine is a very different environment than a windows forms application. The article you refer to uses the System.Graphics library to draw text in a desktop GUI. The Unity game engine doesn't use that stuff, it's all about drawing textured meshes at high frame rates.

If what you need more closely resembles a desktop application than a game, then maybe Unity isn't the best tool for the job, though I can't judge that.

 

Hi Jasper Flick!
I change my mind and decided to use BMFont.
My goal is to implement such text in following link.

https://skydrive.live.com/#cid=E514BFD96B4CE2AD&id=E514BFD96B4CE2AD!115

You can download and run it and see OutlineText and its effect.
That is my goal in unity ( with your TextBox if possible )
Without project for me it is difficult to figure out whether it will be possible or not.
If possible, could you give me a hint.

I implemented that effect in test outlinetext in following way.
place two outline text boxes (grey blue)
clipping second(blue) text box in OnTimer()
That's what I did in c#.

Personally, I think the price of TextBox asset is cheap,
But without for such effect, I would get your article in vain. Sorry for that.

Thank you.
Best Regards,
Adam.

 

Unfortunately, I can't see what you linked, I get an error instead.

This item might have been deleted, expired, or you might not have permission to access it. Contact the owner of this item for more information.

A screenshot will do though. I can't run Windows applications, in case that's what it was.

 

I am sorry for that
Skydrive doesn't seem to work on Mac OS.

The above image shows flowing blue color on grey color text.
As I said before, I did it in two ways in c#.
First,
placing two text box (grey blue)
clipping second blue text box in OnTimer.
Second,
using gradient.

Best Regards,
Adam.

 

I see three relatively straightforward ways to accomplish that in Unity, either with Text Box or something similar.

1) You can get a result similar to the clipping approach by using multiple cameras and tweaking the viewports. Will probably get hairy.

2) You can write a Text Box modifier to adjust character colors to get a similar effect, though that would blend the transition within each character. It will be possible to line-wrap the color progression though. Would probably work best for when you want to transition whole characters at at time.

3) Using a custom shader that colors pixels based on screen-space position will probably both perform best and be easiest to manage. This assumes you're keeping the text fixed in the viewport, like subtitles.

I guess it's a good idea for me to include solutions for options 2 and 3 in a future update.

 

Hi there. Say I have a lot of text. What if I have two boxes of a particular width and height, and would like to know at what character the first box overflowed, so I know what character to carry on from in the other box? Basically I'd like to fill text in 2 boxes, without knowing before runtime how much text I have (but certainly more than one box!). I can write code to fill in each box manually, but I'd need to know at what character box 1 became full, so I can provide the correct starting character to box 2.

So I don't really need the ability to auto-link a flow between x boxes. Rather, I'd like to know programmatically at which character a box is full, so I can manually decide what to do with the remaining text.

If you can support this kind of overflow indicator, this module would be awesome incarnate...

 

It's not a feature, but you could get something like that working yourself by investigating the character sprite vertices. As soon as you find one whose first vertex is below the threshold, you know it's overflowing from that character. You could use a custom modifier or similar approach to achieve that. The downside is that the box does allocate and place sprites for the overflowing characters, you'd need to either hide them manually or reposition them to get the flow that you want.

 

First of all, this looks like an awesome improvement over the the Unity text mesh. Thank you for making it.

Along the same lines as the overflow box, I would love to see the ability to have the text auto-scroll after a period of time. It would scroll vertically or horizontally until the end of the text is shown, then pause for another variable amount of time, fade out, and then fade in to the beginning again. Wash, rinse, repeat. I basically want to place the text on top of some static geometry in my scene, but I need the text length to be variable.

A demo version of the software would also be greatly appreciated.

 

Do you mean flat scrolling with text fading in and out, either soft or hard, or something more involved? The concept sounds simple but it could be done in dozens of ways, both its design and its execution. The scrolling and restarting is definitely stuff you have to script yourself. Depending on the details, you'll have to deal with custom modifiers that move and color text, or maybe a custom shader that clips the mesh will do. So it could be done, but there's no one-size-fits-all solution right now.

There is an online demo, but there's too little stuff I could exclude to make a free demo package available.

(Apologies for the late reply, I was ill.)

 

Hi! I am very interested in this tool, I have one question before I buy it. Does it acurately tell you the actual height of the text paragraph? For example, if you were to dinamically fill out a list with objectives.

 

Are there any restrictions on mobile devices? Any devices that the shaders don't work on? Can you get small but nice looking text working on all iOS devices for example?

 

Looks great. Here's a suggestion : textboxes that only take a numbeic value. It should be possible to display an int without having to create or manipulate strings at runtime. As you're probably aware, manipulating strings causes extra garbage for the GC to collect, which can lead to performance issues on some mobile devices, especially for score counters that are constantly updated.

 

@TenshiYuna: Yes, you can know the actual dynamic height of the box. You can get the line count, which is equal to the height if you use the default line height of one unit. Otherwise, you can factor in the line height. I guess I'll probably add a convenience "Height" property that does the multiplication.

Alternative approaches are to query the caret bounds or the mesh bounds, which might be useful depending on your exact needs.

@robin_notts: There's a collection of default shaders included in the package. The simple alpha-blending and alpha-testing shaders support fixed function pipelines and basically run on all hardware. If you only use pixel-perfect text without effects, then alpha blending is all you need.

The other shaders use distance maps and require at least Shader Model 2.0 (they fall back to either alpha-blending or alpha-testing). These shaders run on all iOS devices except the most ancient (iPhone, iPhone3G, 1st and 2nd generation iPod Touch).

@Mudloop: Text Box supports StringBuilder input, and I've included handy utility methods to write ints and floats to them. See the bottom of this page for an example. This allows exactly what you want: zero object allocation on updates!