Alternativa ao Piskel: um editor de pixels grátis no navegador que também cria mundos 3D

Se você procurou uma alternativa ao Piskel, provavelmente esbarrou em um de dois limites: queria quadros de sprite produzidos mais rápido do que consegue clicar, ou queria que os pixels fossem parar em outro lugar que não um PNG achatado. O Piskel é gratuito, roda em uma aba do navegador e continua exportando. Ele não está quebrado. Ele simplesmente para na borda da tela, e esta página fala do que acontece depois dessa borda.

O Neta Studio mantém um editor de pixels no navegador com uma etapa de geração acoplada, e um construtor de jogos 3D por trás. Você pode desenhar um sprite 32x32 à mão, gerar um a partir de uma descrição escrita com o Agent Sprite Forge, exportar uma spritesheet e depois caminhar por dentro de uma cena construída com os mesmos pixels. Sem instalação, sem conta. Abaixo há uma comparação direta, incluindo os pontos em que o Piskel ainda é a ferramenta melhor.

Resposta rápida: existe uma alternativa gratuita ao Piskel?

Sim, e a versão honesta é que o Piskel nunca foi o problema. O Piskel é gratuito, roda no navegador e ainda hoje exporta spritesheets PNG e GIF animado. Só vale a pena migrar para uma alternativa ao Piskel se você precisar de uma das duas coisas que o Piskel não faz: gerar quadros de sprite a partir de uma descrição escrita em vez de cliques, ou levar esses pixels para uma cena 3D pela qual você possa mover uma câmera. Se nenhum desses for o seu gargalo, o Piskel continua sendo uma boa ferramenta de desenho e não há motivo para abandoná-lo.

O que o Piskel faz bem

O Piskel conquista sua reputação do jeito mais sem graça: faz bem o ciclo básico. Um novo sprite abre em 32x32 sobre uma grade que você pode ligar e desligar, e o conjunto de ferramentas é exatamente o que você precisa: pincel, pincel espelhado, balde de tinta, linha, retângulo, elipse e um seletor de cores que não atrapalha. O editor roda na própria página, então um traço não espera uma ida e volta ao servidor. Não há instalação, não há conta e não há uma versão da ferramenta que se comporte diferente por causa de um plano.

Quadros e camadas são eixos separados, o que importa mais do que parece. Um ciclo de caminhada de quatro quadros com uma camada de contorno separada significa redesenhar o contorno uma vez em vez de quatro. O painel de pré-visualização reproduz a animação na FPS que você definir, e uma única opção de onion skin fantasma os quadros vizinhos para você avaliar o espaçamento antes de fixar. A exportação cobre os formatos que as engines realmente aceitam: GIF animado, spritesheet PNG e o arquivo de projeto .piskel. A importação é igualmente direta: arraste um arquivo .piskel para o editor ou traga uma spritesheet PNG e deixe que ela seja fatiada numa grade que você especificar.

A barreira até um primeiro sprite é realmente baixa. Você pode ir de uma aba vazia a um personagem 16x16 legível em poucos minutos, e os modos de falha são pequenos: uma paleta que embola no zoom 1x, um contorno tremido, uma cor de destaque que some contra o fundo do nível.

Duas decisões de design concentram a maior parte do valor. A grade encaixa em fatores de zoom inteiros, então um pixel é sempre um bloco quadrado de pixels de tela e nunca um borrão de 3,5 pixels. E o conjunto de exportação é pequeno e sem ambiguidade, o que significa que a ferramenta nunca pede que você configure um pipeline antes de conseguir ver sua animação.

Onde o Piskel para

O Piskel não tem etapa de geração. Cada pixel da spritesheet é um clique que você deu ou um preenchimento, uma linha ou uma elipse que você posicionou. Isso não é um defeito numa ferramenta de desenho; é o que uma ferramenta de desenho é. Mas impõe um piso ao volume. Um sprite 32x32 com cerca de 20 por cento de cobertura ao longo de quatro quadros representa em torno de 3.000 decisões de pixel opaco, e você as toma de novo toda vez que o design muda. Se o seu gargalo é a produtividade artística e não o controle artístico, o Piskel não ajuda, porque não há nada no pipeline entre a sua frase e a sua tela.

O Piskel não tem saída 3D. Suas exportações são rasters 2D mais um arquivo de projeto JSON. Nada na ferramenta entende de câmera, plano de chão, volume de colisão ou luz. Levar esses pixels para uma cena 3D é trabalho totalmente posterior: exporte a spritesheet, importe-a para uma engine, monte um material, defina o modo de filtro corretamente e então construa o mundo em volta à mão. Esse trabalho é real, muitas vezes é a maior parte do trabalho, e o Piskel não está presente em nada dele.

