5. Text Drawing - Tutorial

In this tutorial we'll learn about Vortex2D sprite font system, creating prerendered fonts and drawing text of course.


Sprite Fonts. Why?

I've few answers for this question:
  • Usually game application requires about 3-10 different fonts. It is not too much to prepare them with some tool.
  • Often game design requires custom decorated (postprocessed) characters for some of fonts. It is easy with prerendered font - just process image with Photoshop :)
  • Correct procedural processing of TTF glyphs is very heavy task from point of view of development. It gives a bit but requires a lot of time.

Preparing Font

I spend a whole day looking for good sprite font building tool. I've chosen BMFont from AngelCode. It can be downloaded from here. This tool has lot of options. Most useful of them:
  • Unicode support
  • Custom character set
  • Efficient character placement on bitmap
  • Good quality with antialiasing support
  • Export to PNG

Let prepare some font with this tool. There are few steps required to get font accepted with Vortex2D.NET:
  1. First, we need to select characters to be included into our font. You can do it directly on main window of tool navigating between unicode subsets in right panel. Only selected characters will be rendered with Vortex2D. I've selected all "Latin + Latin Supplement" and "Cyrilic".
  2. Go to menu Options > Font Settings and choose: font face (Times New Roman), charset (Unicode), size, px (24) and font smoothing (checked)
  3. Go to menu Options > Export Opions and choose: width (512), height (256), bit depth (32), uncheck "Pack chars in multiple channels" and set for channels A,R,G,B following values 'glyph', 'one', 'one', 'one' or choose preset "White text with alpha". "Font descriptor" leave as "text" and for "Textures" choose "PNG ...".
  4. Now select Options > Visualize to be sure you have all chars fit into 512x256 texture. It is important to have only one texture per font. It is because to avoid texture switching drawing characters from different images.
  5. Time to save font with some name, e.g. "Times New Roman, 24px". It can be done with Options > Save bitmap font as.... Choose some folder where executable can access it. Recommended to use /Fonts directory of your application.
  6. At the end, lets save your font configuration with Options >Save configuration as... and reuse it later.

bmfont_fontsettings.jpg bmfont_exportoptions.jpg bmfont_preview.jpg

Of course you can adjust all of settings especially texture size, font-face and font-size to get optimally filled font bitmap.

Loading Font into Game

Loading of font is pretty much easy as loading texture. Just create instance of Vortex.Draw.SpriteFont using file name/path without extension as constructor argument:

//fonts are placed in directory \Fonts
_TimeNewRomanFont = new SpriteFont("Fonts\\Times New Roman, 24px");
_TahomaFont = new SpriteFont("Fonts\\Tahoma, 24px");
_CorridaFont = new SpriteFont("Fonts\\CorridaC, 28px");
Do not forget destroy font with Dispose() in Unload method.

Also one more thing you need to know. There are one system font which is always available. It can be accessed as property of game class: Game.ConsoleFont. It is monotype, face = "Consolas".

Drawing Strings and Text

There are two main methods to draw text: Canvas2D.DrawString and Canvas2D.DrawTextLayout.
DrawString just draws string at specified point (left top point of first string character). Usage:

canvas.DrawString(_TimeNewRomanFont, 20, 50, "The quick brown fox jumps over the lazy dog, 1234567890 () +-*/ ,:? ...", ColorU.White);
It is useful to have ability to measure string size before drawing, e.g. to add bounding rectangle or some kind of shading under... It can be done with Canvas2D.MeasureString method. It requires font and string as arguments and returns Vector with width and height of text in pixels.

Vector infoTextSize = canvas.MeasureString(ConsoleFont, infoText);

DrawTextLayout uses rectangle to specify text region and argument of type Vortex.Drawing.TextLayout to specify alignment of text inside of that region

canvas.DrawTextLayout(font, LONG_TEXT_RECT, LONG_TEXT, layout, ColorU.LightCyan);


Vortex2D.NET uses sprite font model which is good enough for game applications. All of fonts should be prepared in BMFont tool. Canvas2D.API can draw simple strings, measure them and also render text bounded into rectangle with specified layout.

Last edited Dec 16, 2010 at 11:16 PM by Rafael_Vasco, version 13


No comments yet.