Rendering Resolution Independent Text

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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 http://freetype.sourceforge.net/index2.html