Criador de Pixel Art — Editor e Gerador de Pixel Art Online e Grátis

Um criador de pixel art é quatro coisas: uma grade, um lápis, uma borracha e um botão de exportar. Todo o resto — camadas, animação, gerenciamento de paleta — é conveniência empilhada em cima desse ciclo. O editor aqui roda no navegador. Você escolhe um tamanho de tela, desenha com um lápis de um pixel e baixa um PNG. Sem instalador, sem conta, sem etapa de upload.

A decisão que a maioria das ferramentas enterra: o tamanho da grade é a coisa mais difícil de reverter. Todo o resto decorre dela — quantos pixels um rosto recebe, se um olho tem um pixel ou dois, como o sprite sobrevive a uma ampliação de 4x em uma engine de jogo. Esta página aborda o próprio editor, a matemática da grade, desenhar versus gerar um sprite, paletas como orçamento e como pegar o personagem que você acabou de desenhar e colocá-lo em um mundo 3D pelo qual alguém pode caminhar.

Criador de Pixel Art (Canvas ao Vivo)

O canvas é a página. Na primeira dobra você tem uma grade de bitmap de tamanho fixo, um lápis que escreve um pixel por clique, uma borracha que reescreve o valor transparente, uma faixa de paleta e um botão de exportar que grava um PNG. O clique esquerdo desenha, o clique direito ou uma tecla modificadora apaga, e o meio do canvas sempre mostra a verdadeira fronteira do pixel em vez de uma estimativa escalada.

Entenda a diferença entre o tamanho do canvas e o tamanho de exibição antes de desenhar qualquer coisa. Um canvas 32x32 exibido a 800x800 continua sendo 32x32 pixels de dados. O zoom muda o quão grandes os pixels são renderizados, nunca quantos existem. Exportar com zoom aplicado ainda grava um arquivo 32x32, o que é o comportamento correto e surpreende quase todo mundo na primeira vez.

A configuração que os iniciantes erram é o tamanho da grade escolhido depois do desenho, em vez de antes. Alguém esboça um personagem em um canvas 64x64, gosta dele e depois o quer em um jogo de tiles 16x16. Reduzir um sprite desenhado à mão de 64x64 para 16x16 por reamostragem o destrói: detalhes de dois pixels viram manchas cinzas, contornos de um pixel se transformam em linhas cinzas de dois pixels e a contagem de cores se multiplica porque cada borda calculada pela média inventa um novo valor. Se você já desenhou no tamanho errado, redesenhe no tamanho desejado usando a versão antiga como referência visual. Isso é mais rápido e mais limpo do que qualquer redução e força a simplificação que a grade menor realmente precisa.

Ampliar depois é seguro. Reduzir depois não é. Escolha a menor grade que possa conter os detalhes de que você precisa, e trate cada pixel gasto como gasto.

Grade de Pixel Art e Modelos

Quem pesquisa por grade de pixel art, uma grade para pixel art ou desenhar pixel art em uma grade está falando do mesmo objeto: um campo delimitado de quadrados onde um quadrado é um pixel e uma cor. A grade não é decoração em cima da arte. É o contrato de resolução. Um círculo de raio 5 não é um círculo, é uma escada específica de pixels individuais que você posiciona à mão ou aceita de um modelo.

Os modelos existem porque as primeiras quatro linhas de um círculo, de um cubo isométrico ou de um personagem em vista 3/4 são tediosas de deduzir de memória e fáceis de ficarem ligeiramente erradas. Um modelo é uma posição inicial, não um sprite pronto. Cole a forma, depois remova os pixels que não pertencem ao seu personagem e repinte o contorno para que a direção da luz seja consistente com todo o resto que você desenhou.

O tamanho que você escolhe é um orçamento expresso em pixels. Um sprite 8x8 dá a um rosto cerca de 4x4 para trabalhar, o que não deixa espaço para um contorno, um olho e uma boca ao mesmo tempo — você escolhe dois. Um sprite 16x16 comporta um contorno de um pixel e dois tons por material. Um sprite 32x32 finalmente tem espaço para uma direção de luz. Depois de 64x64, a tentação é desenhar traços em vez de pixels, e o rigor que faz o estilo funcionar começa a escapar.

Grades não quadradas importam para tiles. Um canvas 16x32 é um personagem em pé em um jogo com visão de cima; um canvas 32x32 é um tile. Mantenha essas duas categorias em arquivos separados, porque um sprite de personagem e um tile de conjunto de tiles têm regras de alinhamento diferentes quando chegam à engine.

Algumas pessoas montam a grade em uma planilha, uma célula por pixel, preenchendo células e afastando o zoom para verificar se a forma é legível de relance. Funciona, e tem uma vantagem real: você pode copiar um bloco de olho 6x6 e colá-lo em cada célula de uma folha de sprites sem redesenhá-lo.

