Editor de pixel art

A pixel art nasceu no hardware, e depois escolheu ficar

A pixel art não foi, nas suas primeiras décadas, uma estética, era uma restrição. O Atari 2600 (Summer CES, 4 de junho de 1977) desenhava a sua imagem com um Television Interface Adaptor que expunha dois sprites «player» de 8 píxeis de largura e os reutilizava linha a linha; os programadores aprenderam a «correr atrás do feixe» (race the beam) para conseguir mais cores visíveis ao mesmo tempo. O Commodore 64 (janeiro de 1982) oferecia oito sprites de hardware 24×21 e uma paleta VIC-II de 16 cores que se tornou a assinatura visual de toda uma década de jogos europeus. A NES (1985) usava um PPU Ricoh 2C02 com uma paleta-mestra de cerca de 54 cores distinguíveis, das quais 25 podiam estar no ecrã ao mesmo tempo, particionadas numa paleta de fundo de 13 cores e quatro subpaletas de sprite com 3 cores, e a tile de sprite 8×8 tornou-se a unidade de design que ainda se sente na pixel art de hoje. O Game Boy DMG-01 (1989) levou o limite mais longe: quatro tons de uma só cor num LCD reflectivo de 160×144 que à luz do dia se lia verde-azeitona. Nenhuma destas paletas foi escolhida pela beleza; foram escolhidas pelo que o chip podia fazer por uns cêntimos.

Algures nos anos 1990, a equação inverteu-se. O hardware apanhou o atraso; o pré-renderizado e depois o 3D em tempo real tornaram-se o padrão para produções de grande orçamento. A pixel art podia ter morrido aí. Em vez disso, tornou-se algo mais raro: uma escolha estética deliberada. Daisuke Amaya (que assina o seu trabalho simplesmente como «Pixel») passou cinco anos entre a faculdade e um emprego diurno a montar Cave Story, lançado como freeware a 20 de dezembro de 2004. Markus «Notch» Persson publicou a primeira versão de Minecraft no TIGSource a 17 de maio de 2009, com texturas de bloco por defeito de 16×16 píxeis, ainda o formato canónico dos packs de recursos. Eric «ConcernedApe» Barone lançou Stardew Valley a 26 de fevereiro de 2016 após cerca de quatro anos e meio de desenvolvimento a solo, desenhando ele próprio cada sprite no Paint.NET. A Heart Machine lançou Hyper Light Drifter (março de 2016); Maddy Thorson e Noel Berry lançaram Celeste (janeiro de 2018), construído originalmente como um protótipo de quatro dias na consola fantasia PICO-8 de Joseph White. A Motion Twin lançou Dead Cells em agosto de 2018, cuja «pixel art» é na verdade modelos 3D rerrenderizados em baixa resolução. Juntos, estes jogos tornaram impossível argumentar que pixel art era nostalgia, era um meio contemporâneo com as suas próprias convenções, ferramentas e estrelas.

Porquê grelhas em potências de dois e como escolher a tua

Os tamanhos padrão de tela em pixel art (8×8, 16×16, 32×32, 64×64) remontam directamente ao hardware das consolas. A tile 8×8 da NES, o sprite 24×21 do C64, o OBJ 8×8 do Game Boy, dados de bitmap que podiam ser endereçados com aritmética barata em potências de dois e empacotados eficientemente em memória. Um sprite de personagem 16×16 são duas tiles NES empilhadas; um 32×32 são quatro. A convenção persistiu para além da era em que o endereçamento de memória interessava, porque por essa altura os artistas já tinham interiorizado o ritmo de trabalho de «uma tile tem 8 ou 16 píxeis e contém uma forma legível». Uso prático de cada tamanho neste editor: 8×8 para ícones, esboços de emotes do Twitch e elementos minúsculos de tile; 16×16 para o sprite de personagem de trabalho, ícones de itens e o formato canónico de textura do Minecraft; 32×32 para retratos detalhados ou adereços maiores; 48×48 para tilesets que incluem sombreamento; 64×64 para sprites à escala de herói e cenas pequenas. Começa pequeno, a pixel art define-se pela sua baixa resolução, e a disciplina de trabalhar em 16×16 ou 32×32 é o que produz arte que se lê limpa ao tamanho de miniatura.

Paletas, a disciplina que faz a pixel art ler-se

Os limites de paleta do hardware deram à pixel art o seu segundo traço definidor: disciplina de cor imposta. A NES permitia, por tile de fundo 8×8, no máximo quatro cores (contando o fundo universal); o Game Boy DMG só conseguia exprimir quatro tons de verde-cinzento ao mesmo tempo. O hardware moderno não impõe nada disto, qualquer artista de pixel art em 2026 dispõe de todo o espaço de cor RGB de 24 bits e alfa completo de 8 bits. Ainda assim, a comunidade escolhe largamente trabalhar dentro de paletas de 16, 32 ou 64 cores na mesma, e não por afectação retro. Uma paleta pequena obriga a que cada decisão de cor conte: impõe uma estrutura de valor coerente, tons complementares com intenção, cores reutilizadas em vários sprites para que uma cena se leia unificada em vez de caótica. É por isso que tanta pixel art moderna parece intencional, de uma forma que a maior parte da arte digital amadora não parece. A paleta é uma disciplina, como a restrição dos 14 versos de um soneto.

