Use of bitmap font in Haxeflixel

Navigation
4

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'll split the question into two parts, basically what I did and what the problem is.

Preparation and Use of the Selected Source

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

TheLitteratoolalsogeneratesthefileinthe Angelcode format (.fnt extension), which is basically an XML mapping the character codes to subregions in the texture image where the visual representation of the character should be obtained for rendering.

Here is an example of 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 you have these two files (the image with texture and xml with Angelcode), using Haxelflixel is quite simple. Basically I loaded the font using the class PxBitmapFont and used it to create the text in a sprite specific for rendering text called FlxBitmapTextField . Below I reproduce the parts where the creation of the text occurs: 

. . .
/**
 * 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 complete sample project can be downloaded from this zip in 4shared .

Problems with Accent Characters

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

Iimagineittobesomeproblemwiththecharsetoftheapplicationwhencompileddirectlytotheoperatingsystem,butIdonotknowhowtochangeit.I'veeventriedadding"1" to the "Unicode" option of the .fnt file (as specified in the Angelcode documentation referenced earlier), but it still does not work. In fact, I've already placed logs to print the character charcode "is" in both Flash and Windows, and they print correctly (233 in decimal, or E9 in hex).

    
asked by anonymous 23.12.2014 / 23:36

1 answer

2

After a bit of tweaking, I discovered the problem. Apparently there was (or is not very clear to me yet) a difficulty / error in converting UTF8 characters in the native compilations (so it works in Flash, which of course works with UTF8 strings) in Haxe (the language used by the framework).

In the thread referenced in the paragraph above, a user even suggests using the Haxe.utf8 class. Looking at the code of the PxBitmapFont class of the HaxeFlixel framework I noticed that it used the string.charCodeAt and string.fromCharCode calls of Haxe, which possibly still had the problem. I made a local change ( available here in 4shared and marked in the code with "UPDATE" comments) and the text started to be rendered correctly also in native compilations! :)

The two changes are these:

In method updateGlyphData 

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

In 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 undergone changes (even changed name) that have not yet been released as official version. So I do not know if this problem has actually been solved. But as I did not find a specific issue and as the current code of the new class still uses direct calls in string , I decided to submit this issue to the Git of the HaxeFlixel project in the hope that it might be useful.

EDIT:

The issue was fixed by the HaxeFlixel developers, and issue was terminated in Github: link

    
24.12.2014 / 03:41
Telephone Directory Search Request ajax