How do you prevent font blurring?

[quackgyver]

How to you prevent font blurring in RPG Maker MZ?

 

[fizzly]

VisuMZ_CoreEngine -> Quality of Life settings -> Font Smoothing

 

[SigmaSuccour]

By using bitmap fonts instead:

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

Bitmap fonts for RPG Maker!

hakuenstudio.itch.io

or,

RPG-Maker-MZ-project/Font change.js at main · Geraldlin24/RPG-Maker-MZ-project

Contribute to Geraldlin24/RPG-Maker-MZ-project development by creating an account on GitHub.

github.com

 

[quackgyver]

VisuMZ_CoreEngine -> Quality of Life settings -> Font Smoothing

That doesn't work. Blurring still occurs regardless of whether the Font Smoothing-setting is on or off:

By using bitmap fonts instead:

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

Bitmap fonts for RPG Maker!

hakuenstudio.itch.io

or,

RPG-Maker-MZ-project/Font change.js at main · Geraldlin24/RPG-Maker-MZ-project

Contribute to Geraldlin24/RPG-Maker-MZ-project development by creating an account on GitHub.

github.com

I don't think it's a good idea to add a dependency that completely replaces the engine's default font behaviors with something fundamentally different if there's an easier way to achieve the desired effect.

 

[quackgyver]

Bump.

 

[quackgyver]

Bump.

 

[caethyril]

I'm not an expert at this, but I thought I'd contribute~

I did some reading and it seems the blurring can be caused by various things, including:

1. Non-integer render coordinates for the text on the target canvas;
2. The browser's conversion of TrueType (i.e. vector) font data to pixel/shader data;
3. System/application display scaling.

The usual solutions seem to be to:

• Pre-rasterise the fonts, e.g. "bitmap fonts", or
• Apply some kind of post-processing, e.g. sharpen and/or scale down.

I think pre-rasterisation is the best option here: as I understand it, font rasterisation is CPU-heavy, but bitmaps can almost be fed directly to the GPU.

I haven't tried either of the plugins @SigmaSuccour suggested or looked at the code of those plugins, but I imagine it would be relatively easy to implement without significant compatibility problems. The only way to be sure is to test it for yourself, though.

You might also want to remove the outline, if you don't already have a solution for that. I think this override in a plugin would suffice:

Bitmap.prototype._drawTextOutline = function(text, tx, ty, maxWidth) {};