Pixel Art na Godot 4: Projeto Nítido sem Borrar

Pixel art na Godot fica nítida com quatro ajustes nas Project Settings: resolução base baixa, Stretch Mode em viewport, Scale Mode em integer e filtro de textura Nearest. Um quinto ajuste, o snap de pixel, resolve o personagem que treme. A Godot 4 vem configurada para arte em alta resolução, então um projeto novo com sprites de 16 ou 32 pixels aparece borrado, com pixels de tamanhos diferentes e movimento estranho até você mudar essas opções.

Este post configura um projeto do zero na Godot 4.7, a versão estável atual, e liga cada sintoma à opção que conserta: borrado é filtro, pixel desigual é escala fracionada, tremendo é posição abaixo de um pixel.

Pixel art Godot: por que fica borrado

Três coisas diferentes costumam ser chamadas de "borrado", e cada uma tem uma causa:

Se você conserta só o filtro, a arte fica dura mas com pixels desiguais. Se conserta só a escala, fica uniforme mas borrada. Precisa dos dois, e do snap se houver movimento.

Antes de começar: abra Project > Project Settings e ligue o botão Advanced Settings no canto superior direito. Algumas opções deste post só aparecem com ele ligado.

Resolução base e tamanho da janela

A resolução base é o tamanho da tela "de verdade" do jogo, em pixels de arte. Tudo é desenhado e posicionado nessa grade pequena, e a Godot amplia o resultado.

Em Display > Window > Size:

• Viewport Width e Viewport Height: a resolução base. Projeto novo vem com 1152x648, que serve para arte HD. Para pixel art, use algo como 320x180 ou 640x360.
• Window Width Override e Window Height Override: o tamanho da janela quando o jogo abre no PC. Com base 320x180, uma janela de 1280x720 (escala 4) é confortável para testar.

Escolha a base pensando em 1920x1080, a tela mais comum de PC:

Todas dividem 1920x1080 exatamente. Uma base como 400x225 não divide, e vai sobrar borda preta ou exigir escala fracionada. A relação entre o tamanho do sprite e a base também pesa: o sprite precisa ser legível na base escolhida. Se você ainda não decidiu o tamanho dos sprites, faça isso primeiro.

Stretch mode e scale mode integer

Em Display > Window > Stretch:

• Mode: viewport. A Godot renderiza a cena inteira na resolução base e amplia a imagem final. Tudo, inclusive rotação e partículas, fica preso na grade de pixels da base. É o modo que deixa a pixel art com cara de pixel art.
• Aspect: keep se o jogo tem uma proporção só (com barras pretas em telas diferentes), ou expand se você quer mostrar mais área em telas mais largas.
• Scale Mode: integer. Disponível desde a Godot 4.2. O fator de escala é arredondado para baixo até um inteiro, então cada pixel da arte vira exatamente 3, 4 ou 6 pixels na tela. Sem isso, numa janela de 1366x768 com base 320x180, a escala seria 4,26, e alguns pixels ficariam com 4 pixels de largura e outros com 5. Esse é o "pixel desigual".

O custo do integer: em telas que não são múltiplo exato da base, sobra borda preta. É a troca certa para pixel art.

Duas observações da documentação oficial que evitam surpresa. Com integer, se a janela ficar menor que a resolução base, o conteúdo é cortado, então trave o tamanho mínimo da janela no tamanho da base. E em tela cheia, prefira o modo Exclusive Fullscreen, porque o modo Fullscreen comum pode reduzir a janela em 1 pixel e atrapalhar a escala inteira.

Um script de autoload resolve as duas coisas. Crie boot.gd, adicione em Project Settings > Globals > Autoload:

extends Node

const BASE_SIZE: Vector2i = Vector2i(320, 180)

func _ready() -> void:
    get_window().min_size = BASE_SIZE

func _unhandled_input(event: InputEvent) -> void:
    if event.is_action_pressed("ui_fullscreen"):
        var mode: DisplayServer.WindowMode = DisplayServer.window_get_mode()
        if mode == DisplayServer.WINDOW_MODE_EXCLUSIVE_FULLSCREEN:
            DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_WINDOWED)
        else:
            DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_EXCLUSIVE_FULLSCREEN)

A ação ui_fullscreen não existe por padrão: crie em Project Settings > Input Map e associe a F11. Para uma tela de opções completa com resolução e VSync, o post de configurações de vídeo no Godot 4 monta o menu inteiro.

Filtro Nearest padrão nas Project Settings

Este é o ajuste que resolve o "pixel art godot blurry" das buscas. Em Rendering > Textures > Canvas Textures > Default Texture Filter, troque de Linear para Nearest.

