Full Games List
Featured Games
New Games
Reviews
Media
Images
Blogs
Game Updates
Images Feedback Summary
Game Design Highlights
Tutorials
Articles
Scripts
Utilities / Plugins
Resources
Engines
Engine Bulletins
What is Makerscore?
Past Events
Achievements
Misaos
Forums
Post History
Chat
New to RMN?
Full Store List
RMN Music Pack (free)
Details
LinksFONT TEXTURE
Pixel perfect bitmap fonts
coelocanth- 08/11/2022 08:07 PM
- 16943 views
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)
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
- 379
- 04/15/2024 05:58 AM
Actions
Posts 
coelocanth
5448
View playlists
Closeauthor=SpellcraftQuill
https://i.postimg.cc/Qxz8qFQK/image.pngText gets cut off in a message box.
Uploaded a new version with fixes for this.
When updating an existing project, be sure to open the plugin settings and save them.
* The clipping box can be expanded by a configurable size in each direction. The default is 2 font pixels, which is usually enough to allow outlines not to be cut off.
* clipping can be turned off entirely if you prefer (which will allow text to overflow the max width requested).
bunkajin
0
I've been trying the MV version you posted a while ago, unsure if this also applies to MZ version, I was using the drawText function for making a custom menu, I entered the following under the update function of the scene (so it would redraw every frame)
It sucessfully draws, scales and colors but later on I noticed that framerate was gradually dropping to 1, I wasn't sure if my method was too unoptimized or what, but turning off the plugin and returning to default font restored the framerate so something about the script makes it taxing to call each frame. maybe some sort of leakage?
this._text.bitmap.clear(); this._text.bitmap.outlineColor = 'black'; this._text.bitmap.outlineWidth = 4; this._text.bitmap.fontSize = 16; this._text.bitmap.textColor = '#FFFFFF'; this._text.bitmap.drawText(this._num,4, 350, 50,0, 'left');
It sucessfully draws, scales and colors but later on I noticed that framerate was gradually dropping to 1, I wasn't sure if my method was too unoptimized or what, but turning off the plugin and returning to default font restored the framerate so something about the script makes it taxing to call each frame. maybe some sort of leakage?
coelocanth
5448
If you're using a large number of colors then the texture cache could grow excessively, But if you're using '#FFFFFF' every time then it should be using the cached texture for that color every time and generating it only once.
That's the variable _coloredFontTextures if you want to check it in the debugger.
Let me know if you find anything - the main drawing code is just a series of context.drawImage calls to copy rectangles of pixels from the font texture to the window texture. Nothing particularly clever.
That's the variable _coloredFontTextures if you want to check it in the debugger.
Let me know if you find anything - the main drawing code is just a series of context.drawImage calls to copy rectangles of pixels from the font texture to the window texture. Nothing particularly clever.
bunkajin
0
Im not sure how to find that variable, but I did do some further testing, i comnmented out everything but the drawText and got the same results, so i think the texture cache mnay not be the issue or at least not directly related to changing color, I also did the default battle in the database with the 2 bats only active plugin was texturefont, it ran smoothly for a long time, but i left the game running and did other things, when i returned it was at 1 fps and crashed a few seconds later, So whatever is happening seems inevitable and my menu was only speeding it up.
I consulted a friend who is much better at coding and they said that it may be related to MV's pixi version and how it handles ccanvas and that issue is less likely to occur in MZ.
I consulted a friend who is much better at coding and they said that it may be related to MV's pixi version and how it handles ccanvas and that issue is less likely to occur in MZ.
I really like it and it's working for me!
But when I test the game, The fps is slow when I use your plugin.
When I turn off, it goes faster.
https://forums.rpgmakerweb.com/index.php?threads/mz-jabs-js-action-battle-system.131663/
But when I test the game, The fps is slow when I use your plugin.
When I turn off, it goes faster.
https://forums.rpgmakerweb.com/index.php?threads/mz-jabs-js-action-battle-system.131663/
acuerdox
0
hi :D, really cool plugin. say, do you think one could use more than one font with it? (on MV) I noticed there's an array for the fonts, so I can already add them, but I don't know how to switch between them. maybe I could run some lines of code from an event between dialog boxes and give different characters different fonts, could you help me out with that?
coelocanth
5448
You should be able to use one of the other plugins out there to change the font in a message (e.g. Yanfly's message core in MV) and this one to override how the font is drawn.
Code-wise, the first thing that happens in Window_Message when a new page is started is resetFontSettings (which switches font name and size back to default). After that, you could calleither through a message escape code, or by hooking something like loadMessageFace() to set the font automatically by some logic.
(e.g. change to harold' font when harold's faceset is used)
Code-wise, the first thing that happens in Window_Message when a new page is started is resetFontSettings (which switches font name and size back to default). After that, you could call
this.contents.fontFace = "name of font";
(e.g. change to harold' font when harold's faceset is used)
