The rendering of smaller fonts is blurry

[dul666888]

I tried several methods, but none of them resolved the issue of the system's built-in font, simsun.ttc, being blurry. Other fonts are also blurry, albeit slightly better. As long as the font size is set to 13 or 12, it becomes extremely blurry. This problem does not occur in native DX rendering. I would like to ask how to improve font clarity. For games, in multiplayer games, character or monster names are definitely displayed following the character, and the font must be very small, so it must be displayed clearly. I am using a 100% zoom here, but it is still very blurry.

I have also tried the method below, but it didn't work.

func (g Game) Draw(screen ebiten.Image) {
op := &text.DrawOptions{}
// Coordinates are in physical pixels. Use the same scaling factor as in Layout.
scale := ebiten.Monitor().DeviceScaleFactor()
op.GeoM.Translate(50scale, 100scale)
op.ColorScale.ScaleWithColor(color.White)
text.Draw(screen, g.str, g.face, op)
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
// Use the device scale factor to obtain physical pixel dimensions.
scale := ebiten.Monitor().DeviceScaleFactor()
g.logicalW = outsideWidth
g.logicalH = outsideHeight
return int(float64(outsideWidth) * scale), int(float64(outsideHeight) * scale)
}

face := &text.GoTextFace{
Source: src[0],
Size: physicalSize,
}

game := &Game{
face: face,
str: "hello world，你好世界",
}

[tinne26]

Screenshots are the most useful tool for comparison in these cases. It's hard to say if the results are ok or not until we see it.

You seem to be applying device scale factor properly. Maybe try FilterLinear for the draw options.

You can always do a quick comparison with a different renderer too. E.g.:

go run github.com/tinne26/etxt/examples/ebiten/measure@latest /path/to/font.ttf

If this doesn't look any different from your results, then it's unlikely any better results are possible, unless you are expecting subpixel anti-aliasing, which is not done because it isn't generally advisable for games and against arbitrary backgrounds.

The only other possible issue would be if the device scale factor is not being properly detected for some other reason, or if you are inadvertently rescaling somewhere else.

Practically speaking, fonts at size 12/13 are at the limit of what can look ok without subpixel anti-aliasing, and even then they are not generally great. Bitmap fonts are often a good alternative at those sizes. In fact, some fonts include bitmaps directly for such small sizes, but notice that those are not being used, neither by sfnt nor go-typesetting if I recall correctly.

[dul666888]

go get github.com/hajimehoshi/ebiten/v2@56e479bd072db52ec790d463b079ed7ab81adbc9

Is it automatically using bitmap fonts at low resolution or do I need to make some modifications? I haven't seen any changes after updating to this version using go get.

[dul666888]

Draw something using this font to understand my requirements. This is the font I directly copied from the system fonts directory.
http://jf.muyiyun.top:648/simsun.ttc

[hajimehoshi]

Thanks. Interestingly, simsun.ttc actually has bitmap glyphs for small sizes in an old format, and go-text/typesetting failed to support this correctly. This is an issue in dependencies, so I'll try to make a report to them.

[hajimehoshi]

go-text/typesetting#244

[dul666888]

Thank you very much. I look forward to seeing EBITEN become even better.

[dul666888]

This is the display effect of simsun.ttc at 13 pixels

[dul666888]

This is a 12-pixel word drawn by DX9 using the font "simsun.ttc"

[tinne26]

You can clearly see that this is using a bitmap optimized version of the font, not the font outlines.

[dul666888]

This is the font drawn by the built-in "simsun.ttc" in the WIN system, not a Bitmap Font. How can we achieve such clarity in EBITEN? Or maybe not that clear, but at least visible

[tinne26]

As I already mentioned in a previous comment:

In fact, some fonts include bitmaps directly for such small sizes, but notice that those are not being used, neither by sfnt nor go-typesetting if I recall correctly.

Hajime has also pointed you to the related issue:

Unfortunately Ebitengine doesn't support this yet (#2956).

So yes, vectorial fonts can embed bitmaps for small resolutions, because otherwise, no, vectorial fonts can't look great at arbitrary small resolutions unless other specific techniques are applied: automatic hinting, stem darkening, subpixel antialiasing, manual bitmaps as explained above... but they all lead to different results, and might be or not be desirable in certain contexts, and might or might not be combinable, and this is why they aren't generally considered for Ebitengine (with the exception of manual bitmaps, as that is an explicit addition from the font designer without the drawbacks of other techniques).

[hajimehoshi]

Hi, now I've resolved #2956: #3425 (reply in thread)

[benoitkugler]

Hi !
I think I have a fix for this issue, but it seems the "simsum.ttc" font does not have bitmap glyphs for some latin characters (like 'a'). Could somebody check this ? And ideally give me a string of characters with bitmap glyphs, so that I can fully test the change.

See also go-text/typesetting#246 if you want to try the fix

[hajimehoshi]

Thanks.

Perhaps, is the rendering result at #3425 (comment) just using hintings with outline glyphs?

[dul666888]

I encountered this issue on version 2.9.8 earlier. When I used go get - u to upgrade all MODs to the latest version, ASCII characters did not display. Later, after deleting the cache library and downloading the library using go get, it worked fine. It was a compatibility error with the latest version of a certain library

[hajimehoshi]

Later, after deleting the cache library and downloading the library using go get, it worked fine. It was a compatibility error with the latest version of a certain library

But glyphs are still blurred, right?

[hajimehoshi]

My current understanding is, unfortunately Ebitengine doesn't and probably cannot support sharp glyphs for ASCII charactrers with simsun.ttf. The font includes bitmap glyphs for CJK but not for ASCII, and probably Windows rendered sharp glyphs for ASCII based on its outline data and hinting. This technology is blackboxed and might be patented, and it is pretty hard to emulate this. I don't have a bandwidth to implemen this.

Instead, I recommend other fonts like https://files.ax86.net/terminus-ttf/, which has embeded bitmap glyphs for various sizes. You can mix multiple font faces into one font face with MultiFace, so for example, you can use Terminus for ASCII and Simsun for CJK.

[dul666888]

MultiFace is also possible, as long as the problem is solved.

[dul666888]

What should I do now? All the fonts displayed in simsun.ttc are unclear, whether they are ASCII or other.

[hajimehoshi]

Try go get github.com/hajimehoshi/ebiten/v2@424161176dc5484006487c9a8ce1e0a370b7ddba

[dul666888]

This effect is particularly good, and the Chinese is now displayed extremely clearly.

[dul666888]

Are ASCII characters using MULTIFONT now, or are they waiting for a new update?

[hajimehoshi]

Are ASCII characters using MULTIFONT now, or are they waiting for a new update?

I don't understand what you meant. Ebitengine doesn't have a plan to update for this issue.

[dul666888]

Okay, I'll use multiface to implement it

[dul666888]

I used the multiface scheme, using tahoma for ASCII fonts and simsun for non ASCII fonts. In the 12 pixel and 13 pixel usage scenarios, I tried fonts such as TerminusTTF/tahoma/verdana.
TerminusTTF was extremely clear without strokes, but blurred with strokes.
Tahoma has better performance, although not as clear as simsum, it can still be used.
Looking forward to ebiten getting better and better.