Font Editor, Yay!
by, 03-20-2010 at 09:08 AM (51654 Views)
There's now a font editor added to Spin-X Editor that will be available in the next public release of Spin-X Engine! It's very easy to add your custom bitmap fonts to your application, by first drawing the glyphs for a font in your favourite graphics editing software such as Photoshop, saving the glyph image for example as PNG and then importing the PNG file to the font editor. The editor extracts glyphs automatically from the image and generates tightly packed font texture and kerning information for rendering text by using the font. In the font editor you can tweak various properties for the font in the WYSIWYG editor, such as font material, kerning attributes and glyph spacing.
Below is an example of a font texture that I created in Photoshop. This texture was created simply by using an existing font in Photoshop and with the text tool typing a single line of text listing all the characters I wanted to support with enough space between character to horizontally separate them from each other. Nice thing is that you can edit the glyphs of the font freely in Photoshop before importing them to the editor, so for the below font I used black stroke layer style on the white font to draw outline for glyphs. It's possible to split the glyphs to multiple rows as well, but I kept it all in one line so that the font baseline can be automatically robustly deduced. If glyphs are split to multiple rows it may be necessary to add a baseline marker to the beginning of each row to specify the baseline glyphs are laid on so that they line up properly vertically. This source image is over 5000px wide so it's shown quite tiny here because I had to downscale it quite a bit to show it in its entirety:
When the above image is imported to the font editor, the glyphs are extracted with proper texture coordinates and the below packed glyph bitmap is generated as the result and saved out as a TGA file. You can specify spacing between glyphs in the bitmap in the font editor settings. It may be necessary to use larger than the 1px default value if mip maps are generated for the texture and font is downscaled during rendering to avoid bleeding between characters. During import stage the editor automatically deduces proper power-of-2 texture dimensions so that all glyphs fit to a single texture atlas. The generated TGA bitmap file is then imported back to editor as shown below. If the font uses alpha channel change the texture format to use a pixel format that supports alpha, such as DXT3 shown here:
Before the font can be rendered you must create a material for rendering. I used the basic transparent material for this font since it supports alpha blending and assigned the font texture shown above to the diffuse texture slot of the material and also defined peach color for the font in the material editor. The material defines how glyphs will be rendered, so it's also possible to use custom materials to render for example normal mapped fonts. No need to worry about wrong aspect ratio in the material editor because the texture is just stretched over a cube. You can always change the "uv scaling" to match the texture dimensions if you want to fix this, e.g. change y=2 to tile the texture twice in v direction, but it has no effect in the final font rendering.
Now that the material for the font is created, it can be assigned to the material slot in the font editor and "sample text" defined in the font editor will appear in the preview window. Various properties for the font can be defined here, such as kerning precision for auto-kerning, which is used to define how glyphs are layed horizontally next to each other when the text is being rendered. Because of the kerning information extracted from the source font bitmap, for example the 'W' and 'A' glyphs in the example text can overlap horizontally and form more naturally flowing string of text. "Glyph ascii chars" defines a character string that matches characters in the font source bitmap so that when writing text the engine knows which glyph to use for which character. I just copied the string from Photoshop to this property. Currently there's only support for ASCII characters, but UNICODE support is trivial to add. "Glyph ASCII remap" defines remapping of characters as a string of character pairs, e.g. if a font texture defines glyphs only for capital letters to save texture space, then adding character pairs "aAbBcC" will map low-case 'a' characters to use glyph defined for capital 'A' character, etc. Because I defined glyphs for all characters I left this property empty. If there's no glyph defined for a character, the character will be skipped.
The bitmap font and the font material can be loaded to your application with the regular load_object() calls for both and rendered with the exposed interfaces.
So, that's about it and happy fonting!