Gerador de pixel art

Um editor de pixel art para desenhar com precisão na grade

Pixel art é criada célula por célula. Este editor começa com uma grade vazia e transparente e guarda uma cor, ou transparência, para cada pixel lógico. Ele não transforma uma fotografia em blocos de cores médias; para esse processo separado, use o Pixelizador de imagens. Também não gera imagens a partir de prompts de IA.

Uma grade menor exige uma silhueta mais clara, enquanto uma grade maior dá espaço para sombreamento e acessórios. Estes são pontos de partida práticos, não regras de uma plataforma:

Mantenha os pixels ampliados nítidos

A exportação para PNG usa uma escala inteira e desativa a suavização da imagem. Assim, cada pixel de origem de uma imagem 16×16 se torna exatamente um quadrado de 4×4, 8×8 ou maior, em vez de criar uma borda borrada. O padrão quadriculado e a grade opcional são apenas guias do editor e nunca fazem parte do arquivo. As células transparentes continuam transparentes.

A exportação para SVG usa retângulos com bordas nítidas e omite células transparentes. O JSON do projeto preserva a grade lógica editável e a paleta de trabalho. Ele é um formato de projeto próprio desta ferramenta, não um substituto para os formatos em camadas usados por aplicativos de pixel art para computador.

Ferramentas de desenho e espelhamento

• Lápis colore as células e conecta as amostras rápidas do ponteiro para evitar falhas no traço.
• Borracha devolve as células à transparência.
• Preenchimento altera uma região conectada pelos quatro lados; regiões que só se tocam na diagonal continuam separadas.
• Conta-gotas seleciona a cor de uma célula existente. Capturar transparência muda para a borracha.
• Desenho espelhado reflete a ação da esquerda para a direita, de cima para baixo ou nos dois sentidos. Linhas e colunas centrais são aplicadas apenas uma vez.

Mouse, caneta, toque e teclado usam a mesma grade lógica. Coloque o foco na tela, mova a célula ativa com as setas e pressione Espaço ou Enter para aplicar a ferramenta selecionada. P, E, F e I selecionam ferramentas; Delete apaga; Ctrl/Cmd+Z desfaz.

Funcionamento no navegador e referências técnicas

O editor usa a API Canvas, eventos de ponteiro e o controle de suavização de imagem. A criação do PNG segue a API de exportação para Blob. As interações por teclado e ponteiro foram projetadas conforme as orientações de operabilidade das WCAG 2.2.

A arte, o nome e a paleta permanecem no estado local do navegador e não são adicionados às URLs nem aos payloads dos nossos servidores. Solicitações normais de página ainda acontecem ao mudar de etapa no fluxo guiado. Se o armazenamento da aba estiver indisponível, o editor completo em uma única página pode continuar funcionando na memória, mas o fluxo não avança para evitar a perda silenciosa do projeto.