4

Estou trabalhando em um jogo usando o framework Haxeflixel 2D e estou tendo algumas dificuldades na utilização de fontes bitmap para renderizar caracteres acentuados. Mas pra facilitar vou dividir a pergunta em duas partes, basicamente o que eu fiz e qual é o problema.

Preparação e Uso da Fonte Escolhida

Eu utilizei a ferramenta online Littera.com para criar a seguinte imagem para a fonte bitmap a partir da fonte True Type "Gloria" de Peter Wiegel:

inserir a descrição da imagem aqui

A ferramenta Littera também gera o arquivo no formato Angelcode (extensão .fnt), que é basicamente um XML mapeando os códigos dos caracteres às subregiões na imagem de textura de onde a representação visual do caractere deve ser obtida para renderização.

Aqui está um exemplo do Angelcode gerado para a imagem anterior:

<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"/>
. . .

Uma vez tendo esses dois arquivos (a imagem com a textura e o xml com o Angelcode), o uso no Haxelflixel é bastante simples. Basicamente eu carreguei a fonte usando a classe PxBitmapFont e a utilizei para criar o texto em um sprite específico para a renderização de texto chamado FlxBitmapTextField. Abaixo eu reproduzo as partes onde a criação do texto ocorre:

. . .
/**
 * 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;
}   
. . .

O projeto de exemplo completo pode ser baixado deste zip no 4shared.

Problemas com Caracteres Acentuados

O problema é que caracteres acentuados não estão sendo corretamente renderizados em todos os sitemas operacionais (no projeto de exemplo, a letra é minúscula - Unicode Charset 0xE9 - não está sendo corretamente exibida). De fato, eu testei compilando o projeto para Flash, Windows e Android, e apenas na exportação para Flash o texto é corretamente renderizado (no Android o erro é o mesmo do Windows):

inserir a descrição da imagem aqui

Eu imagino que seja algum problema com o charset da aplicação quando compilada diretamente para o sistema operacional, mas não sei dizer como alterar. Já tentei até mesmo adicionar "1" à opção "Unicode" do arquivo .fnt (como especificado na documentação do Angelcode referenciado anteriormente), mas mesmo assim não funciona. Aliás, já coloquei logs para imprimir o charcode do caracteres "é" tanto em Flash como em Windows, e eles são impressos corretamente (233 em decimal, ou E9 em hexadecimal).

1 Resposta 1

2

Depois de fuçar um bocado eu descobri o problema. Aparentemente havia (ou há, não está muito claro pra mim ainda) uma dificuldade/erro em fazer a conversão de caracteres UTF8 nas compilações nativas (por isso funciona no Flash, que naturalmente trabalha com as strings em UTF8) no Haxe (a linguagem utilizada pelo framework).

Na thread referenciada no parágrafo acima, um usuário chega a sugerir o uso da classe Haxe.utf8. Olhando o código da classe PxBitmapFont do framework HaxeFlixel eu percebi que ele usava as chamadas de string.charCodeAt e string.fromCharCode do Haxe, que possivelmente ainda tinham o problema. Fiz uma alteração local (disponível aqui no 4shared e marcadas no código com comentários "UPDATE") e o texto passou a ser renderizado corretamente também nas compilações nativas! :)

As duas alterações são essas:

No método updateGlyphData

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

No método render

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

Obs.: A classe PxBitmapFont tem passado por alterações (mudou até de nome) que ainda não foram liberadas como versão oficial. Assim, não sei se esse problema já foi de fato resolvido. Mas, como não achei uma issue específica para tal e como o código atual da nova classe ainda usa as chamadas direto em string, resolvi submeter essa issue ao Git do projeto HaxeFlixel na expectativa de que possa ser útil.

EDIT:

O problema foi corrigido pelos desenvolvedores do HaxeFlixel, e a issue foi encerrada no Github: https://github.com/HaxeFlixel/flixel/issues/1409

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .