Image for post
Image for post

Exporting custom bitmap fonts for games & apps (easy way)

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.

Image for post
Image for post

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.

Dowload ShoeBox HERE

Note: You need Adobe Runtime. You can download the link available within the application or here.

Exporting files

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.

Image for post
Image for post

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.

Image for post
Image for post

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”.

Image for post
Image for post

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:

Image for post
Image for post

With its ready .psd, reopen the ShowBox and drag the file to the Bitmap Font icon.

Image for post
Image for post

It will detect the characters and map their assets:

Image for post
Image for post

In Settings> Advanced you can set some parameters such as Text Padding and space off the edges on Extrude Text Size.

Image for post
Image for post

DONE! Your font was already saved in it and mapped in the original .psd folder with the .png and .xml files. Too easy, right?

Image for post
Image for post

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.

Final build

If you are interested, you can see how the game and UI details with the tutorial sources were in my portfolio or by downloading the game the game on App Store or Google Play.

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! :)

Guilherme Theodoro
Linkedin | Portfolio | Facebook

Product Designer @ ThoughtWorks Brasil

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store