Any "8-bit" fonts that work well with VisuMZ Pixel Image Rendering?

[CopperGenie]

Hi again!

I've been changing settings in the VisuMZ Core Engine plugin and I started using the pixel image rendering option. I'm not sure if it just removes antialiasing or if it's something else, but my game is a lot clearer now.

The only problem is that my font is now jagged and offset because I guess partial "pixels" from the outline got snapped onto the font area. Here's what I mean (the one on the right is after I turned the setting on):

The engine blurs the text by default which is also really annoying, so it wasn't any better before. But if I can get the font to be one solid color then that would be perfect. The darker parts of the letters aren't shadows from the font itself--the raw font is completely solid.

I guess I'm looking for a font that would either work well with this setting, or a way to disable the outline completely. The latter seems more appealing to me. But I also don't really like the font I have so if anyone has any good suggestions I'll be glad to take them haha

Thank you guys! I appreciate all the help so far, this is a friendly community!

 

[CopperGenie]

**Update**

Okay so I found these lines in rmmz_core.js that can be changed to eliminate the text border.

this.outlineColor = "rgba(0, 0, 0, 0.5)";
this.outlineWidth = 3;

So I fixed that nuance, but the font is still looks the same. I did a little testing and I found that the plugin is actually averaging the white in the font with the alpha layer of the surrounding pixels.


So I guess my only hope is to search for a font or font size that minimizes this effect. Thanks to anyone who might have tried to help!

 

[Dororo]

Don't waste your time.
Read this till the end.

Removing Font Blur

Hi, I'm making a game that uses pixel-perfect graphics, and that extends to the font as well. I used the excellent code that KisaiTenshi created (in this topic: https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/) to remove blur on the actual game itself (characters...

forums.rpgmakerweb.com

 

[CopperGenie]

Don't waste your time.
Read this till the end.

Removing Font Blur

Hi, I'm making a game that uses pixel-perfect graphics, and that extends to the font as well. I used the excellent code that KisaiTenshi created (in this topic: https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/) to remove blur on the actual game itself (characters...

forums.rpgmakerweb.com

I will, thank you!

 

[CopperGenie]

Wow this is amazing, thanks again!!

 

[HoofedEar]

Wow this is amazing, thanks again!!

Are you able to explain how you got to this point?
A lot of the information in the linked thread is confusing/not very clear. People are still asking in that thread how to do it..
Please share your great wisdom!
Also, this thread is the first result on Google when looking up this issue, interestingly enough

 

[CopperGenie]

@HoofedEar
Sure thing! All I did was add in this script as a plugin to my game:

Bitmap.prototype._drawTextOutline = function() { // only use to get rid of text stroke
   return;
};
Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
    var context = this._context;
    context.imageSmoothingEnabled = false;
    context.fillStyle = this.textColor;
    for(var i = 0; i < 12; i++) // repeat the layer 12 times like in GIMP
       context.fillText(text, tx, ty, maxWidth);
};

If you want more info on it, they discuss it (and maybe some other methods) in this thread!

 

[CopperGenie]

I want to warn you though, it doesn't work well for smaller font sizes (like the item stats in the Item screen). But I bet there's a workaround for that too haha. I just haven't looked that far into it yet :c

 

[HoofedEar]

@HoofedEar
Sure thing! All I did was add in this script as a plugin to my game:

Bitmap.prototype._drawTextOutline = function() { // only use to get rid of text stroke
   return;
};
Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
    var context = this._context;
    context.imageSmoothingEnabled = false;
    context.fillStyle = this.textColor;
    for(var i = 0; i < 12; i++) // repeat the layer 12 times like in GIMP
       context.fillText(text, tx, ty, maxWidth);
};

If you want more info on it, they discuss it (and maybe some other methods) in this thread!

Interesting, this is essentially just a smoothing technique instead of trying to find a way to disable Anti-Aliasing... neat!

 

[CopperGenie]

Interesting, this is essentially just a smoothing technique instead of trying to find a way to disable Anti-Aliasing... neat!

Yeah I thought it was a really unique fix! It's not perfect but I guess you could always do more repetitions if you're not happy haha