Quatro paletas curadas por artistas dominam a cena moderna. PICO-8 (Joseph «zep» White, apresentada a 9 de maio de 2014 no Pico Pico Cafe com lançamento público em 2015), dezasseis cores cuja linhagem White faz remontar ao Commodore 64, aos trackers do Amiga 500 e à «estética geral de outros hardwares dos anos 80». O protótipo de Celeste de 2015 foi escrito em PICO-8 em quatro dias. DawnBringer DB16 e DB32 (Richard Fhager, 2007 e seguintes), concebidas para um trabalho de píxeis pintado à mão e expressivo em vez de imitar qualquer hardware. Hoje incluídas por defeito com Aseprite e GIMP. Endesga 32 e 64 (Seth «ENDESGA»), construídas para «pixel art e design materialista» com alto contraste e alta saturação. Pelos números brutos de descarga (192 000+ para Endesga 32, 91 000+ para Endesga 64 no Lospec), estão entre as paletas feitas por artistas mais usadas na internet. Sweetie 16 (GrafxKid), tornou-se a paleta por defeito da consola fantasia TIC-80. Lospec.com em si, fundada em 2017 por um artista que se faz chamar skeddles, é o centro comunitário principal: base de dados de paletas, tutoriais, galeria (lançada em janeiro de 2023), torneios, e um arquivo descarregável de cada paleta de hardware em formatos compatíveis com Aseprite, Photoshop, Paint.NET e GIMP.

Como funciona realmente um editor de píxeis no navegador

Um editor de pixel art na web tem de lutar contra os valores por defeito prestáveis do navegador, qualquer navegador moderno aplica interpolação bilinear ou bicúbica ao escalar imagens, o que serve para fotos mas é ruinoso para pixel art (transforma píxeis nítidos em manchas borradas). A solução são duas configurações complementares aplicadas em camadas diferentes. CSS image-rendering: pixelated no elemento canvas obriga o compositor do navegador a usar escalonamento por vizinho mais próximo quando o canvas é exibido a um tamanho diferente do seu backing store, quando um canvas 16×16 é esticado para 512×512 via CSS, cada píxel original torna-se um bloco 32×32 de píxeis idênticos com bordas nítidas. ctx.imageSmoothingEnabled = false no contexto de renderização 2D obriga as próprias operações de desenho a usar vizinho mais próximo ao escalar dados de entrada. Sem ambos, tens borrão. O modelo de desenho: um array 2D em memória de valores de cor, um canvas cujo tamanho CSS é muito maior do que o seu backing store, e ferramentas que mutam o array e redesenham as células afectadas com ctx.fillRect. A sobreposição da grelha fica por cima como linhas de um píxel de largura que se desactivam para uma pré-visualização sem obstáculos. A exportação PNG usa canvas.toBlob(callback, 'image/png'): assíncrona, codificada fora da thread principal. PNG é o formato certo por duas razões: sem perdas (cada píxel sobrevive bit a bit) e suporta alfa (fundos transparentes para sprites de jogo). JPEG está errado, a sua compressão DCT esborrata as bordas dos blocos e introduz artefactos de oscilação.

As seis ferramentas e o que realmente fazem

• Lápis (D): escreve um único píxel na posição do cursor. Para evitar buracos quando o cursor se move depressa entre eventos do rato, a ferramenta desenha em cada frame uma linha de Bresenham desde a posição anterior do cursor até à atual.
• Borracha (E): estruturalmente idêntica ao lápis, mas escreve a cor de fundo, devolvendo os píxeis ao seu estado por defeito.
• Balde (F): substitui cada píxel ligado da mesma cor que o alvo do clique. Usa preenchimento por inundação com 4-conectividade (vizinhos norte/sul/este/oeste, sem diagonais) para que uma linha diagonal fina impeça o balde de fugir, a convenção que casa com a intuição do utilizador. Implementado iterativamente com uma pilha em vez de recursivamente, porque o flood fill recursivo num canvas grande transborda a pilha de chamadas do JavaScript.
• Conta-gotas / Pick (I): lê a cor do píxel sob o cursor e define-a como cor de desenho atual. Uma das ferramentas mais utilizadas nos fluxos de trabalho de pixel art assim que uma paleta está estabelecida.
• Linha (L): usa o algoritmo de traçado de linhas de Bresenham (Jack Bresenham na IBM, 1965) (apenas adições inteiras e deslocamentos de bits, sem divisão) para caminhar entre duas coordenadas inteiras de píxel mantendo um acumulador de erro. O aspecto deliberadamente escadeado de Bresenham é aqui uma característica estética positiva, não um artefacto a suavizar.
• Rectângulo (R): desenha o contorno de um rectângulo alinhado aos eixos. Dois cliques: o primeiro fixa o canto, o segundo completa o canto oposto.
• Desfazer (Ctrl+Z): histórico completo passo a passo.

Para onde vai a pixel art, tamanhos de saída no mundo real

