This article/tutorial was written in order to help both designers as developers to automate your work. You will learn in a few steps how to export custom bitmap fonts to use in your game developed on Unity or frameworks that support the same development resource for an app or software.
There are some free and paid apps in the market, in this case we will use the ShoeBox, also free. This is an application that uses the Adobe AIR platform with simple tools and easy to use (for Windows and Mac).
Most ShoeBox tools are related to game development like exporting sprite-sheets, create 9-patch / 9-slice images, convert .swf to .svg among others. It is also a set of tools that I use in my work, in this case, with interface design.
Note: You need Adobe Runtime. You can download the link available within the application or here.
I will use the example of a stylized font pack that I created for a game called Master Bar, using the Dimbo Regular font.
We will not use this .psd file directly to generate our assets as we create a new ShoeBox in parameters, but we already have the font style defined, this is the most important.
Basically, the files we need to use our custom fonts in Unity is a .png file and a .xml file to map the characters in the image.
Depois de instalar e abrir o aplicativo, na aba GUI encontramos 3 botões, Bitmap Font, Split PSD e Slice 9. Clique com o botão direito em Bitmap Fonts. Em Advanced no campo Template, selecione FNT-XML Starling.
After you install and open the application, on GUI tab you found 3 buttons, Bitmap Font, Split PSD and Slice-9. Right-click on Bitmap Fonts.
Advanced > Template field then set FNT-XML Starling.
Ok, we already set as our files will be exported. Now to create our .psd according to the ShoeBox, left-click on Bitmap Font, it will automatically copy all the characters needed to create our font confirming with the warning: “Copied Text to Clipboard”.
Com os caracteres copiados, vamos agora criar um novo arquivo no Photoshop e aplicar nosso estilo de fonte, criando um .psd como todos caracteres em apenas uma linha. Não se assuste, o arquivo terá mesmo uma largura grande como por exemplo, o meu ficou com 8190 px de largura. Veja no exemplo:
With the copied characters, we will now create a new file in Photoshop and apply our font style, creating a .psd as all characters in one line. Do not worry, the same file will have a large width such as mine that had 8190 px width. See example:
With its ready .psd, reopen the ShowBox and drag the file to the Bitmap Font icon.
It will detect the characters and map their assets:
In Settings> Advanced you can set some parameters such as Text Padding and space off the edges on Extrude Text Size.
DONE! Your font was already saved in it and mapped in the original .psd folder with the .png and .xml files. Too easy, right?
Importing fonts for Unity (easy way)
To import fonts, you can opt for the conventional way or by quickly and practice ways like Unity extensions, i choose Sprite Font Builder. Again, it is a plug-in which I and some colleagues are familiar and, although not a developer, I can say that it is easy and convenient to use. You can download the extension HERE.
The reviews on own page speak for themselves. You can browse to learn more about the SFB also on Google or Youtube. The extension costs $ 14.99 very well paid and that save hours of work. You can also download the trial version and use the time available.
I wrote this article because I saw doubt be repeated in some game design and development communities the part of both novice users as intermediaries, so I decided to help and contribute in this way with my method.
If there are still some doubts about the process, you can ask me right here in the comments.
I hope this heps you! :)