Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » [A5] Weird anti-aliasing on .ttf fonts..?

This thread is locked; no one can reply to it. rss feed Print
[A5] Weird anti-aliasing on .ttf fonts..?
Dizzy Egg
Member #10,824
March 2009
avatar

After RTFM and loading a .ttf font, I promptly displayed a message on screen. The font is Arial (yep, plain ol' Arial) and the 'O' at the end of 'HELLO' was, well, FAT.

HELLO

If I pass the monochrome flag on loading obviously there is no issue, but the anti-aliasing seems, well, really bad.

I'm guessing there's a draw flag I have to set or something?

???

----------------------------------------------------
Please check out my songs:
https://soundcloud.com/dont-rob-the-machina

Neil Roy
Member #2,229
April 2002
avatar

Did you clear the background? When I first tried that I got no anti-aliasing at all, then I realized, the black background wasn't cleared properly. So I did a properly clear of the bitmap and that fixed it. The anti-aliasing needed a background colour and even though it was black, it wasn't an actual properly cleared bitmap. Sounds like the area where your "O" is, is sitting on such a spot, in those cases the letters appear fatter and not anti-aliased.

---
“I love you too.” - last words of Wanda Roy

Mark Oates
Member #1,146
March 2001
avatar

I've had limited success with the ttf font rendering quality. I've run into a quite a few circumstances where a font will have anomalous glyphs sort of "pop out" from the others, or will otherwise look unusual.

This example below shows how Georgia, a common web font, looks drastically different when rendered in Allegro.

{"name":"603621","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/d\/e\/de13fee51add79a44e93f2ac3aad530d.png","w":517,"h":109,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/d\/e\/de13fee51add79a44e93f2ac3aad530d"}603621

I mean, it looks nice, but it doesn't look like Georgia. Arial (and other Helvetica variants) are fonts that I've found to have a significantly different appearance. I've found a few fonts that draw very nicely, though, and tend to stick with those. I've gone as far as render a font 4x larger to a bitmap, and resize it in half twice to another bitmap. That can produce some nice output.

Can you post a screenshot of your O?

Neil Roy said:

Sounds like the area where your "O" is, is sitting on such a spot, in those cases the letters appear fatter and not anti-aliased.

It's my understanding that due to the hinting, the glyphs will render the same regardless of the spot where they are located in the word. Hinting is letter-only, and letters are placed at integer intervals.

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

Elias
Member #358
May 2000

What if you use the bold version of Georgia in Allegro? Does it look closer to the photoshop one? It looks like the difference is mostly in the font weight setting - Freetype seems to be using something like "font-weight=normal".

--
"Either help out or stop whining" - Evert

Neil Roy
Member #2,229
April 2002
avatar

Here's a couple screenshots to illustrate what I was talking about.

The only difference is that I commented out the code to clear the screen on one, and on the other I didn't clear the screen.

Here's two examples using Arial 20 then increasing the size of the screenshot to show the results up close:

With screen cleared first:
al_clear_to_color(black);
{"name":"603630","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/a\/6ad523a4aadd461921cd2e845f68d721.png","w":552,"h":304,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/a\/6ad523a4aadd461921cd2e845f68d721"}603630

Without screen clear:
//al_clear_to_color(black);
{"name":"603631","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/3\/030d1aaccc630e4c20a88fd85bbb31f5.png","w":552,"h":304,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/3\/030d1aaccc630e4c20a88fd85bbb31f5"}603631

That's what I was talking about. If one of the letters looks like the above than perhaps it is a related problem. I noticed when I resized these images that some of the pixels in the second image are anti-aliased a little.

It would be interesting to write a test project that clears half the screen behind the text and view the results.

---
“I love you too.” - last words of Wanda Roy

Matthew Leverton
Supreme Loser
January 1999
avatar

In the second one, are you drawing the text multiple times in the same place?

AMCerasoli
Member #11,955
May 2010
avatar

I think so... The only way I get that "Error" is by drawing the text multiple times without cleaning the screen.

Dizzy Egg
Member #10,824
March 2009
avatar

Jeez I really am being stoopid of late; first I was trying to load .ttf fonts without the ttf addon, now I've posted about a problem that was cured after clearing the display with al_clear_to_color...

...sorry :-[

----------------------------------------------------
Please check out my songs:
https://soundcloud.com/dont-rob-the-machina

Neil Roy
Member #2,229
April 2002
avatar

Nope, only draw it once. It's the same code each time, the second one I merely commented out the code to clear the display. Here's the full code:

I've changed it since then, the font is now larger (I used this to create a simple Allegro 5 template for CodeBlocks and this is the default program)

But if you change the font to arial.ttf and the size to 20, you'll get the same result I did.

Now the ONLY thing I change for those two samples was in one I commented out the code to clear the display.

#SelectExpand
1#define ALLEGRO_STATICLINK 2 3#include <iostream> 4#include <allegro5/allegro.h> 5#include <allegro5/allegro_font.h> 6#include <allegro5/allegro_ttf.h> 7#include <allegro5/allegro_native_dialog.h> 8 9using namespace std; 10 11int main(int argc, char *argv[]) 12{ 13 al_init(); 14 al_install_keyboard(); 15 al_init_font_addon(); 16 al_init_ttf_addon(); 17 18 ALLEGRO_COLOR black = al_map_rgb(0,0,0); 19 ALLEGRO_COLOR blue = al_map_rgb(0,0,255); 20 ALLEGRO_COLOR yellow = al_map_rgb(255,255,0); 21 22 ALLEGRO_DISPLAY *display = al_create_display(800, 600); 23 if(!display) { 24 al_show_native_message_box(NULL, "Error", NULL, "Create display failed.", 25 NULL, ALLEGRO_MESSAGEBOX_ERROR); 26 return 1; 27 } 28 29 // change the font to Arial.ttf size 20 to better see problem 30 ALLEGRO_FONT *font = al_load_ttf_font("DejaVuSans.ttf", 64, 0); 31 if(!font) { 32 al_show_native_message_box(display, "Error", NULL, "Error loading font.", 33 NULL, ALLEGRO_MESSAGEBOX_ERROR); 34 al_destroy_display(display); 35 return 1; 36 } 37 38 ALLEGRO_KEYBOARD_STATE keyboard; 39 while(!al_key_down(&keyboard, ALLEGRO_KEY_ESCAPE)) { 40 al_clear_to_color(blue); // comment out this line to see problem 41 al_draw_text(font, black, 403.0, 278.0, ALLEGRO_ALIGN_CENTRE, "Hello World!"); 42 al_draw_text(font, yellow, 400.0, 275.0, ALLEGRO_ALIGN_CENTRE, "Hello World!"); 43 44 al_get_keyboard_state(&keyboard); 45 al_flip_display(); 46 } 47 48 al_destroy_font(font); 49 al_destroy_display(display); 50 51 return 0; 52}

Edit: I think I see what you mean, it does stay in a loop redrawing that each pass through, still, I don't see how it should vary that much when nothing at all changes about the location. And how would it not look the same with or without a clear?

Edit2: AHHHHHH, okay, I see it... d'oh! I feel stupid now. ;D ;D

---
“I love you too.” - last words of Wanda Roy

Matthew Leverton
Supreme Loser
January 1999
avatar

Neil Roy said:

I think I see what you mean, it does stay in a loop redrawing that each pass through, still, I don't see how it should vary that much when nothing at all changes about the location.

It matters because it's blending with itself, which makes it appear more and more solid, until you have thick block-like letters.

Thomas Fjellstrom
Member #476
June 2000
avatar

Neil Roy said:

Nope, only draw it once. It's the same code each time, the second one I merely commented out the code to clear the display. Here's the full code:

Yes, but since that code isn't clearing the area under the text at any point, the text is being drawn over top of itself over and over, thus, blending with itself.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Neil Roy
Member #2,229
April 2002
avatar

Yeah, I just realized that. ;D :) I feel stupid for not seeing that sooner. ;)

I changed my code and reran it:

#SelectExpand
1#define ALLEGRO_STATICLINK 2 3#include <iostream> 4#include <allegro5/allegro.h> 5#include <allegro5/allegro_font.h> 6#include <allegro5/allegro_ttf.h> 7#include <allegro5/allegro_native_dialog.h> 8 9using namespace std; 10 11int main(int argc, char *argv[]) 12{ 13 al_init(); 14 al_install_keyboard(); 15 al_init_font_addon(); 16 al_init_ttf_addon(); 17 18 ALLEGRO_COLOR black = al_map_rgb(0,0,0); 19 ALLEGRO_COLOR blue = al_map_rgb(0,0,255); 20 ALLEGRO_COLOR yellow = al_map_rgb(255,255,0); 21 22 ALLEGRO_DISPLAY *display = al_create_display(800, 600); 23 if(!display) { 24 al_show_native_message_box(NULL, "Error", NULL, "Create display failed.", 25 NULL, ALLEGRO_MESSAGEBOX_ERROR); 26 return 1; 27 } 28 29 ALLEGRO_FONT *font = al_load_ttf_font("Arial.ttf", 20, 0); 30 if(!font) { 31 al_show_native_message_box(display, "Error", NULL, "Error loading font.", 32 NULL, ALLEGRO_MESSAGEBOX_ERROR); 33 al_destroy_display(display); 34 return 1; 35 } 36 37 ALLEGRO_KEYBOARD_STATE keyboard; 38 //al_clear_to_color(blue); 39 al_draw_text(font, black, 403.0, 278.0, ALLEGRO_ALIGN_CENTRE, "Hello World!"); 40 al_draw_text(font, yellow, 400.0, 275.0, ALLEGRO_ALIGN_CENTRE, "Hello World!"); 41 42 al_flip_display(); 43 44 while(!al_key_down(&keyboard, ALLEGRO_KEY_ESCAPE)) { 45 al_get_keyboard_state(&keyboard); 46 } 47 48 al_destroy_font(font); 49 al_destroy_display(display); 50 51 return 0; 52}

Ah well, it's usually the stupid little things that get you like that. ;)

---
“I love you too.” - last words of Wanda Roy

Mark Oates
Member #1,146
March 2001
avatar

OK, uh, yea, so my guess on the problem had nothing to do with the actual issue. :-/ :P

Elias said:

What if you use the bold version of Georgia in Allegro? Does it look closer to the photoshop one? It looks like the difference is mostly in the font weight setting - Freetype seems to be using something like "font-weight=normal".

Here's Georgia Bold. The differences aren't as drastic. I don't see why it has to make the "o"s circles. :P

{"name":"603634","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/a\/6\/a6580137c9ab91b3f1bb8855c9199558.png","w":567,"h":109,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/a\/6\/a6580137c9ab91b3f1bb8855c9199558"}603634

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

Neil Roy
Member #2,229
April 2002
avatar

The allegro version is being drawn a little wider. and/or spaced apart it seems.

---
“I love you too.” - last words of Wanda Roy

Elias
Member #358
May 2000

Yeah, I remember some changes having to do with int-coordinates. Maybe each glyph is drawn at the next integer position, need to double check and maybe fix it. The length of the whole string definitely should stay the same.

And not sure why it's drawn lighter. Can you try using a bigger size - like 3 times as big? If it works ok then I suspect it's Freetype's hinting kicking in at smaller sizes and removing some extra pixels. If the bigger size has the same problem, I'd guess it has something to do with blending instead.

--
"Either help out or stop whining" - Evert

Go to: