Alternativa ao Piskelapp — uma ferramenta de sprites grátis no navegador que também cria 3D

Se você digitou piskelapp na barra de endereços, você já encontrou o Piskel: piskelapp é o domínio do editor de pixel art grátis no navegador. Então 'alternativa ao piskelapp' e 'alternativa ao piskel' são a mesma pergunta feita de duas maneiras. Não existe um produto separado chamado PiskelApp. O nome de que as pessoas se lembram é o endereço.

Esta página é a versão honesta da resposta. O que o Piskel faz bem numa grade de pixels fixa. Onde ele para. O que uma ferramenta de sprites no navegador acrescenta quando a spritesheet precisa deixar de ser uma imagem e virar um material numa cena pela qual você pode caminhar. Sem rankings, sem contagens de downloads, sem benchmarks inventados — o mecanismo, as configurações de arquivo e os modos de falha.

Resposta rápida

piskelapp é o domínio do Piskel, o editor de pixel art grátis no navegador — então 'alternativa ao piskelapp' e 'alternativa ao piskel' costumam ser a mesma pergunta. Nada na ferramenta mudou quando o domínio virou o nome de que as pessoas se lembram. O app é o Piskel. A busca é um hostname.

A pergunta por trás da busca quase sempre é uma de duas coisas. Ou você quer o mesmo trabalho feito numa ferramenta que evoluiu — uma tela mais rápida, mais camadas, um save que te acompanha em outra máquina — ou você quer algo que o Piskel nunca foi feito para ser: um gerador que produz quadros e um construtor de cenas que dá a esses quadros um lugar para viver.

Esses são usos diferentes do seu tempo. Se você desenha cada pixel à mão e gosta da grade do Piskel, trocar de editor custa sua memória muscular e te rende muito pouco. Se o seu gargalo é um ciclo de caminhada que come uma tarde inteira, nenhum editor 2D resolve isso, porque o gargalo é o desenho, não o editor.

O que 'alternativa ao piskelapp' pergunta de verdade

Tire o domínio da frase e ela vira 'preciso de uma ferramenta de sprites'. Isso se divide em três requisitos que são confundidos o tempo todo: o desenho, em que um humano move pixels; a geração, em que um modelo desenha quadros a partir de uma descrição escrita; e a montagem, em que os quadros viram uma spritesheet, a spritesheet vira uma animação e a animação vira uma cena. O Piskel cobre bem o primeiro e parte do terceiro. Ele não tem opinião sobre os outros dois.

Decida qual deles é o seu gargalo antes de trocar qualquer coisa. A maioria das pessoas que deixa o Piskel por outro editor 2D acaba voltando, porque o segundo editor também é uma grade e uma barra de ferramentas.

O que é o piskelapp (Piskel)

O Piskel é um editor de pixel art no navegador. Você abre a página, define o tamanho da tela — 32×32 é o padrão e ainda uma escolha razoável — e desenha numa grade ampliada com um lápis, um balde, um dither, um clarear e um punhado de outras ferramentas. Nada é instalado. Nenhuma conta é criada. O editor roda no lado do cliente, então, depois que a página carrega, o desenho não espera uma ida e volta à rede.

As partes que lhe renderam essa posição são as que as pessoas citam no mesmo fôlego: o onion skinning, para você ver os quadros anterior e seguinte atrás do atual com opacidade reduzida enquanto anima; os controles de paleta, para montar um conjunto fixo de cores e manter cada quadro dentro dele; um painel de pré-visualização que reproduz a animação numa taxa de quadros e num tamanho definidos; e uma pequena pilha de camadas por quadro.

A exportação é onde ele é genuinamente útil, e é a parte que mais vale entender se você está procurando um substituto. Você pode exportar o quadro atual ou todos os quadros como PNGs individuais, exportar um GIF animado, exportar uma spritesheet como um único PNG com uma contagem de colunas, contagem de linhas e escala inteira escolhidas, ou salvar o projeto como um arquivo .piskel, que é um documento JSON que descreve quadros e paleta.

• Onion skinDesenha os quadros anterior e seguinte atrás do atual com baixa opacidade. Você controla a opacidade e quais vizinhos aparecem. É o único recurso que torna possíveis os loops animados à mão, em vez de puro chute.
• PaletaCrie ou importe uma paleta e mantenha cada quadro dentro dessas amostras. A ordem dos índices importa depois: é o que você leva para um shader ou uma rotina de troca de paleta.
• Exportação de spritesheetUm PNG, sua contagem de colunas, sua contagem de linhas, uma escala inteira. Esse é o arquivo que uma engine ou uma cena 3D realmente consome.
• Exportação de GIFGIF animado com um atraso por quadro. Bom para compartilhar um loop, desconfortável para jogos: o GIF limita a 256 cores por quadro e transparência de 1 bit, então bordas suaves voltam duras ou somem.
• Arquivo de projeto .piskelO formato de salvamento é JSON, contendo os dados dos quadros e a paleta. Ele reabre no Piskel. Não abre em outros editores.
• Sem contaNão há nada em que fazer login. O projeto vive na aba, no armazenamento do navegador e nos arquivos que você baixa.