E o app está efetivamente estático há anos. O editor web ainda funciona, as exportações ainda abrem nas engines atuais e o formato .piskel não mudou. Isso é estabilidade, não ruptura. Mas também não chegam recursos novos. Se você precisa de algo que o Piskel não faz hoje, esperar por uma atualização não é um plano.

Essa distinção importa quando você escolhe uma ferramenta para um projeto de dois anos. Uma ferramenta pronta com formato de arquivo congelado é previsível. Uma ferramenta pronta também é a escolha errada se seus requisitos ainda estão mudando, o que costuma ser o caso no início de um jogo.

As alternativas comparadas

Leia a tabela pelo gargalo, não pela quantidade de recursos. Se você desenha bem e só precisa de quadros, GIF e uma spritesheet, o Piskel ou o LibreSprite dão conta e nenhum dos dois cobra. Se você precisa de quadros produzidos mais rápido do que consegue desenhá-los, precisa de uma coluna de geração, e o Piskel não tem uma. Se a sua spritesheet tem de acabar numa cena com câmera, você precisa da coluna 3D, e nem o Piskel nem o LibreSprite têm uma.

O LibreSprite é a opção instalável listada aqui: um aplicativo de desktop com uma linha do tempo de verdade, onion skin, camadas e exportação de spritesheet. O desktop tem vantagens que uma aba de navegador não tem, incluindo diálogos de arquivo nativos, folga de memória previsível em telas grandes e nenhum risco de uma aba ser recuperada no meio da sessão. Ele tem as mesmas duas lacunas: sem etapa de geração, sem saída 3D.

Um alerta sobre as colunas de animação. Elas descrevem o editor, não a sua engine. Toda ferramenta aqui exporta uma spritesheet raster, e se a sua engine a reproduz na velocidade certa depende do tamanho do quadro, do preenchimento (padding) e da FPS definida no momento da exportação.

Anote a única etapa que consome mais horas suas. Se for desenhar, fique com uma ferramenta de desenho. Se for produzir variações suficientes para encontrar uma boa, adote a etapa de geração. Se for conectar pixels numa cena, adote o builder e pule de vez a importação para a engine.

Como nos diferenciamos: pixels e depois um mundo no qual você pode entrar caminhando

As duas metades formam um único pipeline, e o motivo é sem graça: a spritesheet que você exporta é a spritesheet que o builder consome. O tamanho de quadro que você escolheu em 32x32 é o tamanho que o material espera. Sem reamostragem, sem adivinhar a grade, sem refatiar uma spritesheet num importador de engine à meia-noite. Essa continuidade é toda a proposta.

Duas configurações vão arruinar o resultado se você ignorá-las. Primeiro, a filtragem de textura. No Three.js a textura do material precisa de amostragem nearest-neighbour tanto na ampliação quanto na redução, com mipmaps desligados, ou seus pixels 32x32 viram uma papa borrada à distância e cintilam quando a câmera se move. Segundo, a escala. Redimensione sprites por fatores inteiros. Um sprite escalado em 3,5x tem pixels que ora têm três, ora quatro pixels de tela de largura, o que se lê como ruído pior do que qualquer erro de paleta.

The Cyclops' Island e Mini World são as construções de referência para esse caminho: um ator de pixels gerado, um plano de chão, uma câmera e colisão, tudo rodando numa aba de navegador. Abra-os para ver no que a exportação realmente se transforma antes de comprometer um projeto com isso.

Se você só precisa da metade 2D, nada aqui supera uma ferramenta que você já conhece. Vale a pena trocar quando a metade 3D é onde suas horas somem, porque aí o caminho de exportação deixa de ser uma entrega e vira parte do mesmo espaço de trabalho.

É grátis?

O editor de pixels é grátis. Gerar quadros de sprite com o Agent Sprite Forge é grátis. Exportar é grátis. Nada fica entre desenhar um sprite e baixar a spritesheet PNG ou o GIF animado, e não há uma etapa com paywall onde aparece uma marca d'água ou entra em ação um limite de resolução.

Não é preciso conta para abrir o editor, gerar quadros, editá-los ou exportar. Você não entrega um e-mail para conseguir um download, porque não há download a conseguir: tudo roda na aba do navegador.

A saída são três coisas. Uma spritesheet PNG, com a grade de quadros correspondendo ao tamanho de tela que você definiu. Um GIF animado, útil para pré-visualizações e documentação. E uma cena 3D, que roda no navegador e continua editável no 3D game builder em vez de ser uma exportação de mão única que você não consegue mais abrir. Se você quer ver o estado final dessa terceira saída, The Cyclops' Island e Mini World são construídos sobre ela.

Entre no mundo ao qual ele pertence

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

FAQ