Join Jesse Freeman for an in-depth discussion in this video Create a font texture, part of Unity 5 2D: Advanced UI.
- [Voiceover] Let's take a moment to talk about fonts. If you look inside the fonts folder, you'll see our default TrueType font, HabboPseudoMono, and a font texture that has been generated out from that font. This is a font that I created with an online tool called BitFontMaker2. The reason I call it Pseudo Mono is that I took a font that I liked called Habbo and converted it so that the numbers were all mono spaced. A mono space font means that each of the characters fills the width that is allotted per character so when you lay them out on a grid, they're all evenly spaced.
In the case of this font, some of the letters didn't work very well as a mono spaced font, so I left them as is. What I was more concerned with were numbers and making sure that each of the numbers were exactly the same width. This way, when we're laying them out, when it comes to something like a score screen, the numbers aren't all over the place. Things to look for are usually 1s and smaller numbers in between. Here you could see I've changed the 1 so that it has a bar across the bottom and a little bit across the top, and that it matches the same width as the rest of the numbers.
Back in Unity, let's select our font. I've covered this technique before in my Unity 5 essential training, but as a quick refresher, if you simply import a TrueType font, change the character set, in this case to only uppercase, click Apply, and then go to the gear icon and click Create Editable Copy, this will generate out the three files you see below. The only difference is that Unity by default creates a texture where the fonts are black.
In order for us to use the color property and not have to use a material, I've gone ahead in Photoshop and I've modified this font so that all the characters are white. With the font texture selected, let's go ahead and add it to the other sprite's packing tag. We'll call this Sprites. We'll set the Pixels Per Units to 1. We'll remove the Mip Maps, and it's already set to point. Let's hit Apply. Let's go to Advanced and scroll down and make sure that the format is set to ARGB 32 mode and hit Apply.
If we go back into our sprite packer and repack everything, you'll now see that our font is sitting along with all the other artwork. Again, this will reduce all the draw calls to a single draw call as it's referencing this one texture. Once you've made your changes, simply save the project and we now have our font ready to go.
Unity expert Jesse Freeman helps you design your UI using custom prefabs (reusable UI elements), UI components such as windows and buttons, simple buildup animations, and transitions. He also helps you create a window manager to guide changes and relationships between windows, and extend the window system with a custom Unity editor that lets you standardize window display and navigation throughout your game.
- Creating Unity prefabs: fonts, colors, buttons, and labels
- Adding a title, credits, and buttons to the start screen
- Adding a game over screen
- Creating animated stats for the game over screen
- Transitioning between windows
- Building a keyboard window
- Mouse, keyboard, and controller navigation
- Building a custom Unity editor for managing in-game windows
- Adding a window to select difficulty level