TTF fonts look horrible in a high-res game

Dave Gilbert · Tue 12/01/2016 22:26:20

Since the last few questions I asked turned out to have butt easy solutions, I am delegating myself to the beginner's forum!

In a nutshell, I am making a high-res (640 x 360) game using AGS v3.4.0.6. And all the high-res fonts I import look horrible:

This is "DejaVu Sans" imported at 14 point size. I've experimented with antialiasing (makes it look 10x worse), different sizes, and dozens of different fonts and they all look like variations of this. I'd really like a smooth, high-res font to match my high-res game. Am I just choosing the wrong fonts? If so, can someone recommend a font/size configuration that will look nice?

Much appreciated!

-Dave

Scavenger · Tue 12/01/2016 23:05:01

This is a problem with engine scaling, I think. I resized it down from 1280x720 to 640x360 again and the text looked fine:

[imgzoom]https://dl.dropboxusercontent.com/u/50882197/art/GameStuff/unscaled.PNG[/imgzoom]

(Could you try looking at your game running at 1x scaling?)

I also made an empty project and imported the same font and text into a standard resolution - 640x400, and scaled that up to 1280x800:

[imgzoom]https://dl.dropboxusercontent.com/u/50882197/art/GameStuff/640x400_text.PNG[/imgzoom]
And it looks fine. I'm thinking it has to do with the scaler not playing well with custom resolutions.

Your entire screenshot looks like it's being unevenly scaled, with subpixels everywhere. I'm not sure why this would be, especially because 1280x720 is an even double of 640x360. But there is DEFINITELY a lot of uneven pixelation going on.

Crimson Wizard · Tue 12/01/2016 23:37:45