Por que as pessoas pesquisam o domínio

Porque o nome do produto é um domínio. Quem se lembra pela metade da ferramenta digita o que parece um endereço, e o navegador ou a caixa de busca completa. Uma marca que também é um hostname gera buscas em formato de domínio indefinidamente, e essas buscas permanecem estáveis mesmo quando ninguém está escrevendo sobre o produto.

A segunda razão é que a ferramenta mudou muito pouco. A grade, a barra de ferramentas, os controles de onion skin, a caixa de exportação: são reconhecivelmente iguais ao que eram anos atrás. Essa estabilidade é exatamente o motivo de as pessoas ainda recomendarem o Piskel. Também é o motivo de haver pouco a escrever. Recursos novos geram páginas novas; um editor estável gera um conjunto estável e que envelhece devagar de páginas, e a busca pelo domínio continua chegando sem nada novo por trás dela.

O efeito prático é que uma busca pelo domínio devolve uma mistura do próprio app, de tutoriais antigos e de listas escritas antes de existir o estado atual das ferramentas de navegador. Essa lacuna é a razão de esta página existir. Não é que o Piskel tenha piorado. É que a categoria ao redor ganhou uma etapa de geração e uma etapa 3D, e o Piskel não, porque nunca foi apontado para elas.

Onde o Piskel para

Estes são limites verificáveis, não reclamações. Cada um é algo que você pode conferir numa tarde.

O limite que mais importa é a ausência de um caminho de uma spritesheet pronta até uma cena em execução. O Piskel te entrega um PNG. A partir daí você está no território da engine: configurações de importação, modo de filtro, padding do atlas, pontos de pivô, retângulos de quadro, clipes de animação, caixas de colisão. Esse trabalho é real, e é onde uma tarefa de arte de duas horas vira uma tarefa de integração de dois dias.

• Sem etapa de geraçãoO Piskel desenha o que você desenha. Não há campo de prompt, não há upload de referência, não há modelo propondo quadros. Se você precisa de um ciclo de caminhada em oito direções, você desenha oito direções.
• Sem saída 3DA saída são quadros raster. Não há malha, nem câmera, nem grafo de cena, nem iluminação. Uma spritesheet usada em 3D é uma textura que você mesmo anexa, recorta e alinha.
• Sem projeto na nuvemSem conta significa sem projeto no servidor. Mude para outra máquina e você está importando um arquivo baixado. Limpe o armazenamento errado do navegador e a cópia local da aba vai junto.
• Sem runtimeO Piskel reproduz sua animação num painel de pré-visualização a uma taxa de quadros fixa e para por aí. Ele não roda input, física, colisões nem câmera.
• Escala apenas inteiraA escala de exportação é um multiplicador inteiro por um motivo. Um sprite 32×32 desenhado a 1,5× produz pixels que alternam entre um e dois pixels de tela de largura. O editor não consegue corrigir isso; a correção é filtragem nearest mais um zoom inteiro na hora de exibir.

Piskel vs. uma ferramenta de sprites no navegador

A tabela compara as duas nas linhas que decidem um projeto. Cada célula descreve um mecanismo, não uma nota. Se uma linha não afeta como você trabalha, ignore-a.

Leia as linhas na ordem de quanto elas te custam. A animação é barata de comparar, porque as duas ferramentas animam. O salvamento na nuvem e a saída 3D são as linhas que mudam a forma do trabalho, porque decidem se você pode entregar a arte para outra pessoa e se a arte tem para onde ir quando fica pronta.

Quando vale a pena trocar por uma alternativa ao piskelapp

Troque quando a etapa bloqueante é a geração ou a integração. Isso significa uma de duas situações: você não consegue desenhar o volume de quadros que o projeto precisa, ou você consegue desenhá-los, mas a spritesheet nunca chega a uma cena porque ninguém quer configurar à mão um atlas, pivôs e clipes para cada personagem.

Não troque quando você gosta de desenhar e só precisa de um GIF ou de uma spritesheet. A grade do Piskel é boa e sua caixa de exportação faz o que promete. O tempo gasto avaliando um substituto para uma ferramenta que já se encaixa nas suas mãos é tempo que você não passou animando.

Gere um sprite aqui

