Creating fonts

This is the place to find out how to accomplish something specific with EZ GUI.

Creating fonts

Postby Brady » Sun Sep 05, 2010 12:26 pm

To create a font for use with EZ GUI's integrated text, you will start by creating the font atlas. One of the benefits you will realize in EZ GUI's approach is that you can generate font atlases that only contain the characters you will use, letting you save lots of valuable texture memory that would otherwise be consumed with graphics never used in your game.

There are two free, third-party tools you may use to generate such font atlases:

Hiero (Cross-platform [Java]):
http://slick.cokeandcode.com/demos/hiero.jnlp

Angel Code's Bitmap Font Generator (Windows only):
http://www.angelcode.com/products/bmfont/

Both are easy to use, however you may find Hiero to be the easier of the two and has some "nifty" features, such as gradients, outline, drop-shadow, etc.

You will find a quick tutorial on how to use Hiero here.

The main things to note when using Hiero is to use a page width/height that is large enough to hold all of your characters on a single page. Click the "View" drop-down to verify that there is only a single page to your atlas. If there are more than one pages listed, increase the page height or width until it fits on a single page.

After saving the font atlas to disk, there will be two files: the font atlas texture, and the font definition file (which tells it where each character is on the atlas, plus kerning information, etc). Rename the definition file to have a ".txt" extension so that Unity will recognize it as a TextAsset. Then you'll be all set to use it with SpriteText objects.

1. In Unity, drag in your font atlas texture and your font definition file (with the .txt extension).

2. You will want to create a material for your font. It is recommended to use the "Sprite Material" as a base. Just duplicate it and click on its texture setting and assign it to your font texture.

3. If you want your controls to be able to automatically generate a SpriteText object in-editor, you will want to assign the font definition file (.txt file) to the "Default Font" field of the UIManager object in your scene, and the font's material to the "Default Font Material" field of the UIManager. If you are setting up an individual stand-alone SpriteText object, just select your font definition file (.txt file) in the SpriteText's "Font" field, and set its mesh renderer's material to use the font material you created.

You are now ready to type text into your control or SpriteText's "Text" field.

NOTES:
* To assign text to a control, always use its .Text property.

* Setting the color property of a SpriteText object will tint the entire text with that color (unless a color tag is included in the text).

* Text can be tinted/colored on a per-character basis. A color tag in the text applies to all subsequent characters until another color tag is encountered. Color tags can be done in two ways:

Just add a color value inline with your string like so:
Code: Select all
string myStr = "Hello " + Color.red + "world!";


Or add a hex color value in the string itself like so:
Code: Select all
string myStr = "Hello [#FF0000]world!";


The alpha byte of hex color values is optional. Hex color values are in the format: [#RRGGBBAA]. Hex color values can be easily entered using the inspector as well.
Brady
 
Posts: 5361
Joined: Tue Jul 06, 2010 11:33 pm

Re: Creating fonts

Postby sharmoni » Fri Sep 10, 2010 1:30 am

I'm stuck on step 3. The Default Font field in UIManager or SpriteText won't accept the .txt file. There is no Default Font Material field in UIManager.
sharmoni
 
Posts: 53
Joined: Fri Jul 30, 2010 1:36 am

Re: Creating fonts

Postby Brady » Fri Sep 10, 2010 4:51 am

It sounds like you're using an earlier version of EZ GUI. You'll need to get the latest 1.05 version, available here:

www.anbsoft.com/updates
Brady
 
Posts: 5361
Joined: Tue Jul 06, 2010 11:33 pm

Re: Creating fonts

Postby carnevalle » Mon Sep 13, 2010 11:10 am

I am using the latest version of EZ GUI and I have followed the above tutorial using BMFont, but I can't seem to get the text to appear on the screen. I have only included numbers in the font, as this is used for at scorefield.

What could I be doing wrong?
carnevalle
 
Posts: 17
Joined: Mon Sep 13, 2010 10:53 am

Re: Creating fonts

Postby Brady » Mon Sep 13, 2010 9:14 pm

Are you using a plain, stand-alone SpriteText object, or is this part of a UITextField? If the latter, make sure your margins are set so that there is an area where the text can display. When you select a text field, you'll see a pinkish box in the scene view. This is the clipping area of the text. If you don't see one, it's probably because your text field doesn't have any graphics specified or doesn't have its width/height set. In this case, assign negative values to the X and Y of the margins until you see a sufficiently large pinkish rectangle that will hold your text. However, if your text (or score) is output-only, there's no need to use a UITextField as UITextField is for text input.
Brady
 
Posts: 5361
Joined: Tue Jul 06, 2010 11:33 pm

Re: Creating fonts

Postby krissebesta » Tue Sep 14, 2010 4:43 am

When I run Hiero and select any color from the font picker it stops responding. I'm running Win 7 Ultimate 64-bit and have the latest Java runtime installed. Arg! I'll go check the Hiero board and see if there is a workaround.

UPDATE: I could not find any work around for the issue so I tried the AngelCode Bitmap Font Generator and after a bit of tinkering I got it to generate a simple font atlas. Then I opened the exported font atlas (targa) into GIMP and used the "Fuzzy Select Tool" to select just the white letter and then used the "Bucket Fill Tool" to apply an excellent looking texture to the font. So the net is that I ended up with a much cooler looking font than I had expected and would recommend this technique to anyone looking to apply a texture to their in-game fonts. It really turns out looking very polished.

Hope this helps someone out there... :D
Reality.sys corrupt, press any key to reboot Universe.
krissebesta
 
Posts: 14
Joined: Thu Aug 19, 2010 12:11 am

Re: Creating fonts

Postby carnevalle » Tue Sep 14, 2010 10:34 am

@Brady

I was using an UITextField without any graphics specified. This approach worked (at least visually) with the older version of EZ Gui, so thats why I tried to go down that route, but I can see now, that I was using the UITextField in the wrong context. So thank you for the help. (Could I request putting the standalone SpriteText class in the component menu as a label? :-))