• Sprites de jogo. O caso de uso original e ainda principal, um inimigo 16×16, um personagem jogável 32×32, um boss 48×48, uma tile de relva 16×16, tudo montado numa folha de sprites para o tempo de execução. Toda a economia indie 2D assenta neste fluxo.
• Emotes do Twitch. O Twitch exige cada emote personalizado em três tamanhos exactos: 28×28 (usado no chat padrão), 56×56 (ecrãs de alta DPI, hoje a maioria dos espectadores), 112×112 (selectores de emotes). Emotes estáticos abaixo de 25 KB por tamanho; animados até 1 MB e 60 frames. O fluxo de pixel art é desenhar a 28×28 com formas duras e legíveis, e depois ampliar por múltiplos inteiros sem perdas, com vizinho mais próximo.
• Emoji personalizado do Discord. O tamanho recomendado pelo Discord é 128×128 com tecto de 256 KB; os emoji são exibidos reduzidos a 32×32 nas mensagens e a 48×48 nas reações. Proporção quadrada obrigatória; PNG e GIF suportados.
• Favicons. Os favicons 16×16 / 32×32 / 48×48 que os navegadores mostram nos separadores e nos marcadores são pixel art, quer o designer o tenha querido ou não. Desenhar ao tamanho nativo neste editor e exportar PNG produz favicons que se leem limpos sem halo de antialiasing.
• Redes sociais. A pixel art é hoje uma forma de arte autónoma no Instagram, TikTok e Tumblr. A contenção do meio lê-se bem ao tamanho de miniatura, e uma peça bem feita é reconhecível num feed dominado por fotografia e renders 3D. Muitos artistas publicam diariamente pequenas obras construídas em torno de uma paleta fixa como Endesga 32 ou DawnBringer 16.
• Ascendência das colecções NFT. A colecção CryptoPunks (Matt Hall e John Watkinson da Larva Labs, junho de 2017) estabeleceu o molde: 10 000 personagens 24×24 gerados algoritmicamente que bebem do punk dos anos 80 e do cyberpunk dos anos 90. Centenas de colecções derivadas seguiram-se entre 2017 e 2022, todas apoiadas no mesmo molde baixa-resolução + paleta arrojada.

Âmbito honesto face às ferramentas dedicadas

Três ferramentas dedicadas dominam o espaço da pixel art. Aseprite é a escolha profissional de facto, começou como projeto hobby de David Capello em 1998 (primeira versão em 2001 como Allegro Sprite Editor), agora desenvolvida pela Igara Studio S.A. liderada por David, Gaspar e Martín Capello, vendida no Steam por US$19,99 (foi GPLv2 gratuita até agosto de 2016, altura em que a licença passou a proprietária, embora o código continue visível no GitHub). Camadas, frames, timeline, tilemaps, exportação de animação, scripting Lua, ferramentas de linha de comandos, melhor ferramenta paga por consenso da comunidade. Piskel é o principal concorrente gratuito, um editor web open source criado por Julian Descottes com versão alojada em piskelapp.com e builds de secretária descarregáveis. Força: timeline de animação frame a frame, pré-visualização ao vivo, exportação para GIF e folha de sprites. Pixilart é um editor online gratuito com uma forte camada social/comunitária, mais de um milhão de utilizadores, galerias públicas, comentários, seguimentos. O âmbito honesto deste editor é mais estreito do que qualquer das três: uma ferramenta de frame único, só no navegador, para um sprite rápido, um ícone, um avatar. Seis ferramentas básicas (lápis, borracha, balde, conta-gotas, linha, rectângulo), selector de cor, paleta, desfazer, sobreposição de grelha opcional e exportação PNG ao tamanho nativo do canvas. Sem camadas, sem frames, sem timeline de animação, sem onion-skinning, sem modo tilemap, sem scripting. Para desenhar o teu primeiro sprite, esboçar um emote do Twitch, ou fazer um retrato 32×32 à pressa, este é o nível certo de fricção: zero instalação, zero conta, zero curva de aprendizagem. Para um jogo completo de sprites animados com efeitos em camadas, instala Aseprite ou abre Piskel.

Privacidade: porque é que «só no navegador» importa aqui

A pixel art é frequentemente trabalho em curso para projetos de jogos indie ainda não anunciados, trabalhos por encomenda ou design de personagens de marca ainda não público. Os editores do lado do servidor carregam cada pincelada para um serviço de terceiros, onde fica em registos e pode ser inspecionada por qualquer pessoa com acesso ao backend. Este editor corre inteiramente no teu navegador via JavaScript: cada píxel colocado, cada desfazer, cada selecção de cor fica no teu dispositivo. Verifica no separador Rede das DevTools, não disparam pedidos enquanto desenhas. A exportação PNG usa a API integrada do navegador canvas.toBlob e um URL blob; sem passo de envio. Põe a página offline (modo de avião) depois de carregada e o editor continua a trabalhar. Seguro para projectos não anunciados, trabalho sob NDA, design de assets de marca ou qualquer sprite que não queiras ver copiado para o disco rígido de um estranho.

Ferramentas relacionadas