Spacing issues with coelocanth's Font Textures

[WickBRSTM]

Heyo, Wick here. Hope you're doing well if you're reading this.

I decided to look into alternate methods for rendering fonts in RMMV since I recently decided to change the game's rendering method to more suit my pixel art style, at the cost of some elements of my UI such as the font I was previously using not looking good when anti-aliased, so I sought out a plugin for using bitmapped fonts instead. I came across this plugin (https://rpgmaker.net/engines/rmmz/utilities/320/?p=1#posts) and, upon reading through the comments, was happy to find that an MV version was available. (If you can't find it, click the OP's profile, click on the Locker link, and find the project file that's designed for RPG Maker MV specifically- the regular one is for MZ).
I've got it set up and working, and it looks good for the most part, but there's one small issue: the font, for whatever reason, seems to love to cut off on the left edge, and continuously overlap the left edge on every letter thereafter. I turned on the plugin's debug mode so it's easier to see where each character is placed on the screen:

At first I thought my particular font was the problem, so I tried to open the sample project, only to find that the same issue was happening there when it did not seem to be in the creator's screenshots, so it's not a conflict from what I can gather:



I feel like I have to be missing something obvious here, but I can't think of what would be causing this to happen. (Also, the title seems to get cut off on the top and bottom when checked to render the game title on the title screen, but my game won't use this so this shouldn't be an issue, but it is interesting nonetheless and may have a similar cause.)


Again, the first and third screenshots are from a new "dummy" project and the second is from the dev's MV sample project, so I don't think a plugin conflict is the issue. I'm on the latest version of RMMV, and my only non-standard configurations are that I do have node.js updated to 49.2 and pixi.js updated to 4.8.9 (from this guide: https://forums.rpgmakerweb.com/inde...dramatically-improve-game-performance.131620/) and I have one extra line of code in index.html to make the graphics not blur when upscaled:



If you have any ideas, do let me know. This plugin is much better than the alternatives I've found and I would love to use it over the other options at my disposal. Worst case scenario, I suppose I could try manually re-spacing the font to account for the plugin mysteriously acting like the left edge isn't there, but it's quite the tedious process so I'd rather find another solution if possible. Much thanks, please let me know if I forgot to mention anything important, it's a bit late here so I apologize if there's any important details I didn't include. Thank you!

- Wick

 

[gundambison]

If you can added css that's make space on the word. It would be solve your problem.. But I'm not sure about added style

 

[Eliaquim]

Hi there!

For someone who has already used this plugin(used similar ones, not this one I guess), and many others, trying to obtain a pixel-perfect font on RPG Maker, I strongly advise you that the best way is to use a bitmap font plugin.
These plugins work at some level, but they also have many tiny issues, like the one you are showing.

I know Victor has one Bitmap font plugin:

SFont

Plugin Download SFont Samples This plugin allows the use of SFonts. SFonts are image files that replaces the normal font. What are SFonts? (from SFont is a type of bitmapped font, which is loaded f…

victorenginescripts.wordpress.com

And I also have one, with Free and Pro versions:

Hakuen Studio Bitmap Font for RPG Maker MV MZ by Hakuen Studio

Bitmap fonts for RPG Maker!

hakuenstudio.itch.io

 

[WickBRSTM]

Hi there!

For someone who has already used this plugin(used similar ones, not this one I guess), and many others, trying to obtain a pixel-perfect font on RPG Maker, I strongly advise you that the best way is to use a bitmap font plugin.
These plugins work at some level, but they also have many tiny issues, like the one you are showing.

I know Victor has one Bitmap font plugin:

SFont

Plugin Download SFont Samples This plugin allows the use of SFonts. SFonts are image files that replaces the normal font. What are SFonts? (from SFont is a type of bitmapped font, which is loaded f…

victorenginescripts.wordpress.com

And I also have one, with Free and Pro versions:

Hakuen Studio Bitmap Font for RPG Maker MV MZ by Hakuen Studio

Bitmap fonts for RPG Maker!

hakuenstudio.itch.io

I appreciate your suggestions, I'll give these a look.

Has SFont been tested on the latest version of RMMV? It looks like it was last updated around 2016 and the majority of RMMV plugins had to be updated when 1.5.0 came out in 2017, albeit there were a few plugins that weren't broken by that update so it could just be one of those rare few. Again, not super duper knowledgeable on the technical side of the engine so I could just be worried about nothing, I've just not seen recent activity with it.

In the meantime, I'll try yours first. Skimming through the docs here, I very much appreciate compatibility with YEP_MessageCore, that was another big concern of mine trying to find a different plugin for this (I only use it for name windows and letter sounds at the moment, but if I want stuff that's in your pro version down the line and this has been working well, then I won't hesitate to get it). I'll need to redo my font sprite file so your plugin will read it right, but no worries. I'll get back to you as soon as I can to let you know where I'm at!

 

[WickBRSTM]

Okay, interesting update- I more or less found a solution to the issue I was having with the original plugin, so I'll post it here for anyone else who finds the plugin in the original post. Hope this can be of use to someone having the same issue. Apologies if this gets a bit wordy, I'll include a TL;DR at the end.

The guide for the bitmap font creation, interestingly, draws the baseline (green) at an X coordinate of 2 relative to the origin (yellow, but I'll put this in orange so you can read it in light mode), noting that they do so in order for each character's bounding box to slightly overlap and allow for 1 pixel between characters. I thought this to be strange as, despite rendering perfectly in their screenshots, when I ran the plugin myself, all this seemed to do was cause the first letter to get cut off, and harshly overlap every subsequent character, as in the screenshots in my original post. The result given by the font texture tool linked in their post (https://evanw.github.io/font-texture-generator/) seemed to also do this.
View attachment 252090

Out of curiosity, I edited the .json for my font to move the baseline's X coordinate back a pixel, and added 2 to the advance (blue) value, and sure enough, this actually seemed to fix almost every character. After some further adjustments, the font seems to render perfectly: View attachment 252091View attachment 252092

Still not having luck figuring out why the title gets cut off when trying to render it as plain text, but my actual game doesn't do this, so I guess I can try to figure that out later. Happy to have some kind of solution here, for now. Again, no idea why the configuration that the site spits out seemed to work for the plugin dev, but at the end of the day, this seems to work as far as I've tested.

TLDR; The plugin dev's guide for font configuration/the configuration spit out by the website is mostly right, but the amounts for the baseline's X coordinate and the amount to advance forward by might be wrong- I suspect it's a bug related to choosing a font with an outline since the configuration it gave seemed correct for how my font would look without an outline. Weirdly enough, that configuration seemed to work for them, so I'm not sure why it doesn't for me, but if you're also having this issue, see if those slight adjustments fix your issue.