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:
However, they definitely do not look okay after using events to change the resolution to 1080p:
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.
Thanks for the attention to this. Sadly, only a very slight change
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.
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.
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:
Add the desired text as listed above (Game Title or Resolution)
Ensure the same font is used.
Ensure the same text size is used.
Export as PNG.
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?
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
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.
