Mixels: o Erro de Misturar Tamanhos de Pixel no Jogo

Mixels em pixel art são pixels de tamanhos diferentes convivendo na mesma tela: um personagem com pixels grandes ao lado de um cenário com pixels pequenos, um machado girado que vira um borrão de quadradinhos tortos, uma interface nítida demais por cima de um mundo pixelado. Cada sprite pode estar bem desenhado, e mesmo assim o jogo parece montado com peças de lugares diferentes.

O problema quase nunca está no desenho. Está na escala. Este post mostra onde os mixels aparecem num jogo de verdade, a regra de escala única que evita a maioria deles e as configurações exatas da Unity 6 e da Godot 4 que travam o resto.

O que são mixels

Pixel art funciona porque existe uma grade invisível: cada pixel desenhado ocupa o mesmo espaço na tela. Quando o jogo roda em 320x180 e é ampliado 4x para 1280x720, cada pixel do desenho vira um bloco de 4x4 pixels da tela. Se todo mundo segue essa grade, o olho lê o conjunto como um estilo.

Mixel é qualquer coisa que sai dessa grade. Os três tipos mais comuns:

1. Escala diferente: um sprite ampliado 2x dentro de um jogo em 1x. Os pixels dele ficam com o dobro do tamanho.
2. Rotação e escala não inteira: a engine gira ou estica um sprite e os pixels deixam de ser quadrados alinhados.
3. Resolução misturada: interface, texto ou partículas desenhados numa resolução diferente da do mundo do jogo.

Não confunda com o problema de ampliar uma imagem e ela borrar. Borrão é filtro de textura. Mixel acontece mesmo com filtro desligado: os pixels ficam nítidos, mas de tamanhos diferentes. Para o borrão, o post sobre ampliar pixel art sem borrar resolve.

Pixel art resolução misturada: onde aparece

Em projeto real, os mixels entram por estes caminhos:

• Asset de pacotes diferentes. O tileset é de 16x16 e o personagem que você baixou foi desenhado em 32x32. Para caber no tile, alguém escala o personagem para 50%, ou escala o tileset para 200%. Pronto: dois tamanhos de pixel.
• Chefe "maior". Em vez de desenhar um chefe de 64x64, alguém pega o inimigo de 32x32 e aplica escala 2 na engine. O chefe fica com pixels do dobro do tamanho do herói.
• Personagem desenhado em outra resolução. O cenário foi feito para 320x180 e o personagem foi desenhado em 48x48 pensando em 640x360. Na tela, ele parece de outro jogo.
• Pixels Per Unit diferentes. Na Unity, um sprite importado com PPU 16 e outro com PPU 32 aparecem em tamanhos de pixel diferentes mesmo com escala 1 no Transform.
• Partícula e efeito. Fumaça feita com textura suave ou com partículas de tamanho arbitrário quebra a grade no meio da ação.

O sintoma é sempre o mesmo: o jogador não sabe dizer o que está errado, mas sente que o jogo é "amador".

Rotação e escala não inteira

Girar um sprite pixelado em 30 graus na engine obriga a recalcular cada pixel. Sem tratamento, os pixels viram diamantes ou escadinhas de tamanhos diferentes. O mesmo vale para:

• Squash and stretch na engine. Esticar o personagem 1,2x no pulo cria pixels retangulares.
• Zoom de câmera não inteiro. Câmera em 1,5x, ou uma janela de 1366x768 com jogo base de 320x180 (escala de 4,27), deixa algumas colunas de pixel com 4 pixels de tela e outras com 5. Em movimento, isso vira tremulação.
• Arma girando. Espada que acompanha o mouse é o caso clássico.

Soluções, da mais barata para a mais cara:

1. Desenhe as rotações. Para uma espada em 8 direções, desenhe 3 (0, 22,5 e 45 graus) e espelhe o resto. No Aseprite, gire a seleção com o algoritmo RotSprite (opção Rotation Algorithm na barra de contexto da ferramenta de seleção) e limpe os pixels à mão.
2. Squash and stretch desenhado. Faça frames de pulo achatados e esticados em vez de escalar na engine.
3. Deixe a engine renderizar em baixa resolução. Com a configuração certa (abaixo), a engine desenha o jogo inteiro em 320x180 e só depois amplia. Um sprite girado nessa resolução vira pixels do mesmo tamanho dos outros. Não fica tão limpo quanto desenhado à mão, mas não mistura escala.

UI e texto em outra escala

A interface é onde a mistura mais passa despercebida. O jogo está em 320x180 e alguém coloca um texto com fonte TrueType comum na resolução nativa da tela. O texto fica perfeitamente nítido, e é exatamente por isso que destoa.

Duas saídas consistentes:

• Interface na resolução do jogo. Fonte bitmap em pixel (8x8 ou 5x7, por exemplo), ícones desenhados na mesma grade, barra de vida com pixels do mesmo tamanho do personagem.
• Interface separada de propósito. Texto em alta resolução, mas em painéis que claramente pertencem a outra camada, como uma caixa de diálogo limpa. Funciona quando é decisão de direção de arte e se repete em todo o jogo.

