Tutorial: Como mostrar texto limpo, sem borrões e com efeito de stroke usando Libgdx

(repost de https://bladecast.pro/programacao/tutoriais/fonte-com-efeitos-libgdx) 

Exemplo do que você vai construir ao terminar este tutorial

Uma coisa que quase todos os jogos precisam fazer é exibir alguma forma de texto, nem que seja um número voando que represente os pontos ou dano infligido. E fazer isto no Libgdx poderia ser uma tarefa um pouco mais fácil, principalmente se você quiser incrementar e colocar efeitos como stroke e gradient fill em seus textos.

O processo é um pouco tedioso mas é certeiro. Um jeito de se fazer isso é o seguinte:

1. Customizar a aparência da fonte usando a ferramenta Littera
2. Exporta-la em formato bmf e copia-la para o projeto
3. Instanciar o objeto BitmapFont no projeto e desenhar a fonte no método render()

Vamos aos passos.

1. Gerar a fonte em formato fnt usando a ferramenta Littera

Littera é uma ferramenta online que vai exportar uma fonte de formato comum (TrueType® OpenType®) para formato bitmap font. Comece acessando o site onde a ferramenta se encontra kvazars.com/littera/

Interface da ferramenta Littera com a fonte padrão carregada

A ferramenta tem um design simples e direto, quem usa Photoshop vai se sentir em casa. Escolha a fonte e tamanho que você quer usar em seu jogo na seção Font através do grande botão Select Font.

Utilize o maior tamanho que a fonte vai ser usada no jogo, isto vai fazer com que a sua fonte não seja renderizada com aparência borrada.

Para economizar no tamanho do download final do seu jogo, se possível, restrinja os caracteres, aqui chamados de glyphs, aos que você vai usar, você pode fazer isso na seção anterior à seção de fonte. Alguns conjuntos mais usados podem ser rapidamente escolhidos no dropdown da seção.

Agora você vai escolher os efeitos que deseja em seu texto. Todas as alterações são demonstradas em tempo real.

"E se eu quiser a mesma fonte aparecendo com diferentes estilos?"

Infelizmente, se você quer que essa mesma fonte apareça, por exemplo, com e sem stroke, você vai precisar repetir todo esse processo.

2. Exporta-la em formato bmf e copia-la para o projeto.

Com todas as preferências visuais ajustadas, você precisa agora exportar a fonte em um dos formatos Text, a extensão é indiferente.

Formato XML .fnt selecionado

Pronto. Clique em Export e depois em Start. Não é preciso alterar os valores padrões. Você vai baixar um arquivo zip. Ele vai conter um arquivo .fnt e um arquivo .png, copie estes arquivos para a pasta assets do módulo android de seu projeto.

Coloque os arquivos dentro do módulo android nome-projeto/assets

3. Instanciar o objeto BitmapFont no projeto e desenhar a fonte no método render()

É preciso instanciar um objeto da classe BitmapFont para poder usar a sua fonte. Em create() utilize o seguinte código para criar o objeto, substituindo (NOME_DA_SUA_FONTE) pelo nome real do arquivo que você gerou.

bitmapFont = new BitmapFont(
               Gdx.files.internal("(NOME_DA_SUA_FONTE).fnt"),
               Gdx.files.internal("(NOME_DA_SUA_FONTE).png"),
               false);

Para ser um bom cidadão do ambiente do sistema operacional Android e não causar vazamentos de memória é importante que se desfaça da fonte no método dispose()com uma simples chamada ao método homônimo do objeto bitmapFont

bitmapFont.dispose();

Finalmente você poderá escrever usando a sua fonte! Dentro do método render(), chame

bitmapFont.draw();

Perguntas/Queries relacionadas

• como texto libgdx
• fonte efeitos libgdx
• fonte libgdx limpa

programando-jogos-android.netlify.com