Tuesday, April 16, 2013

Fun with Fonts

The picture says it all:



...well, not really. It says what this post is about, but it certainly doesn't show everything! As always, there's a  video for that! Make sure you watch in a large viewer and in HD, as it might be difficult to read the fonts on the screen (which serve as annotations) in a small viewer.


So, how does this work? Easy...for now. The current implementation--but almost certainly not final--is to use a single texture source for the entire font. It looks like this:


So, I wrote a quick utility to create a texture with one frame per letter (it could also be implemented as a bunch of textures, but it doesn't make any difference--the frame version is slightly easier from a coding standpoint). Once this was done, there were actually no new features required in the engine! Just a small helper function that creates the entities for you given a string. And that's it. All of the effects you see--including the final one where I slash the letters away with my sword--are just entity features that can be found in previous posts and videos.

This is a nice start, but there are a couple problems. 

One, I would like to be able to use any font, not just this pre-built one. This would likely be accomplished by setting up a pool of available fonts at design-time, and then rendering the characters of that font to an texture at run-time (that is, when the game begins). So, there is never an actual graphics file for a font (that I own, at least--of course, the operating system has a file somewhere).

Two, the kerning is non-existent with the current method. Kerning information is available via the windows API, and it shouldn't be too difficult to use (just a slight modification of the helper method) to properly space the entities once I have it.

However, this will suffice for now, and I'll come back to these features at another time. The fonts may not look perfect, but they can do some cool things!
Note: The font in the upper left corner showing diagnostic information is rendered in a different (less flexible) way, so this is definitely a new feature.





No comments:

Post a Comment