Dave, could you clarify, what the actual display resolution is? Screenshot is 1280x720, but it looks like it was cropped a bit (maybe it's just how room background looks).

You will get gfx mode information by pressing Ctrl+Alt+V in game.

Dave Gilbert · Wed 13/01/2016 00:41:43

Dang it. You're right. It DID get compressed. Here's the fullscreen version, taken just by screencapping my screen:

It's scaled up to "maximum fit" using the nearest neighborhood filter. The original resolution is 640 x 360.

The text is readable, but is still quite pixelly. I've worked in high-res projects before and the text has always been smooth. For some reason, I can't get that effect again.

Crimson Wizard · Wed 13/01/2016 00:56:55

Quote from: Dave Gilbert on Wed 13/01/2016 00:41:43
The text is readable, but is still quite pixelly. I've worked in high-res projects before and the text has always been smooth. For some reason, I can't get that effect again.

Try checking "Anti-alias TTF fonts" in the General Settings.

Quote from: Dave Gilbert on Wed 13/01/2016 00:41:43
It's scaled up to "maximum fit" using the nearest neighborhood filter. The original resolution is 640 x 360.

Since 3.4.0 there is a setup option to stretch game to maximal fit without keeping aspect ratio (unproportionally). This may "skew" game image. Could it be that you did that?

MiteWiseacreLives! · Wed 13/01/2016 02:54:25

It looks like your using the anti-aliasing filter, which in my experience warps fonts too much to be unpleasant to the eye. You might have to shop for a font that looks good with the filter. Although, IMHO, I think using such a filter on a WadjetEye game would be a shame...

Monsieur OUXX · Wed 13/01/2016 13:45:20

@Dave Gilbert: Don't hesitate to convert a TTF font into a sprites font to be able to slightly rework it. It used to be a pain, but nowadays there are several tools that allow you to do it properly, and to preserve international characters. Have a look at the "Fonts" article in the wiki.

Dave Gilbert · Wed 13/01/2016 14:11:35

Hmm. In taking a look at the settings, I noticed an option called "Alpha Blending Style" which was set to "Classic." I changed it to "Proper alpha blending" and now it looks nice!

Not terribly happy with the font, but now that I know I can have proper alpha-blended sprites I can experiment properly. Thanks for the help!

Monsieur OUXX · Wed 13/01/2016 14:19:09

For the record: the alpha-blending style has to do with additivity (when you draw a pixel with transparency on top of another pixel with transparency), which was half-baked in older versions of AGS (it worked as designed, but that was rarely the behaviour instinctively expected by the developper). I can't see why that would fix your fonts issue, but hey, hurray!

Dave Gilbert · Wed 13/01/2016 14:21:50

Hm. You are right. It might look better because today I am testing the game on a smaller monitor! I changed the alpha-blending style back to "classic" just to make sure and I can't tell the difference.

So it looks like the issue is monitor/scaling related?

Crimson Wizard · Wed 13/01/2016 15:06:29

I am baffled why my questions use to remain ignored

Question One:

Quote from: Crimson Wizard on Tue 12/01/2016 23:37:45
Dave, could you clarify, what the actual display resolution is? <...>

You will get gfx mode information by pressing Ctrl+Alt+V in game.

Question Two:

Quote from: Crimson Wizard on Wed 13/01/2016 00:56:55
Quote from: Dave Gilbert on Wed 13/01/2016 00:41:43
The text is readable, but is still quite pixelly. I've worked in high-res projects before and the text has always been smooth. For some reason, I can't get that effect again.
Try checking "Anti-alias TTF fonts" in the General Settings.

It's kinda hard to help people when you cannot understand if they actually tried what you suggested or not.

Dave Gilbert · Wed 13/01/2016 15:16:02

Hi Crimson. Sorry. In the original post I said that the anti-aliasing looked even worse, so I didn't use that. The first image I posted was accidentally shrunk (force of habit when creating screenshots!), which is why it looks even worse than it actually did. The second image was completely untouched and is actual size at 1920 x 1270.

Crimson Wizard · Wed 13/01/2016 15:25:23

Quote from: Dave Gilbert on Wed 13/01/2016 15:16:02
Hi Crimson. Sorry. In the original post I said that the anti-aliasing looked even worse, so I didn't use that.

Oh, my apologizes, you meant fonts antialiasing; for some reason I thought you were talking about using anti-aliased scaling filter.

So, do I understand it right, that your problem is not that the font letters get "skewed", but that font looks pixelated in hi resolution?

Quote from: Monsieur OUXX on Wed 13/01/2016 14:19:09
For the record: the alpha-blending style has to do with additivity (when you draw a pixel with transparency on top of another pixel with transparency), which was half-baked in older versions of AGS (it worked as designed, but that was rarely the behaviour instinctively expected by the developper). I can't see why that would fix your fonts issue, but hey, hurray!

Aplha blending mode can make the difference if you have transparent / translucent GUIs - in such cases the anti-aliased font may loose anti-aliasing on the final image.

Dave Gilbert · Wed 13/01/2016 15:29:10

Quote from: Crimson Wizard on Wed 13/01/2016 15:25:23
Quote from: Dave Gilbert on Wed 13/01/2016 15:16:02
Hi Crimson. Sorry. In the original post I said that the anti-aliasing looked even worse, so I didn't use that.
Oh, my apologizes, you meant fonts antialiasing; for some reason I thought you were talking about using anti-aliased scaling filter.

I am referring to the "anti-aliased TTF fonts" option in the settings menu, if that makes it clear!

QuoteSo, do I understand it right, that your problem is not that the font letters get "skewed", but that font looks pixelated in hi resolution?

Yes, that seems to be the case. On my smaller laptop screen, it looks fine. On a bigger monitor, it looks pixelated.

Crimson Wizard · Wed 13/01/2016 15:40:24

I must say that the situation looks rather confusing.

When I look at your screenshots, one the second screenshot you posted, font looks definitely pixelated.
However, on your third screenshot it looks like it has anti-aliasing: if you zoom image in, you will notice grey "smooth" pixels around white font pixels.

Thing is that simple nearest-neighbour game scaling cannot achieve such effect: it just adds more pixels of same color, it cannot smooth image.

So either there are difference in game options, or difference in the scaling filter you used in the last case.
I am leaning towards game options, because the details of the rest of image look identical.

Dave Gilbert · Wed 13/01/2016 15:46:07

I'm confused as well! The only difference between them is that the third was taken on a smaller monitor. I don't know if that effects anything or not.

Dave Gilbert · Wed 13/01/2016 15:50:00

And good god you were RIGHT. I checked and anti-aliasing WAS on. Apologies again! For some reason, the anti-aliasing looks just fine on my small monitor but is completely unreadable on the larger one. (I'm in the cafe on my laptop right now or else I'd post a screenshot of what that looks like).

Dave Gilbert · Wed 03/02/2016 15:54:59

OK. I am playing with this some more and I think I can provide more detail.

Original art is 640 x 360 resolution.
Using the Nearest Neighbor filter
Scaling is "Max Fit"
In windowed mode, the display resolution is 1280 x 720
Desktop Resolution is 1600 x 900
The font is good old "Arial."

Here is a screencap with Anti-Aliasing OFF. As you can see, the font looks very pixellated.

Here is the same with the Anti-Aliasing ON. The font is very fuzzy and not clear. It doesn't look so bad here, but in full screen mode it's REALLY bad.

Any light shedding is appreciated.

Mehrdad · Wed 03/02/2016 16:02:49

Hey Dave
It's only a suggestion. Use 854X480 resolution for your game. It's complete 16:9 too.I think so you can get clear font with it.

Crimson Wizard · Wed 03/02/2016 16:32:50

Quote from: Dave Gilbert on Wed 03/02/2016 15:54:59
Here is the same with the Anti-Aliasing ON. The font is very fuzzy and not clear. It doesn't look so bad here, but in full screen mode it's REALLY bad.

Still, can you tell what display resolution it runs in fullscreen?
You can see resolution info if you press Ctrl+Alt+V in game.