The fonts used for our UI are default NGUI bitmap fonts. With NGUI, it is possible to import any other custom font—in either bitmap or dynamic format. We'll see how we can do both using Font Maker and fonts from our Assets.zip
file.
Within the .zip
file, two new fonts were included and added to the Assets/Resources/Fonts
folder. We'll use Gooddog
as the dynamic font and Lato
as the bitmap font. Let's start with dynamic fonts since they are easy to use.
If you need fonts, you can download them from www.fontsquirrel.com, www.google.com/fonts, or www.dafont.com.
Dynamic fonts can be displayed at any size and remain crisp without pixelation. Since they are not contained in any atlas, using them in the scene adds at least one draw call.
They use the .ttf
or .otf
font source file—no manipulation is required: you simply have to add them to your Assets
folder, and they will be automatically added to the font selection window for your labels. We'll use a dynamic font now.
Navigate to UI
Root
| Main
| Buttons
| Play
| Label
. For its attached UI
Label
component:
1
.You should now have a Play button that looks like this with the new font:
As you can see, dynamic fonts are easily imported; we simply refreshed the font list in the font selection window, and our new font appeared. Now, we'll see how we can create a bitmap font.
Bitmap fonts are contained in an atlas, resulting in no supplementary draw call when rendered—considering the atlas is already used at least once in the scene, by displaying a sprite for example.
All characters are contained in a sprite within the atlas; we'll use Font Maker to create this sprite and add it to our Game
atlas.
We need to convert a dynamic font into a bitmap font using
Font Maker. This tool adds each of the fonts' characters into a single sprite within the atlas. We'll use it to convert the Lato.otf
dynamic font into a bitmap font contained within our Game
atlas.
The NGUI plugin comes with Font Maker. This tool helps us create new fonts by creating a font prefab from a source font file. This resulting font prefab has the UIFont
component attached to it and is also naturally called UIFont.
Open it by navigating to NGUI | Open | Font Maker, or with a right-click in the Project view and navigating to NGUI | Open Bitmap Font Maker. The following window appears:
Let's see what the parameters of Font Maker are:
Generated Bitmap
: In this mode, the bitmap font will be created from an existing dynamic font.Imported Bitmap
: In this mode, the bitmap font will be created from a specific bitmap and .FNT
files, which can be generated with a software such as BMFont or GlyphDesigner.Dynamic
: In this mode, the output file is a dynamic font prefab. As we have seen with the GoodDog
font, it is not necessary to create a font prefab for dynamic fonts—you can reference it directly on UILabel
.Custom
and only import the ones you specify.Now that we've seen the Font Maker parameters, let's create our first bitmap font:
Bitmap
.Lato.ttf
font file as source.50
.Assets/Resources/Fonts
folder.Lato
, and click on the Save button.That's it. The Lato
font prefab has appeared in the Resources/Fonts
folder and is automatically selected. The Game
atlas now has a Lato
sprite containing all characters.
You can also notice that in the Inspector view, our new font prefab has the UIFont
component attached to it. It has been automatically configured for us.
The new Lato
font prefab we just created has the UIFont component attached to it, as shown in the following screenshot:
Its role is to have all necessary elements to print text. Let's see its parameters, which are as follows:
Bitmap
: Suitable for this Lato
bitmap font.Reference
: This means this font will point to another one. For example, this Lato
font could initially point to another Lato_HD
font with a size of 70 for high resolution mobile devices, and you could easily switch to the Lato_SD
font of size 30 if you're on a small resolution mobile device.Dynamic
: This is suitable for the GoodDog
dynamic font we used previously..FNT
file here to import font data.Shadow
, Outline
, and more.None
), the Font
, or the entire Atlas
.Ok, we've understood how the font prefab works. Let's use our new font.
You can use BMFont (free) Glyph Designer (paid) to import/create your own bitmap font characters and edit them. These pieces of software also let you edit the characters' sprite so that you can integrate effects and edit characters one by one through image processing software, such as Adobe Photoshop.
Now that we have our new Lato
font, let's apply it to our tooltip's label:
UI Root
| Tooltip
| Label
GameObject.50
to match the Lato
font size.That's it! We now have our tooltip with our newly added Lato
font. Now, we can discuss how to display large textures, which aren't stored within our atlases.
52.15.55.18