Custom font in unity3d

Somehow, when preparing my project in Unity3d, I needed to use the Bitmap font (also known as a raster font). I was very happy when I discovered the tools for creating such a font in Unity. But after a while I realized that this procedure was by no means trivial due to the lack of any documentation on this subject.

This article is about how to assemble a Custom Bitmap Font in Unity. The lesson is quite detailed and affects the work in Photoshop. Interested please under the cat.

Introduction

As the wiki explains, a raster font is actually a set of bitmap images of all the symbols used. That is, first of all we need a texture containing images of all the characters we need. In this example, I will confine myself to numbers and a couple of auxiliary characters, but this technique can be used on any number of glyphs.

Texture preparation

Our font will contain 14 characters: numbers from zero to nine, signs "+", "-", a dot separating the fractional and integer parts and a space. We will also leave a couple of spare places for characters that we may want to add in the future. Total 16 texture slots.
')
The best way to arrange these 16 slots on the texture can be this way: use 4 columns and 4 lines



To prepare the example, I used Photoshop, and in the course of the lesson I will also give some explanations to my actions in it. So, open the image editor and create a new document, 400 by 400 pixels in size. Rzamer texture at this stage is not particularly critical, as long as it is not too small. We will set the final size of the texture in Unity at the very end of the lesson.

For convenience, I advise you to turn on the display of the ruler, grid and guides (ruler, grid and guides). Hot key to display the Ctrl + 'grid for guides Ctrl +; for the Ctrl + R ruler. To create a guideline, simply drag it from the document line. The settings for all these helpers are in the menu Edit -> Preferences -> Units & Rulers

Next we have to fill the texture with the content in the form of, in fact, characters. I used the free Unispace font as the basis of my raster font. Call the “Text” tool with the Shift + T hot key and enter our first glyph. All characters must be precisely positioned in the center of each of the 16 slots (here we can use the auxiliary grid). After entering the first character (in our case it is zero), press Enter to confirm the input. In order to correctly position the layer, by pressing the Ctrl + T keys, we call the Transform tool and move the layer to the right place, guided by the auxiliary grid.



We perform this simple operation with all the symbols we need and - voila!

In the next step, we will merge all the resulting layers with numbers and signs into one common layer. To do this, select them in the Layers panel and press Ctrl + E. The main thing is not to accidentally hook the background layer, because then all the information about transparency will disappear. After this begins the most interesting and creative part of the work. Customize layer effects to taste. In detail here I will not describe it, everyone decides for himself what he likes and will do in his own way. What happened to me, you can see in the picture below.



So, at the moment we have two layers: our numbers with signs and a white background layer. Once we have set up all the effects we need, we will make a backup copy of the layer and proceed to the next step: the creation of the alpha channel.

The alpha channel will store the transparency information. Black pixels are responsible for full transparency, white - the opposite. Shades of gray create the effect of different degrees of translucency. In my case, around the characters there is a soft black shadow, which I would like to see smoothly fading as it spreads to the sides of the characters. To achieve this effect, we will just use the semitones in the alpha channel.

The newly projected layer will become the main one of our alpha channel. First we need to bake all its effects, that is, to rasterize the layer. To do this, I usually create a new empty layer, select it and the layer I am working with now - and merge them into one (Ctrl + E).



We have a rasterized layer with transparency information. Now it remains only to transfer this information to the alpha channel. To do this, hold down Ctrl, click on the layer's Ionic in the Layers panel - to obtain a selection by the transparency mask, and, in the Channels panel, create a new channel, again holding Ctrl. The button for creating a new channel is located at the bottom right of the panel near the button for deleting a channel with a basket. The resulting channel was inverted - it does not matter. Use Ctrl + I to restore the normal state of affairs.



Alpha channel is ready. Texture, in general, too. Except that the white background layer prevents the shadow from correctly displaying around the characters. I painted it in the color of the shadow.

Save the texture to a favorite format that supports the alpha channel (I use TGA-32bit) and proceed to the next step.

Preparing to create a font in Unity

Import texture into Unity3d. To do this, we find the Assets folder in the Project panel and from the context menu call Import New Asset ... We find the file with our texture. Is done.



The texture settings are pretty obvious, and I will not describe them in detail. I will only mention that you need to set the sane texture size. In our case, the 256x256 px is fine.

Further in the same context menu we create a new material and font asset (Create -> Material, Create -> Custom Font). In the material settings, select the newly imported texture. Also, the material must maintain transparency. Therefore, we select the appropriate type of material: Transparent / Diffuse.



Finally, we come to the very essence of the lesson. We have a customized material with a pretty texture, and now we need to somehow assemble a raster font from it ready for use in Unity.

Unity raster font

For some reason, the raster font creation tool in Unity is extremely inconvenient. In addition, no documentation on it was found on the network. All we have is a slurred panel with settings:



Having picked a few hours in it, I still managed to recognize most of the parameters that are enough to create a font.

Ascii Start Offset is an integer that is responsible for shifting the Ascii code table. Example: set the value to 10, and now access to the symbol “A” with code 65 can be obtained through code 75.
Kerning - spacing between letters.
Line Spacing - the distance between lines of text.
Default Material - material with a font texture. We have already created it.
Character Rects - an array of mapping settings for each character.

Namely Character Rects are the most interesting for us.

Size - the size of the array (the number of characters in the font).
Element x - an element of the Character Rects array with the settings of a specific character.
Index - Ascii code of a symbol, taking into account Ascii Start Offset.
UV - coordinates and dimensions of the symbol on the texture.
X, Y, W, H - coordinates of the lower left corner of the texture area with the symbol, as well as the width and height of this area.

Here it is necessary to make a small digression into the theory of mappig, in the spoiler there is a brief visual aid.


Vert - coordinates and dimensions of the polygon to which the symbol will be mapped
X, Y, W, H - coordinates of the lower left corner of the polygon with the symbol, as well as the width and height of this polygon. In general, x and y are set to 0, w and h are the length and width of the polygon, with h being a negative number. Do not ask why, I did not understand myself.
Width is something like a letter spacing for a particular character.
Flipped - rotates the texture by 90 degrees relative to the polygon (can be used for vertical fonts).

So, the basic parameters should be clear. Let's start mapping our tsiferok. First, take a look at the Ascii code table.



As it is easy to see, each symbol corresponds to a unique Ascii code. For example, code 43 belongs to the plus sign. And now we begin the hard chore of putting coordinates into the appropriate fields. Below is a picture that shows how the plus and minus signs were mapped.



After all the characters have been zamapleny, we can congratulate you on the implementation of a very difficult task: the font is ready and now you can use it!

Create an empty object in the project scene. Assign the TextMesh component to it and select our font in the settings.



Beauty!

Afterword

Creating a raster font in Unity is a very difficult, but interesting job. I want to believe that, having passed this lesson, you learned something new and useful for yourself. The absence of such a description at one time greatly hampered the progress of my project. And I hope that this text will help save a lot of time for everyone who one day will need to create a custom font in Unity.