Linear calcula a cor de cada pixel da tela misturando os pixels vizinhos da textura. Em arte HD isso suaviza; em pixel art, transforma a borda dura em degradê. Nearest pega a cor do pixel mais próximo, sem mistura.

Mudar o padrão do projeto é melhor que mudar sprite por sprite. Cada CanvasItem tem a propriedade Texture > Filter, que vem em Inherit (herda do pai e, no topo, do projeto). Se um sprite continua borrado depois do ajuste global, alguém mudou o Filter dele, ou de um nó pai, para Linear. Volte para Inherit.

Na importação do PNG, não precisa mexer em nada para filtro, porque na Godot 4 o filtro é decidido na hora de desenhar, não no import. Mas desligue Mipmaps > Generate se estiver ligado: pixel art não precisa de mipmap.

Ter a pixel art nítida na tela é o primeiro passo. Fazer o personagem, o tileset, os inimigos e a UI conversarem na mesma resolução, com a mesma espessura de contorno e uma paleta que segura a cena, é o que leva mais tempo de quem está aprendendo sozinho. O curso de Arte 2D trabalha esse conjunto de ponta a ponta, do sprite ao asset pronto na engine.

Snap 2D de transform e vértices

Em Rendering > 2D > Snap existem duas opções:

• Snap 2D Transforms to Pixel: os CanvasItems são desenhados em posições inteiras de pixel. A posição no código continua podendo ser 10,4, mas o desenho arredonda.
• Snap 2D Vertices to Pixel: arredonda só os vértices finais, sem mexer na transformação.

Ligue só o Snap 2D Transforms to Pixel. A documentação da Godot avisa que ligar os dois juntos deixa o movimento ainda menos suave e recomenda ficar com o de transforms. Essas opções são lidas quando o projeto inicia: depois de mudar, rode o jogo de novo.

Controles de UI já são alinhados ao pixel por padrão (opção GUI > Common > Snap Controls to Pixels), então você não precisa de nada extra para a interface.

Câmera e movimento sem tremor

Com stretch mode viewport, nada se move menos de um pixel da base, porque a imagem é renderizada nessa grade. Isso é o visual correto de pixel art, mas expõe dois problemas:

Smoothing da câmera. O Camera2D com Position Smoothing ligado move a câmera em frações de pixel. Com o snap, a câmera e o personagem arredondam em momentos diferentes, e o personagem parece tremer contra o fundo. Soluções: desligar o Position Smoothing, ou fazer a sua própria suavização num script e arredondar a posição final da câmera com round() antes de aplicar.

Física e taxa de quadros. O movimento físico roda numa taxa fixa (60 vezes por segundo, por padrão), e o monitor pode ter outra. Em 144 Hz, alguns quadros repetem a posição e outros pulam. A Godot 4 tem interpolação de física em Physics > Common > Physics Interpolation, que suaviza essa diferença.

Se o jogo precisa de movimento abaixo de um pixel (uma câmera lenta e cinematográfica, por exemplo), a documentação recomenda o stretch mode canvas_items em vez de viewport. Você perde a grade rígida (rotação e escala ficam em alta resolução), mas ganha suavidade. É uma escolha de estilo; não existe resposta errada, mas misture as duas e você terá um sprite rotacionado em alta resolução ao lado de pixels grandes.

Erros comuns: filtro por sprite e viewport fracionado

Filtro sobrescrito num nó. O projeto está em Nearest, mas um nó pai ficou em Linear e todos os filhos borram. Procure o Filter na seção Texture de cada CanvasItem da árvore.

Base que não divide a tela. 400x240 numa tela de 1080p obriga escala fracionada ou borda grande. Use uma base da tabela.

Scale Mode em fractional. É o padrão do projeto novo. Sem integer, o pixel desigual volta em qualquer janela de tamanho estranho.

Os dois snaps ligados. Movimento travado. Fique só com Transforms.

Sprite ampliado pela escala do nó. Um Sprite2D com escala 1,5 em base de pixel art distorce os pixels. Desenhe no tamanho certo e mantenha escala 1, 2 ou 3.

Arte exportada já ampliada. Se você exporta do Aseprite com escala 400%, a Godot recebe um PNG enorme e o sprite fica gigante. Exporte em 100%. O post de Aseprite para Godot mostra o export certo da sprite sheet.

Próximo passo

Crie um projeto novo, aplique os cinco ajustes (base, viewport, integer, Nearest, snap de transforms), coloque um sprite de 16x16 andando sobre um tileset e teste a janela em vários tamanhos e em tela cheia. Se precisar ampliar arte fora da engine, para divulgação ou loja, o post de ampliar pixel art sem borrar cobre o GIMP e o Krita.