@krissebesta

I can confirm the Hiero no response issue. I am also running Win 7 Ultimate 64-bit and have the latest Java runtime installed. That was also why I used the AngelCode Bitmap Font Generator.
carnevalle
 
Posts: 17
Joined: Mon Sep 13, 2010 10:53 am

Re: Creating fonts

Postby GC_Cryss » Wed Sep 15, 2010 10:09 pm

I had the same issue with the Hiero font program, so I used Angel as well. But, it doesn't seem to save the spacing properly or the Text render-er isn't interpreting it properly.

The texture mesh's that are generated are cutting off the edge of the font when rendered, and it appears there is no Kerning, either. It's not kerning properly, and there are spaces between my characters... (It could be possible the font I chose has no Kerning, now that I think about it).

Another strange issue, The text is being rendered upsidedown in a UITextField. The control text that is being created has a negative size, to be normal looking. What's going on?
GC_Cryss
 
Posts: 26
Joined: Mon Sep 13, 2010 5:10 pm

Re: Creating fonts

Postby Brady » Thu Sep 16, 2010 12:45 am

Not sure about the inverted text, but I'm getting some reports from others that Hiero also has the problem where characters are getting clipped at the edge. I've tried to reproduce it on my end to no avail as Hiero seems to be working for me. It sounds like, since it is happening both with Hiero and AngelCode, that it is something about how the OS itself is reporting the font data to these programs. More study is needed... in the meantime, I think it might work to add a pixel or two to the character size as specified in the font definition. If someone who is experiencing the problem can do a test on a character that exhibits the problem, that'd be helpful. I need to know exactly how far "off" it is, and whether it's just giving the wrong width, or if it is also giving the wrong height, or perhaps pointing to the wrong coordinates. So I need to know if it's 1, 2, or how many pixels off, etc. If I can get this information, I can add some kind of setting that will do the adjustment on-the-fly for those who are experiencing the problem.
Brady
 
Posts: 5361
Joined: Tue Jul 06, 2010 11:33 pm

Re: Creating fonts

Postby sharmoni » Thu Sep 16, 2010 1:37 am

I'm trying to use the SpriteText object because I need to be able to change the Text on my buttons and I believe I need the text to be in the button Text field and not just in the control_text Text field. My problem is that I can't change the Font in either the SpriteText or in the UIManager default. The Font property slot only shows a list of shaders and scripts. I'm using Unity 1.7 and EZGUI 1.05_b3.
sharmoni
 
Posts: 53
Joined: Fri Jul 30, 2010 1:36 am

Next

Return to EZ GUI How to...

Who is online

Users browsing this forum: dvdged3 and 4 guests

cron