CPMStar Ad

Naughty Who @ indiedb

Tuesday, February 18, 2014

[unity] Text and Fonts #gamedev


Unity has more then enough ways of text output.
The easiest is – GUIText. The simplest way is to create it directly in the editor (GameObject -> Create Other -> GUI Text), then attach a script for the guiText field to it, which will allow to change the parameters of position, style etc. There is an even easier way – choose the GUI.Label(rect,string) in the OnGUI() function.I won’t put an emphasis on coding and I want to mention the next key moments:

 + the possibility to use TrueType fonts and primitive formatting.
 + writing codes is easy
 + it’s a standard class
However, this complex wasn’t good for creating a dynamical menu with various transition animations, because:
- turning and stretching transformations are impossible (not all elements of the future game menu will require such modifications, but a more flexible component is still important)
- there’s no BitmapFont support
- Each new writing adds another DrawCall (it’s not fatal for the Desktop, but as for the smartphones, it may be the reason of a slower functioning, however we haven’t completely analyzed this phenomenon and its consequences yet)
The next way is – 3dText. Its point is that it’s displayed on plane mesh, which allows to apply all of the transformations to any 3D object. Just like the GUIText it supports TrueType fonts and primitive formatting. The internet is full of various free and not free apps for different customization, including the support of the BitmapFont. This component has an interesting DrawCall behavior: creating a couple items doesn’t enlarge the DrawCall amount, but applying the transformations adds one for the each transformed item. If two objects have the same transformation parameters (for example, 45 degrees turn) they will share one DrawCall.
During my fanatical search for the DrawCall maximal reduction, I came up with the idea to bring the render right into the texture of buttons and other elements. In that case, the text would cause practically no enlargement. I didn’t find much information on the Web about the matter, here’s one of the free ones, however for some reason I rendered the text upside down. After studying the code I added this line in the class Texture2D_Extended in the end of the function DrawText, right before Color[] basePix = tx.GetPixels( offsetX + x, offsetY + y, w, h ):
charPix = Colors_FlipVertically(charPix, w, h);
I didn’t try to understand why it was upside down, at least it works)
 If you’re rendering into the texture, which is a part of the texture atlas, it's more than likely that you won’t see the result. The thing is, it will be displayed with respect to the left lower corner of the whole atlas texture and not the sprite region, so be careful.
I found no free ways of how to render the bitmap-text into the texture, however I think they’re there somewhere on the Web and are just hard to find :) What’s great, is that in case of a strong need it’s not hard to do that on your own
During this search, I also found plenty of engines. Unfortunately, among the most popular ones only two are free Futile 2d and Orthello 2d. I didn’t probe deep into the matter, but I liked Futile more, as it sometimes reminds flesh) Another moment – all of the settings are made with a code (it’s much easier for me than to look where what and how to place something on a scene and what to drag where). In general, during the menu prototype creation, it’s much easier for me to work with this engine than with the new 2D functions of Unity 4.3, but I haven’t figured them out completely yet so the priorities may change.
Futile 2D and Orthello 2D support text inscriptions with the usage of BitmapFont.
The positive side of these fonts is that you don’t have to lose time on their visualization.
There’s a lot of articles on the Internet about how to generate such fonts, so I’ll just duplicate their algorithm:Download for Windows or Mac OS
1. Choose the font, symbol range and all possible export parameters

2. After the export we receive the image and a text file
3. You can  apply additional effects to the image

4. It’s better to place the image into a texture atlas (I’m using the following program). And on the way out you’ll receive another image and a text file
5. From this point your actions depend from the framework. In case with Futile it’s best to use the LoadFont function where you need to indicate the name of the sprite with the font and the path to text file with the font information in the Resources folder.
If you’re using one font, the availability of drawCall doesn’t depend from the amount of the created inscriptions and their transformation :)
P.S. Don't forget that text is case sensitive ;)

+ Pity that framework doesn't work with new features in Unity 4.3, I guess it fixes soon.

Hope You like it, see You next week :)