Having text in games is usually pretty important. It can be used for a HUD, a UI or an entire story. GB Studio includes tools to display typed text, and it comes with a font (and a codepage) to render it. This font is located in the /assets/fonts folder since 3.0 (for 2b5 or earlier, it’s in the ui folder).

In this article, we will take a look at how fonts work and what you can do with them, plus some tricks!

How do fonts work in GB Studio?

Font files in GB Studio are saved as an image file with the .png format. Each letter is divided into 8x8px tiles, and they’re laid out in a 16×14 grid (128×112 pixels). The arrangement of the letters follows the extended ASCII standard, ranging from the 32-255 (20-FF) values for it. The first chunk is for normal characters used mainly in English, and the extended chunk is for special glyphs and symbols, mainly used in other European languages. These can be changed to suit your needs.

Prior to 3.0, there was only one font available, so users who wanted to use customized characters usually modified the bottom half for their purposes. Thankfully, a GB Studio project can now hold up to 255 different fonts. This is very useful, as you can use one font for all kinds of text, and another one for storing special characters and symbols.

How do I modify a font?

Modifying a font is super easy, just open it with an image editor, one that can use grids preferably. I use Aseprite, but anything can be used.

Fonts support all 4 colors, as they’re part of the UI. They cannot however use transparency. But, there is a fifth color that’s pretty useful. Using the color #FF00FF (pure magenta) will allow you to create variable-width fonts. Paint to the right of a character the area that will be removed when rendered on screen (it’s a good idea to leave at least one pixel width for separation/clarity). The font gbs-var shows this.

Fonts can have any name, but make sure it’s a .png!

What about codepages?

Codepages are a nice little feature, especially for languages that don’t use the Latin alphabet. They allow you to map a letter to a character in the font. They’re saved in the same folder, and have the same name as their fonts. The default fonts include templates for codepages, in .json format. Open one of them in a text or code editor like Notepad++, and let’s see what we can do with them.

We can start making a codepage by counting to the character we want to use from 32 onwards. For example, let’s map this weird Kanji that doesn’t exist in real life (妛) to the dollar sign. To do that, add a line like this, just remember to put it inside the mapping brackets.

{
"name": "GBS Mono",
"mapping": {

      "妛 ": 36
   
    }
}

If we now load this font and type that character…

If you want a better example, several people have made codepages for their purposes. For example, here’s a Japanese font with a codepage by Amaitorte! Supports Hiragana, Katakana and uppercase Latin!

Wildcards and Escape Sequences

Wildcards are another neat GBS feature, and Escape Sequences are actually from GBVM, but they can also be used with regular dialogue events. Let’s take a look at Wildcards first.

There are three wildcards: $ for variables, # for characters and ! for speed/fonts. To call one of these wildcards, simply type their sign followed by a letter or number for a menu to show up. This menu lets you select a variable for $/# and a speed or font for !. Wildcards will show up differently depending on which one you use. You can edit them by clicking on them to bring up a drop down menu, and remove them the same way as any text by using backspace/delete.

Using an exclamation point (!), start typing the name of the font to have it appear in the drop down. A capital “F” will appear in the event window to denote the font change.

To change the speed, type “S” after the exclamation to see the different speed values. They are Instant, and Speeds 1-5, the higher the number, the faster the text will render. A capital S will appear to denote the speed change in the event window. Keep in mind that Instantly rendered text actually takes more CPU to run, so some lag might be noticeable, especially on DMG systems.

The dollar sign wildcard ($) will print the value of the variable. Start typing the name of the variable after the dollar sign to bring up variables with those letters in the name in the form of a drop down. You will see the variable name highlighted in the event, but in the text preview it will just show “$$$” – this will be rendered correctly when the game is run.

If I set the above variable to the value of 5 for example, the resulting text box would say “Variable 10 is 5”. This is really useful for debugging, but also good to display information to the player.

Finally, the hash symbol (#) works differently. Instead of the variable rendering, it will display the corresponding character from the ASCII chart. For example, if I wanted to display the letter “a”, I would need to have the corresponding variable set to a value of 97 (remembering the mapping from earlier). “abc” therefore would need three separate variables of values 97, 98 and 99. This can be used in conjunction with other tools for text input like player names.

Escape Sequences are part of GBVM, but most of them can be used within dialogue events for the same effect. Here are the different escape sequences you can try inserting into a display dialogue event and their different effects.

Sequence	Effect
\001\x	Sets the speed, x is a number from 1 to 8
\002\x	Sets the font in alphabetical order. The default font in the project is always the first one (1)
\003\x\y	Sets the position of the next character when text renders. Careful, it’s in octal and it begins with 001
\004\x\y	Sets the position relative to the last character
\006\mask	Waits for input to keep rendering text
\007\n	inverts the colors of the text, useful for black UIs
\n	Advances to the next line
\r	Scrolls one line up

Text and fonts can really add to the experience of the player. Hopefully, with this new understanding of using Fonts in GB Studio you’ll be able to better explore the possibilities for your games!