Public Group

# Drawing Better Fonts

This topic is 4320 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi, I have been looking at fonts in OpenGL, and I'm wondering how to do something like the following screen shots There are so many examples, and so many ways, with bitmap fonts, textureed fonts (some generic textured look), outlined fonts, 3d fonts.. But how would I do something thike these screen shots, with like a drop-shadow or outlined. I'm thinking they must be images, so do I need an image for every character in the font set. I see some examples (bitmap fonts) use one texture with all the characters on it. So if that was the approach, I guess these have to be an exact size, or perfectly aligned on one image. How does it read each font from the next, on a single texture .. And how to display them different sizes, without distorting them too much. Do I need a small image and scale them up, or large image and scale them down, OR one image for each size I desire ?? oooh so many questions.. [sad] All I want so far is basic Frame rate, and score / health. But I guess it doesn't matter what I want to display, I still need a full alphabet / character set. So any tips would be great, thanks guys

##### Share on other sites
Quote:
 Original post by dazedandconfusedI'm thinking they must be images, so do I need an image for every character in the font set.

Most fonts are just images, what other approaches have you tried? Just remember that you can put many characters in a single image file (pixel columns 16-24, rows 8-16 might be an E).

Quote:
 So if that was the approach, I guess these have to be an exact size, or perfectly aligned on one image.

They can easily be scaled and translated. For example on the "Team design" label on your second screenshot the vertical offset of the characters might just be some code which changes some characters coordinates (notice how one E is low and the other E is higher?).

Quote:
 How does it read each font from the next, on a single texture ..

There is probably only one font per texture, but I'd guess that before they render their text to the screen they render it to a surface and just let the unoccuppied pixels be transparent. Then they can release all font textures from memory as soon as these surfaces are generated and render those.

If they didn't do that then they would probably sort all labels depending on their font. First set font1's texture then render all labels which uses font1, then set font2's texture and render all labels which uses font2, etc. Fairly simple concept.

Quote:
 And how to display them different sizes, without distorting them too much.Do I need a small image and scale them up, or large image and scale them down, OR one image for each size I desire ??

For high quality you need either a large one or seperate ones. Of course it might be a possibility that they use vector graphics to do it (I doubt it though).

Quote:
 But I guess it doesn't matter what I want to display, I still need a full alphabet / character set.

My advice would be to encapsulate all this functionality carefully. Take care when designing the interfaces. Then you'll be able to just use simple fonts for now and create fancy fonts when you start getting further into development later.

##### Share on other sites
You can usually get dropshadow or outlining by rendering a larger sized font and then the slightly smaller font over it (perhaps offset slightly).

As for scaling and the actual internals, I don't know (and I don't care). I've always left that to library writers.

##### Share on other sites
Hi CTar,

I am using Bitmap Fonts from NeHe's examples.

I have seen other 'bitmap' fonts, that actualy use a bitmap file (image) with all the characters on it.

NeHe's example is also called a 'bitmap' font tutorial, but seems to build a font (no file) and create display lists.

A little weak on the knowledge there, to be honest.
My brains always worked better, in reverse engineering mode..
So I am tagging bits of code togetehr here and there, and learning from the results.
Hey, it works for me, and I'm learning.

It just looks SO bland, boring plain text, I'm looking to spice it up a little.

So should I create a single texture with a character set on it.
I'm not great, but I'm sure I could knock up some decent images in paint shop.

How would I go about positioning these on a texture correctly, and reading them in.

I'm not so worried about the scaling and stuff right now, just getting a much better font incorporated.

Or if thats too much trouble for a 'noob' how could I modify NeHe's tutorial to build more than one font, and call them at random.
As the tutorial seesm kind of 'hard-coded';

I have actually modified it to pass the font name and size during Init.
But still limited to one font, is it easy to extend on this ?

Just having a couple of different fonts, size, bold, italic, color etc etc, would enhance it.

##### Share on other sites
Quote:
 Original post by dazedandconfusedNeHe's example is also called a 'bitmap' font tutorial, but seems to build a font (no file) and create display lists.

I haven't really read it, but it most likely just use a standard font. So it probably just loads an image, but is abstracting the actual implementation away from you.

Quote:
 So should I create a single texture with a character set on it.I'm not great, but I'm sure I could knock up some decent images in paint shop.How would I go about positioning these on a texture correctly, and reading them in.

I believe there are tools available to make the process easier, but for example if you want 256 (162) characters and each of them should be a 8x8 picture, then you just create an 128x128 image and you split it into 256 squares. Then each square is a character and to get the correct character from within your program you just load the whole program and use texture coordinates.

Of course this is only one way. True type fonts are becoming increasingly popular and allows for easy scaling (AFAIK they are made of straight lines and curves). They are a little harder to use though.

Quote:
 Or if thats too much trouble for a 'noob' how could I modify NeHe's tutorial to build more than one font, and call them at random.As the tutorial seesm kind of 'hard-coded';

I haven't looked much at the NeHe tutorials since I don't really like them. But I guess you could just try some different paramters to the function. These could easily be changed depending on a random number, user input, file input or something like that.

For instance if you pass a font name, a italic flag and a bold flag you could do something like this (I use C++ since that is what NeHe uses to some extent):
std::string possiblefonts[4] = {"Arial","Verdana","Tahoma","Times new roman"};std::string font = possiblefonts[rand()%4];bool italic = (rand()%2 == 1);bool bold = (rand()%2 == 1);

Then you could pass those to the font creation function. Of course in a real application you would probably want to decide based on some actual input instead of random numbers.

It doesn't sound like the NeHe tutorial allows for custom fonts, but if you have a good grasp of loading images, texturing, alpha blending and a little creativity then you should be able to do it yourself.

I wouldn't be surprissed if there were actually some libraries out there which did this kind of stuff for you. If you intend to do something advanced then you should probably use those libraries.

##### Share on other sites
You may benefit from AngelCode’s Bitmap Font Generator. It generates the bitmap for the font, as well as texture offsets for each character.

##### Share on other sites
Hey there,

I have just implemented NeHe's Lesson 17, which actually uses a Font bitmap.

And using Tom Wetzel's Font Builder, it enables 2 fonts per 'texture'.

That's a good start, and I shall try modifying the bitmap later, and see if I can extend on that to get a better looking font.

This is actually a better solution in some aspects, as the font I picked to use, was not shipped with windows as standard, and actually saved 'installing fonts'

As I'm not actually at the stage of building an 'installer' for the application, this solves a few issues.

Thanks

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 9
• 13
• 9
• 9
• 15
• ### Forum Statistics

• Total Topics
634075
• Total Posts
3015349
×