O que não funciona é misturar as duas: barra de vida pixelada e número de dano em fonte lisa na mesma tela.

Escala única do projeto

A regra que evita a maioria dos mixels cabe numa frase: defina uma resolução base e desenhe tudo para ela, com 1 pixel do desenho igual a 1 pixel da resolução base.

Resoluções base comuns e como elas ampliam:

A 320x180 e a 640x360 ampliam em número inteiro para as três telas mais comuns de 16:9. A documentação da Godot cita a 640x360 como uma boa base justamente por isso.

Com a base decidida:

• Tamanho de tile e de personagem saem dela. Em 320x180, tiles de 16x16 dão 20x11,25 tiles na tela, e um personagem de 16x24 ou 24x32 tem boa presença.
• Nada é escalado na engine. Chefe grande é desenhado grande. Personagem que não cabe é redesenhado, não reduzido.
• Todo asset novo é conferido. Abra no editor ao lado de um tile do jogo, no mesmo zoom. Se os pixels não batem, o asset não entra.

O guia de pixel art para jogos ajuda a escolher o tamanho de sprite a partir dessa base.

Entender a regra é simples. Aplicar em cada sprite, tile, efeito e tela de menu de um jogo inteiro, sem deixar escapar um asset, é o tipo de disciplina que costuma faltar quando a pessoa produz sozinha e sem revisão.

Configuração na engine: filtro e câmera pixel perfect

Na Unity 6 (URP). Na importação de cada sprite, use Filter Mode: Point (no filter), Compression: None e o mesmo Pixels Per Unit em todos (se o tile é 16x16, PPU 16). Na câmera, use o componente Pixel Perfect Camera da URP. Pela documentação do Unity 6.3, ele já vem incluído no template Universal 2D, e você não deve instalar o pacote separado 2D Pixel Perfect, que só funciona na Built-In Render Pipeline. Configure Asset Pixels Per Unit igual ao PPU dos sprites e Reference Resolution com a sua base (320x180, por exemplo). Em Grid Snapping, a opção Upscale Render Texture renderiza a cena numa textura do tamanho da resolução de referência e depois amplia, o que a documentação descreve como pixels sem serrilhado e sem rotação: é a opção que mata o mixel de sprite girado. Pixel Snapping só alinha os sprites à grade sem renderizar em baixa resolução. Crop Frame com Letterbox ou Windowbox coloca barras pretas em vez de usar escala não inteira.

Na Godot 4. Em Project Settings, ajuste Display > Window > Size com a resolução base (Viewport Width 320, Viewport Height 180) e, em Stretch, Mode: viewport e Scale Mode: integer (disponível desde a Godot 4.2, segundo a documentação, para impedir escala não inteira). Em Rendering > Textures > Canvas Textures > Default Texture Filter, escolha Nearest. Se você usa o modo canvas_items em vez de viewport, ative Rendering > 2D > Snap > Snap 2D Transforms to Pixel para os sprites caírem em pixel inteiro. A documentação também recomenda Exclusive Fullscreen em vez de Fullscreen, porque o modo Fullscreen tira 1 pixel de altura e pode fazer a escala inteira escolher um fator menor.

Nos dois casos, teste numa janela de tamanho estranho (1366x768, por exemplo). Se aparecer barra preta e os pixels continuarem iguais, a configuração está certa.

Quando misturar é escolha de estilo

Mixel não é pecado. Alguns jogos misturam escalas e ficam bonitos, porque a mistura segue uma regra:

• Fundo pintado em alta resolução com personagens em pixel, quando todo o cenário segue o mesmo padrão e todos os personagens também.
• Texto e interface em alta resolução, aplicados a todas as telas.
• Efeitos de partícula suaves como camada de atmosfera, sempre do mesmo jeito.
• Zoom dramático numa cena específica, em que ampliar a arte é parte do efeito.

O teste: se você consegue escrever a regra da mistura numa frase ("todo texto é HD, todo mundo de jogo é 320x180") e ela vale para o jogo inteiro, é estilo. Se a mistura aparece num sprite e não no vizinho, é erro.

Checklist

• Resolução base definida e anotada no documento do projeto.
• Todo sprite desenhado na base, sem escala no Transform ou no nó.
• Mesmo Pixels Per Unit em todos os sprites (Unity).
• Filtro Point ou Nearest e sem compressão nas texturas.
• Pixel Perfect Camera (Unity) ou stretch viewport + integer (Godot) configurados.
• Rotações importantes desenhadas à mão ou renderizadas em baixa resolução.
• Interface na grade do jogo ou separada por uma regra consistente.
• Teste em janela de tamanho não padrão sem tremulação.

Para fixar, abra o seu projeto atual, tire um print com personagem, inimigo, tile e interface juntos e amplie 400% num editor. Qualquer pixel de tamanho diferente aparece na hora. Corrija os assets que fogem da base antes de desenhar o próximo.