Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need a way to draw resolution independent text in my game. That is, I need to be able to zoom in on text and never see pixel artifacts.

Can anyone make any suggestions on how I could go about it?

share|improve this question
I would assume you'd need to look into methods of vector-based fonts, rather than rasterized fonts, which could be a starting point. I'm no expert on the matter, so I'll let someone who would know answer. – Ray Dey Mar 13 '11 at 1:23

There's three common ways to do it. It's not really about eliminating artifacts entirely - which is impossible, unless you have unlimited memory or processor time - but rather how to minimize them in a way that fits with your existing code and target platforms.

First, just use your font rasterizer - usually FreeType - to rasterize the font at the size you want as you zoom in. This will look great in screenshots, but it is incredibly slow. You can solve the slowness by caching sizes, but then it becomes incredibly memory-hungry. It also does not look great in motion, because making glyphs look good for static display requires scaling them non-uniformly. Still, it's an option if you are on a platform with enough memory (like a PC) and your scales are bounded to some small range, like 10px to 30px. This method also does not admit a lot of eye-candy by itself.

Second, you can store your text as a mesh. Some libraries exist to do this, like GLTT, or you could write your own. Now you no longer have pixel artifacts, but you will have polygonal artifacts if you zoom in very close - just like any other mesh in a 3D game. Mesh text admits a lot of eye candy since vertex shaders can be applied and the mesh can be interleaved with any other world drawing you do. It is reasonably light on memory and CPU, and easy to measure the cost of since it's just a standard mesh. It can be a pain to integrate into a normal sprite-based 2D rendering pipeline.

Third, you can use distance fields in combination with a pixel shader. This is a relatively new technique that is currently popular, using simple shader to sample a premade texture and the "free" bilinear filtering on your video card to scale up glyphs cleanly. It uses little and easily-predictable memory compared to other methods - a 0.5MB to 1MB texture per character set per font. It fits nicely into sprite-based rendering pipelines because it is sprite-based; each glyph is still a textured quad. It does produce pixel artifacts, but very few compared to other methods that scale textures. There is also a fixed-function fallback if pixel shaders are unavailable, but the text ends up very aliased. Because the sampling is done in a pixel shader it admits some eye candy, like outlining and shadowing, for cheap.

share|improve this answer

There is also a research article from Microsoft Research by Loop and Blinn, on rendering resolution independent curves using shaders. It suggests using the presented technique to render TrueType text in a resolution independent fashion.

share|improve this answer

You'll need to build your font characters out of a combination of curves and lines, which you then convert to geometry with a suitable level of detail at runtime.

Fortunately most fonts are already built from bezier curves. To get the curve data you just need to use the standard Windows GetGlyphOutline() function to extract them.

I'm not sure if you can get that curve data from C# without PInvoke.

share|improve this answer
In order to make this cross-platform and not worry about the PInvoke stuff, it seems to me that you would be able to write a tool to dump the data that GetGlyphOutline reads (see this SO question ) to some custom format, and then have some simple file I/O in the game code to just load your custom stored glyph data. – Ricket Mar 13 '11 at 3:54

You might want to take a look at freetype. I've no idea if it's available on your platform or if the licence is applicable but it's a rather excellent open source library for rendering true-type and other vector fonts. I believe they had to do some clever lawyer dodging code in order to get fonts to render in an aesthetically pleasing way. The true type way involves byte codes on curves to provide hints to the renderer so that important font features (such as verticals and serifs) don't get blurred away as they would using standard naive anti-aliasing. That technique has a patent on it so the freetype people had to come up with something else that did the job and didn't invoke the terrible lawyer-beast of (I think) Apple. Anyway, pogramming legal aside aside, try looking into freetype

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.