O ponto de falha é a exportação. Planilhas renderizam linhas de grade, bordas e espaçamento de célula. Se você tirar uma captura da planilha e recortar, você herda uma emenda escura de um pixel entre cada pixel e uma cor ligeiramente errada em cada borda de célula. Desative primeiro as linhas de grade e as bordas, defina o zoom em um múltiplo inteiro exato e recorte na fronteira do pixel em vez de a olho. Um canvas dedicado evita todo o problema, e é por isso que a planilha é uma boa ferramenta de planejamento e uma péssima ferramenta de produção.

Desenhar vs Gerar

Os dois métodos preenchem o mesmo canvas. Desenhar à mão escreve exatamente os pixels que você posiciona. Gerar escreve um conjunto de pixels que satisfaz uma descrição, e depois você os edita. Nenhum é um atalho que dispensa o outro; eles respondem a perguntas diferentes.

Desenhar à mão vence quando você já enxerga a silhueta. Se você sabe o formato do elmo, o espaçamento exato dos olhos ou como este personagem precisa se alinhar ao lado de quatro sprites existentes, posicionar pixels é mais rápido do que descrevê-los e corrigir o resultado. Gerar vence quando você está explorando. Se você sabe a ideia — um sapo blindado em vista lateral segurando um escudo — mas não a silhueta, a geração lhe dá uma posição inicial em uma única passada em vez de quarenta decisões. O Agent Sprite Forge gera sprites a partir de uma descrição diretamente em uma grade que você pode continuar editando, o que importa porque a saída é um ponto de partida, não um produto final.

A saída de um sprite gerado é plausível no tamanho de miniatura e bagunçada com zoom de 8x. Danos típicos: pixels isolados soltos flutuando um quadrado fora do contorno, quebras no que deveria ser um contorno contínuo de um pixel, bordas antisserrilhadas carregando cores que não estão na sua paleta, e o sprite encostando na borda do canvas. Esse último não é cosmético — um sprite que ocupa todo o canvas não tem margem, então rotação, sombra projetada ou qualquer preenchimento da engine vai cortá-lo.

A correção é mecânica e leva alguns minutos por sprite. Faça na mesma ordem todas as vezes para não reintroduzir problemas que você já corrigiu.

Online, Grátis, Sem Download

O grátis cobre todo o ciclo de desenho: seleção de grade, lápis, borracha, preenchimento, edição de paleta e exportação em PNG. Não expira e não coloca a exportação atrás de uma conta. A geração é a parte com limites práticos, porque produzir um sprite custa poder de processamento de um jeito que posicionar um pixel não custa. Desenhar e exportar não têm limite de requisições.

Nenhuma conta é necessária para desenhar ou exportar. Nada do que você desenha é enviado; a imagem fica na aba do navegador e só sai quando você a baixa. A contrapartida da edição no lado do cliente é a mesma de qualquer aplicativo de desktop sem salvamento automático: fechar a aba sem exportar perde o desenho. Exporte quando o sprite estiver legível corretamente, não quando estiver terminado. Versões intermediárias são baratas.

A exportação contém exatamente os pixels. Um PNG nas dimensões nativas do canvas, RGBA de 8 bits, com o alfa preservado. Se você desenhou em um fundo transparente, o fundo permanece transparente — transparente é um valor, não uma cor, e sobrevive à exportação. Se você desenhou em um fundo preenchido, esse preenchimento fica embutido em cada pixel atrás do personagem. Se você quer uma cor de fundo, pinte uma de propósito. Se você quer compor o sprite sobre algo depois, deixe o fundo vazio e exporte como está.

A divisão honesta é entre a geração e todo o resto. A edição, o trabalho de cor e a saída de arquivo rodam localmente e se comportam de forma idêntica quer você use a ferramenta uma vez ou todos os dias. Os limites práticos se aplicam à geração, e é por isso que o fluxo útil é gerar uma forma aproximada e depois passar seu tempo no editor, onde nada é medido.

Nada no caminho de exportação adiciona marca d'água, reamostra a imagem ou renomeia o arquivo para as dimensões do canvas. O que você desenhou é o que você recebe.

Paletas e Estilos

Cor é um orçamento, não uma preferência. Uma paleta de 16 cores é uma restrição que força a reutilização, e a reutilização é o que faz um sprite ser lido como um único objeto, em vez de um monte de pixels. Quando o mesmo marrom médio aparece na alça de couro, no cabo de madeira e na bota, o olho os agrupa e o personagem entra em foco. Uma paleta de 256 cores é corda suficiente para enforcar um sprite: ela permite adicionar uma nova cor toda vez que você encontra um problema, e o resultado não tem lógica interna. Dois sprites do mesmo artista com duas paletas de 60 cores sem relação parecem vir de dois projetos diferentes.

