Skip to main content

Fonts

The font assets are used to store the letters needed for the dialogue system.

The amount of letters you can use depends on the text system you use.

Simple Text Rendering

This system loads the entire font into VRAM so the amount of characters you can use is limited.
This system only supports letters with a size of 8px x 8px.

You can tweak how many letters you can have in the VDP Settings.

Be aware, there are 10 slots that get used for the dialogue box and arrow cursor.

Advance Text Rendering

This system allows for any amount of letters you need as the font is not loaded into VRAM.

This is the best system for Asian languages due to the need of using a lot of characters and support letter sizes over 8px x 8px.

For this system you need to convert TTF fonts with the Font Converter into PNG.

Layout

If you want to create your own font and character information file you need to follow the following sample.

You can create either a single PNG following the .png file displayed below or a .png file with a .json counterpart for a better output.

The fastest way will always be to use the Font Converter though.

JSON File

The font .json file basically contains the basic font information as well as the codepoint order and size.

Here is a small example:

{
"name": "<font name>",
"size": "<number>",
"gridWidth": <8 or 16>,
"gridHeight": <8 or 16>,
"codepoints": [
{ "codepoint": <codepoint>, "width": <width in pixels>, "xadvance": <xadvance in pixels> },
...
]
}

PNG File

The font .png file should follow the order in which codepoints are noted in the JSON file.

warning

Creating fonts manually is a complex procedure, using the Font Converter is recommended to create at least the file outline to then edit on top.

Simple Font

The simple font file works for the Simple Text Rendering mode, you can follow the file bellow and adjust it.

tip

The example displays transparent background for the letters.

If you want the text to be inside the dialogue box all the time, make sure to change the pink with the dialogue box color.