Bitmap font scaling on Html5 (SOLVED)

Hi there,

I have a bitmap font that I’m scaling down to 0.7 on all axis. This works just fine on desktop (haven’t tried mobile yet), but for some reason the same on web looks jagged. Any idea?

No, not really. Can you share a minimal project please?

1 Like

Yes sure!

If you compare native build (osx in my case) and web build, you’ll see the web build has jagged font scaling. It is especially visible in the W character.

Also for some reason the colors are different, with web being less saturated.

project.zip (49.1 KB)

The project you sent me has HTML5 Scale Mode set to Downscale Fit. This means that the canvas will be scaled to ensure that it’s always fully visible in the window. I think that is what’s causing that extra jaggedness.

1 Like

I’ve tried with just Fit and no scale option. Even the no scale option has a rougher result compared to desktop build with different sizes and aspect ratios.
Is this something to be expected?

I guess that Defold doesn’t use mipmaps for bitmap font so it looks rough when downscaled.

1 Like

Hmm, I didn’t really notice any difference when using No Scale. Maybe I didn’t look close enough. @AGulev what is your experience with bitmap fonts on HTML5?

Btw, did you try using a distance field font instead @gianmichele?

I don’t remember any specific issues. Usually, it just works fine.
Maybe it’s something similar to this issue and High DPI should be enabled?

2 Likes

Bingo! That fixed it thanks a lot everyone

2 Likes