Working with Fonts

The MAUI::Font class is a used for drawing texts using bitmap fonts defined in a mof-file. In this guide we show how to create a bitmap font using the BMFont tool, how to convert it to a mof-file, and how to add the file as a resource to a MoSync project. We then create a MAUI::Font instance and draw some text with it.

The BMFont and mof.exe Tools

We will be using two tools in this tutorial. BMFont is a bit map font generator that can render any existing truetype font as a bitmap font. This program is bundled with MoSync and can be found in the /bin/BMFont folder along with its documentation. mof.exe is a command line tool that converts bitmap font files to mof format required by MAUI::Font. It can be found in the /bin folder.

Building the Font

Start by making a new folder for the project called /fonttest in the MoSync project directory.

Next, open the BMFont tool and configure it as shown below. The most important settings are:

• the charset should be OEM: ANSI (not Unicode),
• the bitmap image (textures) should be saved as png, and
• the font descriptor should be saved in a binary format.

Then make sure that the characters you want in your font are selected. If you want all characters press "Edit->(Un)Select All Chars".

Now press Options > Visualize to see what your bitmap font exactly will look like:



Next, select Options > Save bitmap font as and save your font to our /fonttest folder as a Bitmap font (*.fnt) file:

Converting the Font

In MoSync 2.3:

Use the font wizard to convert BMFont files into MoSync font resources:

1. Right-click any bitmap font (.fnt) file in your workspace.
2. Select Generate MoSync Font Resource...
3. Set the output file and the font color.
4. Click Finish. A .mof file is produced.

In MoSync 2.2:

Open a console window and go to your project directory. Verity that the font you saved is there. There will be two files, one .png file and one .fnt file.

Using mof.exe, convert the font image and data files to a .mof file, the format that MAUI::Font needs:

Optionally, you can add the -fontColor to set the colour of the font. The default colour is white.

Using the Font

The resulting mof-file can be added to your MoSync project as a binary resource and passed to the constructor of MAUI::Font to create a runtime instance of the font.

To draw text using the font, use one of the methods drawString or drawBoundedString. The drawBoundedString method features linebreaking and is therefore slower, so it is recommended to use drawString when possible. We'll show this by making a simple example.

Start Eclipse and create a new project called fonttest. Make it a Moblet project. Also, in the project's build settings, add MAUI.lib to Additional Libraries.

Begin by adding a new resource file called res.lst with the contents:

.res R_FONT
.bin
.include "myfont.mof"

In the source file, add the following inclusions: 

#include <MAUtil/Moblet>
#include <MAUI/Font.h>
#include "MAHeaders.h"

Font.h. is required for bitmap font handling. MAHeaders.h, which will be generated from the compiled resource file, contains the handles to the resources in the resource file.

In the code we will begin by adding an instance of MAUI::Font as a member to the Moblet. We will also make sure it is initialized with a handle to our font resource.

using namespace MAUtil;
class MyMoblet : public Moblet {
private:
    MAUI::Font font;
public:
    MyMoblet() : font(R_FONT) {
    }

Finally we use the font to draw a text whenever the user presses a key.

    void keyPressEvent(int keyCode) {
        font.drawString("Hello world!", 2, 2);
        maUpdateScreen();
    }
    void keyReleaseEvent(int keyCode) {
        // todo: handle key releases
    }
};
extern "C" int MAMain() {
    Moblet::run(new MyMoblet());
    return 0;
};