New Resolution/Fullscreen options make Blurry Text Situation worse

Hello All,

So I’ve been making my way through building a menu for a Metroidvania style game. I had been building my game at 720P just for ease of graphics and middle-grounds on graphics.

I was excited with the recent release allowing for new window resolution options and resizing of the resolution.

However, today I discovered that the “Text Objects are Blurry at large sizes” are made worse when you change the resolution, and the fix listed here; [Solved] Pixel art fonts are fuzzy, text / font blury does not work.

Here’s an example:

With resolution * 4, scale *0.25 applied, fonts look fine-ish at 720p:
image
image

However, they definitely do not look okay after using events to change the resolution to 1080p:


image

Are there any other options to fix this scaling issue? Any setting that can be changed before compiling? (Is there someway to turn on “RoundPixel” rendering for text like mentioned here: javascript - Stop pixel font from being blurred when rendered - Stack Overflow)

The need to scale pixel graphics up without resizing the play area is very important for a commercially released PC/Mac game, so I feel like this issue is potentially a break point for proceeding, as my game will be moderately dialogue heavy and need to render text constantly.

Any/all input is greatly appreciated.

Edit: I should probably clarify, this is unrelated to Pixel Fonts. I’ve tried with standard/HD fonts as well.

1 Like

Can you try this test build, i’ve added this param when you are in nearest mode:

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
PIXI.settings.RENDER_OPTIONS.roundPixels = true;
PIXI.settings.RENDER_OPTIONS.antialias = false;

And for all classic Text object except BBtext.

roundPixels = true;

Same settings are in scene editor, so preview and scene editor should be visually same (for classic Text object).

This is no a solution just new workround, we need to understand why fonts have this bad resolution…

Test build

Maybe lastest version of pixi fix this?

Thanks for the attention to this. Sadly, only a very slight change
image

Edit: Hmmm, after some more testing, if I now apply the other fix ( style.fontSize = this._object._characterSize * 4; this._text.scale.x = 0.25; this._text.scale.y = 0.25;) it IS much better. Still visibly distorted, but SUBSTANTIALLY less so than before. So this does seem like an improvement.

Still not perfect, but definitely improved.

I’ve found rounding the font-size to a multiple of it’s original size sometimes help me get that 100% crispness when used in conjunction with the code hack.

I have a font that is 8px by default, so sizes like 8 16, 32 work best otherwise there is still a bit of blurriness. Probably not ideal because it allows less freedom with the size, but might be worth checking out.

Any info available on how to find the original font size?

I had thought about that as well but still haven’t been able to figure out what the “original” is for any of these fonts.

As per our discussion on the Discord, I’m just posting this here for reference incase anyone wants to take a look.

It looks like Pixi has native support for “Bitmap fonts” (BitmapText function) which supports much better rendering/scaling at multiple resolutions.

PixiJS API Documentation for info on the API call.

4 Likes

As another update to this:

I did some more testing, and this issue does appear to be specific to the BBText and Text objects.

If I use GIMP and do the following:

  1. Add the desired text as listed above (Game Title or Resolution)
  2. Ensure the same font is used.
  3. Ensure the same text size is used.
  4. Export as PNG.
  5. Import as a Sprite object into GD5

The “text” image scales without any distortion or blurriness. I have no idea why there would be such a difference between the object types and how they scale.

Edit: @Bouh Another question. Do we consider this a full bug? Should I transcribe this stuff over on Github?

2 Likes

The question is not if it is a bug, because it clearly is, but if it should be reported as big from GDevelop or bug from pixi. Maybe updating pixi would solve the problem, then it would be an issue for GDevelop. Maybe it’s an issue from pixi, then should be updated by pixi.

I’ve been doing some digging, and it seems like PixiJS expects anyone using it to handle canvas scaling differently than GD5 does currently.

What I can’t tell, is if this is something the Pixi devs expect to be handled by Pixi, or if they expect users to be doing something like this listed here: High DPI Canvas - HTML5 Rocks

Edit: more discussion around expectations around scaling differently than GD5 does currently: [SOLVED] How to scale the Pixi.js view without making the game blurry? - Pixi.js - HTML5 Game Devs Forum

Double Edit: I’m basing “Scaling differently” from what I can see in the renderer js files around scaling. I could be wrong, obviously. :smiley:

Per discussion on the discord, I’ve posted this over on the github: [$200+ Bounty]Implement "Bitmap Text" object to avoid blurry or distorted text objects in pixel perfect games (and benefit from higher performance of the text rendering) · Issue #1449 · 4ian/GDevelop · GitHub

I’ve included the info here, as well as some of the alternative scaling methods I found after some research.

Sorry to bump this topic again, but is there any updates on this topic? Blurry texts seems like a constant problem in GDevelop, and no one seems to have the exact solution so far. I checked the github page, but it is closed now, so I don’t know that happened.

Yes, it has been solved for a while now. The normal text object while capable of doing quick and easy text cannot by design allow for non blurry text or performant rendering, so we have made a new bitmap text object that is harder and longer to set up but it will give a much more high quality result and performance.

2 Likes

Yep, I should have closed this. As mentioned on the github thread, the fix was Bitmap font and was pushed live ~4-5 months ago?

Info is available on the Wiki. Bitmap Text object [GDevelop wiki]

You can also see images around my personal settings using BMFont here: Newline in Bitmap Text Object - #6 by Silver-Streak

Although there are a bunch of decent apps other than BMFont too, if you’re looking for those (some mentioned in the Wiki page).

1 Like