A geração é a metade que não existe no Piskel, então vale ser específico sobre o que realmente acontece. Você escreve uma frase. O Agent Sprite Forge resolve isso em um sujeito, uma vista, uma paleta e uma contagem de quadros, depois rasteriza cada quadro na mesma grade, no tamanho que você escolheu. Como cada quadro compartilha uma grade e uma paleta, os resultados se empacotam num atlas sem ajustes quadro a quadro.

Os modos de falha são previsíveis, o que é útil. Palavras de vista ambíguas produzem quadros que oscilam entre duas leituras — 'de frente' num personagem que também tem uma direção de caminhada faz isso acontecer. Contagens altas de quadros em telas pequenas deixam pouquíssimo espaço por quadro: oito quadros em 16×16 dão a você cerca de cem pixels de área de desenho cada, então o detalhe vira ruído. Spritesheets que misturam silhuetas geradas sob paletas diferentes parecem dois personagens grampeados um no outro. Nos três casos, a correção é a frase, não o modelo.

A exportação espelha o que você já espera de uma ferramenta de sprites: PNGs individuais, uma spritesheet empacotada com contagem de colunas e linhas, um GIF animado para revisão, ou um atlas que carrega retângulos de quadro, pivôs e uma taxa de quadros sugerida. A partir daí, a spritesheet vai ou para a sua própria engine ou direto para o editor de mundos da mesma página.

• Spritesheet PNGUma imagem, com os quadros dispostos na sua contagem de colunas e linhas. É o que uma engine ou um carregador de texturas quer primeiro.
• Dados de atlasRetângulos de quadro, pontos de pivô e uma taxa de quadros sugerida, para a animação rodar sem ninguém montar um clipe à mão.
• PNGs por quadroPara quando você quer retocar um quadro num editor de pixels e reempacotar a spritesheet você mesmo.
• GIFUm artefato para revisão rápida. Carrega os mesmos limites de 256 cores e transparência de 1 bit de qualquer GIF.

Da spritesheet ao mundo

Uma spritesheet ainda não é arte. É uma textura. Numa cena isométrica, a spritesheet é carregada uma vez, os quadros são cortados em retângulos UV, e são esses retângulos que o renderizador troca à medida que a animação avança. Duas configurações fazem a maior parte do trabalho. A filtragem de textura permanece nearest, para os pixels continuarem quadrados, e o atlas ganha um ou dois pixels de padding ao redor de cada quadro, para que qualquer filtragem à distância não puxe as cores de um quadro vizinho para os pixels da borda — a causa habitual de uma franja colorida no contorno de um personagem.

A câmera é a segunda metade. A pixel art é lida corretamente sob uma câmera ortográfica num ângulo isométrico, mais ou menos 2:1 — uma pegada de tile de 32×16 a cerca de 30 graus de inclinação. Mude para uma câmera em perspectiva e os sprites à distância encolhem mais rápido que a grade do chão, o que parece errado mesmo quando nada está tecnicamente quebrado. Aproxime em passos inteiros: 1×, 2×, 4×. Um zoom de 1,5× vai te mostrar linhas de um pixel e de dois pixels dentro do mesmo sprite.

A física e as sombras são as partes que as pessoas subestimam na primeira vez. Um sprite em billboard é um quad plano que sempre encara a câmera, então não pode receber uma sombra projetada de verdade; o contato com o chão é um decal de mancha suave separado, desenhado sob o personagem. As colisões são mais baratas como uma grade de tiles bloqueados do que como colisores de malha — o agente percorre um caminho pela grade e o tile em que ele está decide se o passo é permitido. The Cyclops' Island no Neta Studio é construído assim, e Mini World é a versão menor do mesmo ciclo: gere uma spritesheet, jogue-a numa cena de tiles, caminhe por ela.

• Filtragem nearestMantém os pixels do sprite quadrados. A filtragem bilinear num sprite 32×32 dá a você bordas suaves e lamacentas que nada a jusante consegue recuperar.
• Padding do atlasUm a dois pixels transparentes de extrusão ao redor de cada quadro evitam vazamento de cor nas bordas quando os mipmaps são ativados.
• Câmera ortográficaCombina com a grade de pixels a qualquer distância. Uma câmera em perspectiva quebra a relação entre a escala do sprite e o tamanho do tile.
• Decal de sombra de manchaUm billboard não pode receber uma sombra projetada, então o contato com o chão é desenhado em vez de simulado.
• Colisão em grade de tilesConsultas a tiles bloqueados são rápidas e previsíveis. Colisores de malha num mundo de tiles custam mais e não compram nada.

Entre no mundo ao qual ele pertence

A pergunta sobre o domínio tem uma resposta curta e uma longa. A curta é: é o Piskel, e é um editor 2D. A longa é o que acontece depois que a spritesheet fica pronta — abra um mundo construído com os mesmos pixels e veja o passo em que um editor para antes.

FAQ