Fonte em Pixel Art: Criar a Tipografia do Seu Jogo

Uma fonte pixel art é um conjunto de letras desenhadas pixel a pixel numa grade fixa, pensadas para aparecer no tamanho exato em que foram desenhadas. Criar a sua resolve dois problemas de uma vez: o texto do jogo combina com a arte, e você garante que Ç, Ã, É e Õ existem, coisa que muita fonte pixel gringa simplesmente não tem.

Aqui você vai definir a grade da fonte, desenhar o alfabeto com os acentos do português no Aseprite, exportar como imagem de bitmap font, converter para TTF quando a engine pedir e configurar na Godot e na Unity sem borrar. No fim tem também onde achar fontes prontas com licença livre, para quando desenhar a sua não fizer sentido.

Fonte pixel art: bitmap ou TTF

Existem dois formatos que você vai encontrar:

Bitmap font. Uma imagem com todos os glifos em grade, mais uma informação de quais caracteres estão em qual célula. A engine recorta e cola cada letra. É exatamente o que você desenhou, pixel por pixel, e só funciona bem no tamanho original e em múltiplos inteiros dele (2x, 3x).

TTF de pixel. Uma fonte vetorial normal, mas cujos contornos são quadradinhos alinhados à grade. Funciona em qualquer programa e em qualquer sistema de texto. A pixel art só sai nítida se você usar o tamanho certo (múltiplo do tamanho de desenho) e desligar a suavização.

Qual escolher: a Godot importa imagem como fonte direto, então bitmap é o caminho mais curto. Na Unity, o TextMeshPro trabalha a partir de arquivo de fonte, então você vai querer o TTF. Desenhar é igual nos dois casos: a grade é a fonte.

Definir altura, largura e espaçamento

Antes do primeiro pixel, decida quatro números. Mudar depois obriga a redesenhar tudo.

1. Altura das maiúsculas (cap height). 5 pixels é o mínimo legível; 7 dá espaço para serifas e curvas. Para um jogo em 320x180 ou 480x270, 5 a 7 é o ponto doce.
2. Espaço para acentos. Maiúsculas acentuadas (Á, Ê, Ã) precisam de 2 linhas acima da altura das maiúsculas: 1 para o acento e 1 de respiro. Sem isso, o til encosta na linha de cima.
3. Descendentes. g, j, p, q, y e a cedilha descem abaixo da linha de base. Reserve 2 linhas.
4. Largura. Monoespaçada (toda célula com a mesma largura) é mais fácil de desenhar e de importar. Proporcional (i estreito, m largo) lê melhor em texto corrido. Para a primeira fonte, faça monoespaçada com 5 pixels de desenho e 1 de espaço, numa célula de 6 de largura.

Exemplo que funciona: célula de 6x11. Linha 0 e 1 para acento de maiúscula, linhas 2 a 8 para a maiúscula de 7 pixels, linha 8 como linha de base, linhas 9 e 10 para descendentes. Minúsculas com 5 pixels de altura (x-height), acento de minúscula cabendo nas linhas 2 e 3.

Espaço entre linhas de texto é configuração da engine, não da fonte. Deixe a célula só com o necessário.

Desenhar o alfabeto e os acentos do português

No Aseprite, crie um sprite com largura igual a 16 células e altura suficiente para as linhas de que você precisa. Com célula de 6x11 e 16 colunas: 96 pixels de largura. Ligue a grade em View > Grid > Grid Settings com largura 6 e altura 11, e mostre com View > Show > Grid. Cada quadrado da grade é uma letra.

Siga a ordem Unicode. É ela que poupa configuração na importação:

