When using bitmap fonts, it is necessary to create fonts of different text sizes. Otherwise, we'll run into the following issue:
As you might notice from the preceding screenshot, the text is crisp for small text (1), but for a large title (3), it becomes aliased, blurry, and looks terrible. So, we need bigger fonts for larger text sizes. In this section, we'll create three different fonts of typical sizes.
Follow these steps to create the standard definition font used for small text. Open Font Maker by navigating to NGUI | Open | Font Maker.
Configure Font Maker as follows:
Assets/Resources/Fonts
.SmallLato
for the new font's name.Okay. We now have a SmallLato
font, which will be used for normal text. We can move on to creating an intermediate font, which will be called MediumLato
.
Follow these steps to create the medium size font, which can be used for small titles. Open Font Maker by navigating to NGUI | Open | Font Maker. Then, perform the following steps:
Assets/Resources/Fonts
.MediumLato
for the new font's name.Okay. We now have a MediumLato
font, which will be used for small titles and notification texts for example. We can finally create a large font for big titles.
Finally, follow these steps to create the large size font, which can be used for large titles. Open Font Maker by navigating to NGUI | Open | Font Maker. Then, perform the following steps:
Assets/Resources/Fonts
.LargeLato
for the new font's name.The LargeLato
font is now ready to display large titles. Let's create labels and see how they look.
We will now create three labels to try out our three different font sizes:
UI Root
GameObject.Label
GameObject, and then:SmallText
30
This is a small paragraph text
0
, -315
, 0
}.UI Root
GameObject in its Target field.Good. The small text displayed looks good and remains crisp on any kind of aspect ratio or resolution. Let's try out the intermediate size now:
UI Root
| SmallText
GameObject.MediumText
, and then:60
Medium Title
0
, 240
, 0
}.Good. The medium title that we've added looks crisp too. Let's see for the large title now:
UI Root
| SmallText
GameObject.LargeText
, and then:100
Large Title
0
, 335
, 0
}.For now, we have left the SmallLato
font, so it should look blurry and aliased like this:
As you can see in the preceding screenshot, the font doesn't look good for now. Let's change it for the LargeLato
font now:
UI Root
| LargeText
GameObject.And that's it! We now have a beautiful and crisp large title without aliasing:
Great! Now that we have experimented multiple bitmap font sizes and know how to avoid pixelation, we can move on to learn about multiple atlases.
18.117.99.71