Construa a paleta como rampas, em vez de cores individuais. Um conjunto viável de 16 cores é cinco rampas de três tons, mais uma cor de contorno dedicada. Cada rampa é uma base, uma sombra e um realce. A base é o seu tom médio. A sombra é a base escurecida e deslocada em direção ao azul ou ao roxo, não apenas escurecida — uma sombra feita apenas reduzindo o brilho parece sujeira. O realce é a base clareada e deslocada em direção ao amarelo. Em um sprite 16x16, os realces devem cobrir cerca de um décimo dos pixels; mais do que isso e a fonte de luz deixa de ser direcional.

O estilo vem das regras que você aplica de forma consistente, não das cores em si. Uma paleta compartilhada por todo um elenco significa que o vermelho da túnica do jogador é o mesmo valor RGB do vermelho do estandarte inimigo e do vermelho do item de cura. É nisso que está todo o truque. Não custa nada impor isso e é a diferença entre um jogo que parece deliberado e um jogo que parece montado.

Transforme Seu Personagem de Pixel em um Mundo 3D

A passagem é uma só frase: exporte o sprite em 100 por cento, importe-o como textura e coloque-o no mundo em um múltiplo inteiro da grade de pixels para que os pixels permaneçam quadrados.

O construtor de jogos 3D pega essa textura e a coloca em um plano que sempre fica de frente para a câmera, então um personagem 16x16 é lido como um personagem 16x16 de qualquer ângulo, em vez de virar uma fatia fina quando você anda de lado. Colisão, gravidade e uma câmera que segue são independentes do sprite, o que significa que você pode trocar a arte depois sem mexer no controlador do personagem. O Mini World é o menor lugar para testar o resultado: uma pequena área caminhável, um personagem, alguns objetos para esbarrar. The Cyclops' Island é o teste maior, onde a altura do terreno e as linhas de visão deixam óbvio se a escala do sprite está correta em relação ao ambiente.

A escala é onde a maioria das primeiras tentativas dá errado. Decida uma conversão antes de posicionar qualquer coisa — um pixel igual a uma unidade de mundo é pequeno demais em um sprite 16x16 e grande demais em um 128x128. Escolha um fator para que o personagem fique mais ou menos da altura de uma porta e mantenha esse fator para cada personagem do projeto. Um elenco construído com duas proporções de pixel para mundo diferentes nunca parece certo quando fica um ao lado do outro.

Escala e Ampliação Sem o Borrão

A pixel art tem bordas rígidas por construção. Todo filtro de suavização — bilinear, bicúbico, Lanczos — funciona calculando a média de pixels vizinhos, e a média de duas cores da paleta produz uma terceira cor que não está na sua paleta. Essa terceira cor é o borrão. Não é uma configuração de renderização que você pode desfazer depois; uma vez que uma imagem foi reamostrada, as bordas rígidas originais se foram.

Amplie apenas em múltiplos inteiros: 2x, 3x, 4x, 8x. Um sprite 16x16 em 4x é 64x64, e cada pixel de origem se torna um bloco limpo 4x4. Em 2,5x, alguns pixels de origem ficam com 2 pixels de largura e outros com 3, então o sprite desenvolve uma irregularidade visível ao longo da grade — contornos grossos em um lugar e finos em outro. Não há como corrigir isso depois, exceto reexportar em um múltiplo inteiro.

A configuração que estraga silenciosamente um sprite nítido é o filtro de reamostragem, que ferramentas diferentes chamam de Interpolação, Reamostrar, Reamostrar Imagem ou uma caixa de seleção Suavizar ao lado de Escala. Ele vem por padrão em um modo de suavização na maioria dos editores e visualizadores de imagem, e refiltra a imagem toda vez que você o usa. Defina-o como Vizinho Mais Próximo antes de mexer nas dimensões. A mesma regra vale fora do editor de imagem: uma textura importada para uma engine 3D precisa dos filtros de minificação e magnificação definidos como vizinho mais próximo, com os mipmaps desativados para texturas em pixel, ou a engine vai suavizá-la quando a câmera se mover. Em uma página web, o equivalente é a propriedade image-rendering definida como pixelated — caso contrário, um navegador que amplia um PNG 32x32 para 96 pixels de largura aplica sua própria suavização e desfaz seu trabalho no último passo.

Mais uma: nunca deixe uma interface escalar seu sprite por uma porcentagem. Um contêiner que dimensiona a imagem em 100 por cento de uma largura flexível vai resultar em 2,3x ou 3,7x dependendo da janela, e o sprite parecerá diferente em cada tela. Renderize no tamanho nativo de pixel e escale por um fator inteiro, ou defina o tamanho de exibição explicitamente.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a em um mundo pelo qual alguém possa caminhar — uma ilha pequena, um planeta, uma esquina chuvosa. Todo mundo neste site foi feito a partir de uma única descrição escrita e publicado como uma página que você pode jogar.

FAQ