How to Output Text from Fonts with libwiisprite

Every good programmer knows that they can make their programs look better than they really are ( ;-) ) by printing their text using a High Quality Font. It's even better when you can change the color of that font on demand. Changing the font size on demand can produce some beautiful artistic designs too. All of this can be used to make a higher quality, more "polished" program.

Unfortunately, libwiisprite is the only of the three major libraries (the other two being GRRLIB and libwiigui) that can't output, or print, text using characters taken from a font. And while libwiisprite can't do this by itself, it doesn't mean we can't combine a few additional libraries to our program to do it ourself. This post will show you step-by-step how to get your programs that use libwiisprite to output text from a font.

The first thing we need to do is set up our enviroment. First lets go here and download and set up the FreeTypeGX Library. Carefully follow the instructions on the page to set up the library. Once you have FreeTypeGX set up and installed, go here and download the ftimage library. You can install it by placing the .h files in devkitPRO's "include" directory (or 'folder' for those of you that prefer Windows terminology) and the .a file in devkitPRO's "libs" directory.

Now let's set up the directory that the program we're making is set up in. (The path is probably something like C:/projects/wii/nameofyourproject In the directory for your program, you should have a directory named "data". If not, make one now. In "data" we will place the font that we want to use. Any font will do as long as it is in .ttf or .otf format.

Now, let's set up the makefile of our prgoram. First, add -lfreetype and -lftimage under LIBS: Then, add a rule for compiling your font. If you're using the .ttf font format, your rule will look like this:

#---------------------------------------------------------------------------------
# This rule links in binary data with the .ttf extension
#---------------------------------------------------------------------------------
%.ttf.o : %.ttf
#---------------------------------------------------------------------------------
@echo $(notdir $<) $(bin2o) -include $(DEPENDS)

Finally, let's get to writing the meat of the program. First, include these two lines of code wherever necessary:
#include "ftImage.h" //The ftimage library
#include "namefthefontinthedatafolder_ttf.h" //Font being used (you have it in the data folder)

Now, wherever appropriate, declare these two objects:
ftImage print(640, 480); //This will store the string of text we print
Sprite Text; //This Sprite will be used to render the ftImage member print

Now, this little snippet of code is all we need to prepare our objects to store and render text:
print.setFont(fthenameofthefontinthedatafolder_ttf, thenameofthefontinthedatafolder_ttf_size);//Set the font we are using
print.setSize(32);//Set the size of the font (should be a multiple of 4)
print.setColor(Color::Color(255,40,40));//Set the color of the font in RGB format
Text.SetPosition(100, 50);//Set the position of the starting point of the text we will print
Text.SetImage(&print);//Append print as the image stored by Text

You do not need to use the above code in the order that I did. You can also feel free to change the values used by it at anytime during the course of your program.

And finally, here's how we render text:
print.printf(" Hellow World!\n");//Set the string of text to be rendered (escape characters can be use to render more than one line)
print.flush();//Tell the computer that the string of text is ready
Text.Draw();//Render the text
print.clear();//Clear the stored string of text
print.reset();//Bring us back to the render starting point (defined by Text.SetPosisition())

You'll want to use all of that above code in every loop that render text. If you render text without calling clear() and reset(), the next time you render text; you will render the same text as last time plus the new text you want to render.

Because I love pastie.org so much, For your convenience I have pastied all of the code used in this post for you to view here since blogger doesn't format everything perfectly.

Thanks to ArminTamazarian for whom without FreeTypeGX, this guide would never have been possible. Thanks to my good friend Ave for whom without ftimage, this guide would also never have been possible. Thanks Ave, for also being a good friend and helping me with tons of stuff at the drop of a hat. I'd never be where I am today without you.