FONT TEXTURE

Pixel perfect bitmap fonts

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.


{
"name": "Sapphire",
"size": 16,
"bold": false,
"italic": false,
"width": 139,
"height": 62,

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.


"characters": {
"0":{"x":5,"y":33,"width":10,"height":10,"originX":2,"originY":8,"advance":7},


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)

Details

  • 14.5 KB
  • 369
  • 03/28/2024 04:50 PM

Actions

Posts

Pages: first 12 next last
I don't own a copy of MZ (I use MV) so I can't give this a test drive, but I will say the contribution of bitmap font plugins is always greatly appreciated! Text blur/scaling is always the biggest hurdle to overcome when making low-res style games on the newer makers. Thanks a bunch for your work :D

Out of curiosity, are there any plans to backport this to MV as well?
The core of the script works on MV, but the loading hook is on an MZ function (MV has no function to load fonts built in).
(And the font name for MV is "GameFont")

Ping me on discord if you want an MV copy to try, or wait and I'll update it after some proper testing.
I don't mind waiting. I don't want to pressure you about it, haha. But I do appreciate the follow up and will keep an eye out if you do release an update :)
author=sixfootblue
I don't mind waiting. I don't want to pressure you about it, haha. But I do appreciate the follow up and will keep an eye out if you do release an update :)

There's an MV sample project in my locker, if you want to give it a spin.
It's a bit larger at 20MB as I don't have as good a minimal template.
Sorry for the late reply! I didn't notice the update until just now.
I've tried it out in a test project and it seems to be working just fine, even with font change text codes in Yanfly's message core which is awesome.

The only major issue I seem to have noticed is the font name overrides don't seem to be working, unless I'm just using them incorrectly. (I've tested this with all other plugins disabled as well with the same results).

Other than that everything seems to be working just fine so far. I'll play around with it some more in the coming days and let you know if I run into any major issues. Thanks a ton for the MV compatibility!
author=sixfootblue
The only major issue I seem to have noticed is the font name overrides don't seem to be working, unless I'm just using them incorrectly. (I've tested this with all other plugins disabled as well with the same results).


I think most of these exist only in MZ to be overridden.
So it would be better to have split this into two plugins - the font override stuff is more different between MV and MZ than the core functions.
Quick question, is this plugin allowed for use in commercial games? Thanks!
author=fourzero
Quick question, is this plugin allowed for use in commercial games? Thanks!

Yes, that's fine - just credit wherever you're crediting other resources you use.
The generator posted above appears to only support specific fonts that are installed on your machine, and only those that it can autocomplete (hardcoded in the app itself). Is there any way to use this utility with other fonts? Or is the only option to manually create that json file? Thank you for any insight!
author=mwenditz
The generator posted above appears to only support specific fonts that are installed on your machine, and only those that it can autocomplete (hardcoded in the app itself). Is there any way to use this utility with other fonts? Or is the only option to manually create that json file? Thank you for any insight!


They do need to be installed on your machine, unless you download and self host the generator - in that case you could use the css @font-face to make the font available to the page without installing.
I found it worked for me for any installed font, though the autocomplete of names did not work. You might need to make sure you're using the name of the font (and not it's filename)

The Sapphire example on this page I created by installing the font and then using that generator, so it was working at least at the time I used it.
author=coelocanth
author=mwenditz
The generator posted above appears to only support specific fonts that are installed on your machine, and only those that it can autocomplete (hardcoded in the app itself). Is there any way to use this utility with other fonts? Or is the only option to manually create that json file? Thank you for any insight!
They do need to be installed on your machine, unless you download and self host the generator - in that case you could use the css @font-face to make the font available to the page without installing.
I found it worked for me for any installed font, though the autocomplete of names did not work. You might need to make sure you're using the name of the font (and not it's filename)

The Sapphire example on this page I created by installing the font and then using that generator, so it was working at least at the time I used it.

I actually got it working by trying a few things. The app itself is a little tricky. You have to install your font first. Then make sure you type the name in (the one that shows up at the top when you go to the font settings on a windows machine and click on the font). It won't generate the actual .png until you click on a radial button. So click something and it should work. That worked for me. Thank you again for your help, can't wait to try this plugin out!

P.S. Like the author said, it only works in firefox. Not chrome.
Hello,

There's problem for mz:
- I can't see font pixel.
- Font that I used yours is not showing.
- Do you any samples for mz?

Thank you

Edit: I found the plugin name was mistake, so I fix the name and it works perfectly
Does the sample project linked at the end of the description work for you?
Is there a way to have this plugin only change the font in the dialogue window? Maybe some easy way? (I've been working on a retro style game and I can get away with using the stock fonts for the menu system, but I'd love to get the pixelated fonts working just for dialogue.
author=mwenditz
Is there a way to have this plugin only change the font in the dialogue window? Maybe some easy way? (I've been working on a retro style game and I can get away with using the stock fonts for the menu system, but I'd love to get the pixelated fonts working just for dialogue.


Possibly by adding a property to Bitmap to switch between whether it uses the new functions or original functions to draw text.

let _Bitmap_drawText = Bitmap.prototype.drawText;
Bitmap.prototype.drawText = function (text, x, y, maxWidth, lineHeight, align) {
if(!this.useBitmapFonts) {
return _Bitmap_drawText.call(this, ...arguments);
}


Then in Window_Message, override createContents() to turn that flag on
Window_Message.prototype.createContents = function() {
  Window_Base.prototype.createContents.call(this);
  this.contents.useBitmapFonts = true;
}
[code]

Something like that
It works for mv and mz, but I need to ask you something:
I am using RPG Maker MV, and it's 100% pixel art font, but I need to add another language (like Japanese, French, Spain, China, etc...).

How I can add another language?
Use UTF-8 encoding for your json file, then you can put the international characters you need in the characters table.
Of course, the more characters in your font, the bigger the image and data will need to be.
author=coelocanth
author=mwenditz
Is there a way to have this plugin only change the font in the dialogue window? Maybe some easy way? (I've been working on a retro style game and I can get away with using the stock fonts for the menu system, but I'd love to get the pixelated fonts working just for dialogue.
Possibly by adding a property to Bitmap to switch between whether it uses the new functions or original functions to draw text.

let _Bitmap_drawText = Bitmap.prototype.drawText;
Bitmap.prototype.drawText = function (text, x, y, maxWidth, lineHeight, align) {
if(!this.useBitmapFonts) {
return _Bitmap_drawText.call(this, ...arguments);
}

Then in Window_Message, override createContents() to turn that flag on
Window_Message.prototype.createContents = function() {
  Window_Base.prototype.createContents.call(this);
  this.contents.useBitmapFonts = true;
}

Something like that

Thank you very much for your reply, I'll see what I can do. appreciate it!
Pages: first 12 next last