FONT TEXTURE

Important: As with all MV/MZ plugins, the filename must match the source for plugin parameters to work. Make sure you save this as "CC_FontTexture.js" when downloading.

This plugin replaces font rendering via outline vectors with bitmaps.
Vector fonts have the advantage of anti aliasing and smooth scaling to any
size, whereas bitmap fonts are fixed size and render exactly as drawn.

The canvas implementation in RM/PIXI tends to blur fonts at small sizes as
well, which can look particularly bad when using a pixel style font.


Creating a font texture from a font

A tool for creating a font texture from a font can be found at
https://evanw.github.io/font-texture-generator/

The tool itself uses HTML canvas - I used firefox and got the results I wanted from it.

By default it generates ASCII characters, but you can enter a custom character set if your game is using another language or special characters.

This will create you an image like the following:

This font is Sapphire, created by RMN user Soulrain

As well as a JSON file like this: Sapphire.json

Put the JSON file in your game's fonts directory, and the image in the img/system directory, then configure the plugin.

Creating a font texture by hand

Create a png image containing all the characters you need - the characters do not need to be in any specific order. You'll notice the tool puts letters of the same height on the same row to optimize image size, but you could equally just use a grid and have slightly more empty space in the image.

To create the JSON file, it is just a text file, but using an editor that understands JSON and highlights syntax errors for you will help.


These attributes describe the font itself.
The size is the only field used by the plugin, and refers to the unscaled font size. Drawing this font with size 32 would give 2x pixels, while size 26 would look bad.

The width and height here refer to the png image, and aren't used since the image itself contains that information.



The characters object contains an entry for each character in the font.

x, y, width, and height define the bounding rectangle in the texture which the character is contained within - these pixels will be copied in order to display the character.
advance is the number of pixels to advance forward before drawing the next character. It can be thought of as the width of the letter.
originX and originY define the character's origin within the bounding rectangle.
The origin of a character is the "baseline" - some characters may descend beneath the baseline (such as "y")
The combination of "advance" and "originX" allows successive characters to be slightly overlapped when drawing. In the Sapphire font, the outlines are overdrawn so there is one pixel between characters.

Interaction with window skin colours

The font texture is blended with the requested colour using "multiply" - so white areas in the texture will be the exact colour in the window skin, black areas stay black. Grey areas will be a darker shade of the window skin colour etc.

You can preview with a multiply layer in GIMP / your favourite image editor if designing fancy shaded fonts.

Tip: lying about the font height

You can edit the size parameter in the JSON file.
e.g. set the Sapphire file to pretend the font size is 12 instead of 16, and use 24 as the main font size.
This may give better results as most fonts include internal line spacing and do not use the full height. The RPG Maker default font is an exception.
You'll need to use the real height when generating the texture / JSON file, but a single place can be edited afterwards.

Sample Project
This sample project includes a minimum setup of the Sapphire font to demonstrate the plugin.
FontTextureSampleProject.zip (2MB)