• Linha 1 e 2: espaço, pontuação e números (!"#$%&'()*+,-./0123456789:;<=>?), começando no código 32.
• Linha 3 e 4: @ e as maiúsculas A a Z, mais [\]^_.
• Linha 5 e 6: acento grave e as minúsculas a a z, mais {|}~.
• Linhas seguintes: os acentuados do português, em ordem: À Á Â Ã Ç É Ê Í Ó Ô Õ Ú à á â ã ç é ê í ó ô õ ú.

Com a faixa ASCII de 32 a 126 você ocupa exatamente 6 linhas de 16. Os acentuados ficam num bloco separado, e na importação você lista esses caracteres um por um.

Dicas de desenho:

• Comece por H, O, n, o. Elas definem a espessura do traço, a curvatura e a altura. Todas as outras derivam delas.
• Contorno de 1 pixel, uma cor só, sem anti-aliasing. Fonte pequena com pixel intermediário vira borrão.
• O til de 3 pixels de largura em zigue-zague (um pixel em cima, um embaixo, um em cima) lê melhor do que uma linha reta.
• A cedilha cabe em 2 pixels abaixo da base: um pixel embaixo do C e outro deslocado para a esquerda.
• Diferencie l, I e 1, e O e 0. Em 5 pixels isso é um pixel a mais ou a menos, e é o que separa fonte usável de fonte bonita no print.

Escreva uma frase de teste num sprite à parte: "Ação, coração e pão: É ÚNICO?". Ela pega til, cedilha, agudo, circunflexo e maiúscula acentuada de uma vez.

Exportar como bitmap font no Aseprite

O Aseprite não tem um exportador de fonte. O que ele exporta é a imagem com a grade, e isso basta:

1. Esconda qualquer camada de guia ou de rascunho.
2. File > Export As, formato PNG, escala 1x (100%).
3. Confira se o fundo está transparente e se não há pixel solto entre as células.

Se você preferir montar texto dentro do próprio Aseprite para mockups, a Text Tool (atalho T) aceita fontes externas pelo botão Load External Font, com opção de desligar o antialias e alinhar ao pixel com Hinting. Depois de converter sua fonte para TTF, você carrega ela ali e passa a escrever os mockups da UI com a sua própria tipografia.

Converter para TTF quando necessário

Para gerar um TTF a partir do PNG em grade, o caminho mais direto é o conversor de pixel font do yal.cc (yal.cc/r/20/pixelfont), que roda no navegador. Você carrega a imagem, informa o tamanho da célula e a lista de caracteres na ordem em que aparecem, e salva o TTF. Os glifos precisam estar na grade e alinhados à esquerda de cada célula.

Alternativas: BitsNPicas (editor de fontes bitmap em Java, converte BDF e formatos próprios para TTF) e FontStruct (editor web de fontes por blocos, que baixa em TTF). Se você vai editar a fonte por muito tempo, um editor dedicado compensa. Para uma fonte de jogo, o conversor resolve.

Teste o TTF antes de levar à engine: instale, abra num editor de texto, ponha no tamanho exato da célula (11 pixels no exemplo) e escreva a frase de teste. Se uma letra acentuada virou quadrado vazio, faltou ela na lista de caracteres.

Usar na engine

Godot. Copie o PNG para o projeto. No dock Import, troque o tipo para Font Data (Image Font) e clique em Reimport. Preencha Columns (16) e Rows (o número de linhas da sua grade). Em Character Ranges, ponha 32-126 para o bloco ASCII e depois os acentuados, um por entrada, entre aspas simples ('À', 'Á', 'Â'...), na ordem da imagem. A documentação da Godot avisa que a soma dos caracteres não pode passar de colunas vezes linhas, senão a importação falha. Para nitidez, deixe o filtro de textura do projeto em Nearest. Aplique a fonte num Theme ou direto no Label em Theme Overrides > Fonts.

Unity. O TextMeshPro, que no Unity 6 já vem integrado ao pacote de UI, gera um Font Asset a partir do TTF. Abra Window > TextMeshPro > Font Asset Creator, escolha o TTF, ponha Sampling Point Size em Custom com o tamanho nativo da fonte (11) e Render Mode em RASTER ou RASTER_HINTED, que não suavizam a borda. Em Character Set, use Custom Characters e cole todos os caracteres, incluindo os acentuados. Gere e salve. No componente de texto, use o tamanho nativo ou múltiplos (11, 22, 33). Se algum glifo sair torto com RASTER_HINTED, gere de novo com RASTER e compare.

Fonte nítida e com acento é um pedaço pequeno do problema maior, que é fazer a arte inteira do jogo conversar: UI, personagens, cenário e texto com a mesma paleta e a mesma escala de pixel.

Quando a fonte nasce da mesma grade e da mesma paleta que o resto da arte, o jogo ganha unidade visual que nenhuma fonte baixada entrega sozinha. Esse é o tipo de decisão de direção de arte que dá para aprender com método.

Fontes prontas com acentos e licença

Desenhar a própria fonte vale quando a tipografia é parte da identidade do jogo. Quando não é, use uma pronta, desde que ela passe em dois testes: licença que permite uso comercial e Ç, Ã, Õ desenhados.

• Google Fonts: o catálogo inteiro é de código aberto. Tem fontes pixel como Pixelify Sans, Silkscreen, Press Start 2P e VT323. Teste a frase com acentos na própria página antes de baixar.
• Kenney Fonts: pacote de fontes da Kenney distribuído em CC0, sem exigir crédito.
• itch.io, na categoria de fontes: muita fonte pixel boa, com licenças variadas. Leia a página e o arquivo de licença; "free" nem sempre quer dizer uso comercial.

O post sobre fontes para jogos e tipografia aprofunda licença e combinação de fontes.

Erros comuns

Célula sem espaço para acento. O Ã encosta na linha de cima ou é cortado. Reserve 2 linhas acima da maiúscula desde o início.

Tamanho fracionado na engine. Fonte de 11 pixels usada em 14 vira pixel de tamanhos diferentes. Use o tamanho nativo ou múltiplos inteiros.

Anti-aliasing ligado. Na Godot, filtro Linear; na Unity, Render Mode SDF. Os dois borram a fonte. Nearest e RASTER.

Lista de caracteres fora de ordem. A letra que aparece não é a que você digitou. Confira a ordem da grade contra a lista de importação.

Esquecer pontuação. Jogo tem diálogo, e diálogo tem reticências, travessão de fala, aspas e interrogação. Desenhe tudo que o seu roteiro usa.

Fonte de corpo e de título iguais. Título pode ter uma fonte maior e mais expressiva; texto corrido precisa ser a mais legível. Para ícones e números da HUD na mesma grade, veja o post de HUD e ícones em pixel art no Aseprite.