Use of bitmap font in Haxeflixel

Question

I’m working on a game using the framework Haxeflixel 2D and I’m having some difficulties using bitmap fonts to render accented characters. But to make it easier I’m going to divide the question into two parts, basically what I did and what’s the problem.

Preparation and Use of the Chosen Source

I used the online tool Littera.com to create the following image for the bitmap source from True Type font "Gloria" by Peter Wiegel:

The Littera tool also generates the angelcode format (extension. fnt), which is basically an XML mapping the character codes to the subregions in the texture image from where the visual representation of the character should be obtained for rendering.

Here is an example of the Angelcode generated for the previous image:

<font>
    <info face="Gloria" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
    <common lineHeight="72" base="62" scaleW="558" scaleH="511" pages="1" packed="0"/>
    <pages>
        <page id="0" file="Gloria.png"/>
        </pages>
        <chars count="137">
            <char id="97" x="2" y="2" width="27" height="31" xoffset="1" yoffset="33" xadvance="26" page="0" chnl="15"/>
            <char id="98" x="2" y="35" width="26" height="45" xoffset="1" yoffset="19" xadvance="26" page="0" chnl="15"/>
            <char id="99" x="2" y="82" width="22" height="32" xoffset="2" yoffset="32" xadvance="21" page="0" chnl="15"/>
. . .

Once having these two files (the image with the texture and the xml with Angelcode), the use in Haxelflixel is quite simple. Basically I loaded the font using the class Pxbitmapfont and I used it to create text in a specific text rendering platform called Flxbitmaptextfield. Below I reproduce the parts where the creation of the text takes place:

. . .
/**
 * Inicialização da classe.
 */
override public function create():Void
{
    super.create();

    var oFont:PxBitmapFont = getFont();

    m_oLabel = new FlxBitmapTextField(oFont);
    m_oLabel.useTextColor = false;
    m_oLabel.fontScale = 1;
    m_oLabel.alignment = PxTextAlign.CENTER;
    m_oLabel.antialiasing = true;
    m_oLabel.text = "Créditos";
    m_oLabel.x = 400;
    m_oLabel.y = 300;
    m_oLabel.offset.x = oFont.getTextWidth("Créditos") / 2;
    m_oLabel.offset.y = oFont.getFontHeight() / 2;

    add(m_oLabel);
}

/**
 * Obtém a fonte para renderização de texto. A fonte é carregada apenas uma
 * vez, e então mantida em cache para novos usos futuros.
 * @return Instância de PxBitmapFont com a font carregada.
 */
private function getFont():PxBitmapFont
{
    var oFont:PxBitmapFont = null;
    oFont = PxBitmapFont.fetch("Gloria");
    if (oFont == null)
    {
        var sData = Assets.getText("assets/fonts/Gloria.fnt");
        var oData = Xml.parse(sData);
        oFont = (new PxBitmapFont()).loadAngelCode(Assets.getBitmapData("assets/fonts/Gloria.png"), oData);
        PxBitmapFont.store("Gloria", oFont);
    }
    return oFont;
}   
. . .

The full sample project can be downloaded of this zip in 4shared.

Problems with Accented Characters

The problem is that accented characters are not being correctly rendered on all operating systems (in the example project, the letter is lowercase - Unicode Charset 0xE9 - is not being correctly displayed). In fact, I tested compiling the project for Flash, Windows and Android, and only when exporting to Flash the text is correctly rendered (in Android the error is the same as in Windows):

I imagine it’s some problem with the charset of the application when compiled directly to the operating system, but I do not know how to change. I’ve even tried to add "1" to the file’s "Unicode" option. fnt (as specified in the Angelcode documentation referenced above), but it still doesn’t work. By the way, I have already put logs to print the charcode of the characters "is" in both Flash and Windows, and they are printed correctly (233 in decimal, or E9 in hexadecimal).

Answer 1

After poking around a bit I discovered the problem. Apparently there was (or there, it’s not very clear to me yet) a difficulty/error in converting UTF8 characters in native builds (so it works in Flash, which naturally works with UTF8 strings) in Haxe (the language used by the framework).

In the thread referenced in the paragraph above, a user comes to suggest the use of the class Haxe.utf8. Looking at the class code PxBitmapFont of the Haxeflixel framework I realized that it used the calls of string.charCodeAt and string.fromCharCode of Haxe, who possibly still had the problem. I made a local change (available here on 4shared and marked in code with "UPDATE" comments) and the text has been rendered correctly also in native compilations! :)

The two amendments are those:

In the method updateGlyphData

// UPDATE
// ------------------------
// Changed this:
// charString = String.fromCharCode(symbol.charCode);
// To this:
var u = new Utf8();
u.addChar(symbol.charCode);
charString = u.toString();
// ------------------------

In the method render

// UPDATE
// ------------------------
// Changed this:
// var charCode:Int = PxText.charCodeAt(i);
// To this:
var charCode:Int = Utf8.charCodeAt(PxText, i);
// ------------------------

Note: The class PxBitmapFont has passed through changes (even changed name) that have not yet been released as official version. So, I don’t know if this problem has really been solved. But, as I didn’t find a Issue specific to such and as the current code of the new class yet uses direct calls in string, I decided to submit this Git download of the Haxeflixel project in the expectation that it may be useful.

EDIT:

The issue was fixed by the Haxeflixel developers, and the Issue has been shut down on Github: https://github.com/HaxeFlixel/flixel/issues/1409