[Dive Into AGMaker] Using Custom Images as Fonts

[Justus]

[Dive Into AGMaker] Using Custom Images as Fonts

Introduction

In AGM, we can use custom character images as fonts. This note will detail the necessary steps. These techniques are applicable to both AGM and native Godot.

Software Version Reference

I am using Action Game Maker 1.0.21.

Preparations

1. Prepare a font texture. For convenience, using the order of all visible ASCII characters is best, as it simplifies the subsequent import steps.
2. If you don’t need all ASCII characters, ensure you draw the characters you need in continuous ASCII order (also to simplify import), such as drawing numbers 0-9 consecutively.
3. Ensure that each character in your material occupies the same size, such as 5x12 or 8x9. There are no specific size restrictions.
4. Stitch all characters into a single image and save it in PNG format.

Visible ASCII Characters

This text represents all standard visible ASCII characters in their order, starting from the space character to the tilde ~.

 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

Example Image

As an example, here is a sample image. The image is from gnsh and is licensed under CC0. Thanks to gnsh for sharing the image.

Example Project

For reference, I will upload my completed demonstration project files here.
sample_painting_custom_font.zip (94.0 KB)

Steps

1. Create a new blank AGM project and drag the image into the AGM file system.

   

2. Select the image, then click the Import tab to the right of the Scene tab. In the import dropdown menu, change it to Font Data(Image Font).

   

3. Then slightly modify the parameters in areas 1-5 in the image below, and press the re-import button at position 6. After completing the import, this PNG image will be recognized as a font file and can be used anywhere a font is needed.

   • 1. Indicate the range of characters to import. If you are using a standard full ASCII character material image (like our example image), fill in ' '-'~'. If only numbers, fill in '0'-'9'.
   • 2. Count how many columns your image has and fill it in here. Our example has 20 columns.
   • 3. Count how many rows your image has and fill it in here. Our example has 5 rows.
   • 4. Disable the compression option.
   • 5. (Optional) I chose integer scaling (usually better for pixel fonts), but you can leave this option unchanged.
   • 6. After adjusting the parameters, click the re-import button. A confirmation window may pop up; confirm it and continue.
   

4. Now everything is ready. Drag this PNG file into any place that originally uses a font, and it will automatically be set up. The example in the screenshot customizes the font setting for a Label node.

   

[zo-nomori]

ワタシは3.1がうまく行かず
≪32-126≫
と入力して登録が出来ました。ありがとう！

I couldn’t get 3.1 to work,
so I entered ≪32-126≫
and was able to register.

[Justus]

@zo-nomori could you please send your font image to me? Let me check what cause this problem.

[zo-nomori]

@Justus

could you please send your font image to me? Let me check what cause this problem.

Please review this data.

[Justus]

After testing, both of following works well in step 3.1. they are equivalent.

copy this directly

' '-'~'

or
copy this directly

32-126

[zo-nomori]

Oh, I see! Thank you.
I mistook ≪‘ ’-'~‘≫ for

≪ !"#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ^_`abcdefghijklmnopqrstuvwxyz{|}~≫
and was inputting that!