Alternativa ao Pixelorama — Desenhe sprites no navegador e gere quando preferir não desenhar

Se você procura uma alternativa ao Pixelorama, o motivo costuma ser um entre três: a máquina é um Chromebook, a instalação é bloqueada por política ou você precisa de um sprite pronto antes de ter tempo de desenhá-lo. O Pixelorama é um editor de pixel art para desktop, gratuito e de código aberto, com animação, camadas e ferramenta de tilemap, e é bom nos três pontos. Esta página é sobre o espaço de trabalho no navegador que cobre o desenho, acrescenta um caminho de descrever para gerar e depois faz o que o Pixelorama não faz: coloca o sprite dentro de uma cena 3D pela qual você pode caminhar.

O Agent Sprite Forge é o editor de sprites. Você digita uma locução nominal, escolhe uma direção de frente e recebe uma folha; ou pega um lápis de um pixel e desenha os quadros você mesmo em 16×16, 32×32 ou no tamanho que o projeto usar. A exportação é um PNG simples, quadro único ou tira. A partir daí, o construtor de jogos 3D usa esse PNG como material em um plano ou como billboard dentro de Mini World, The Cyclops' Island ou de uma cena gerada a partir de um parágrafo. Sem download e sem conta para experimentar.

O que o Pixelorama é e o que ele não é

O Pixelorama é um editor de pixel art gratuito e de código aberto que roda no desktop. É construído sobre a engine Godot, abre como uma janela de aplicativo comum e cobre as partes do trabalho com sprites que realmente consomem tempo: uma pilha de camadas com opacidade e modos de mesclagem, uma linha do tempo de animação com tags de quadro e onion skinning, um painel de paletas que importa arquivos de paleta existentes e uma ferramenta de tilemap para montar tilesets que se encaixam sem emendas. Para muita gente, é a resposta honesta para “o Aseprite custa dinheiro e eu ainda não quero pagar por ele”.

Também é um programa de desenho no sentido estrito. Cada pixel de um arquivo de projeto está ali porque uma mão moveu um cursor. Não existe caminho de uma frase escrita até um sprite, nenhuma operação em lote que produza quarenta variações de idle e nenhum renderizador. O que sai do programa é um PNG, uma folha empacotada ou um GIF — um retângulo de pixels sem câmera, sem chão e sem luz.

Essa distinção importa quando você define o escopo de um projeto. Uma ferramenta de desenho responde “como este personagem deve parecer”. Ela não responde “onde este personagem fica”. A segunda pergunta precisa de uma cena, uma câmera, um plano de chão e uma decisão de iluminação, e o Pixelorama deliberadamente não tem nenhum deles. Guarde essa fronteira para o resto desta página, porque é aí que as duas ferramentas deixam de se sobrepor.

Onde o Pixelorama para

Primeira parada: é software de desktop. Existem builds para Windows, macOS e Linux, e a lista é só essa. Um Chromebook não consegue instalá-lo. Uma máquina de estúdio ou de escola com lista de aplicativos permitidos não consegue instalá-lo. Um notebook de trabalho bloqueado que não executa binários não assinados não consegue instalá-lo. Se o computador que você tem pelos próximos vinte minutos é uma aba do navegador, o Pixelorama não está disponível para você, por melhor que seja.

Segunda parada: cada pixel vem da sua mão. Um personagem de 32×32 com uma caminhada de quatro quadros tem cerca de quatro mil pixels de decisões. Um pixel artist experiente termina isso em 30 a 60 minutos. Alguém que nunca fez isso leva horas, e a maior parte dessas horas vai para a silhueta — a leitura em tamanho pequeno — e não para o sombreado ou a cor. Gerar um rascunho não elimina a habilidade. Ele desloca a habilidade para seleção e correção, que é um ciclo muito mais curto.

Terceira parada: a saída é uma imagem sem lugar para ficar. Um PNG de um cavaleiro não é um cavaleiro em uma cena. Passar de um para o outro exige uma engine, uma etapa de importação, um material, uma decisão de escala e uma câmera. Isso não é uma crítica ao Pixelorama; é o escopo correto de um editor. Mas quando a entrega da semana é “uma rua pela qual eu possa caminhar”, um editor 2D é uma etapa fora de cinco.

Nada disso é uma alfinetada no software. A ferramenta de tilemap é genuinamente boa — tiles em grade, formas de colisão que você define por tile, um fluxo de tileset que sobrevive à exportação. A linha do tempo de animação com tags é o motivo pelo qual animadores ficam. Ele tem público porque o núcleo é sólido, não porque é gratuito.

Pixelorama vs. uma ferramenta de sprites no navegador, lado a lado

A tabela compara as duas naquilo que decide um projeto, não em contagem de recursos. Leia as linhas em que o Pixelorama ganha como perdas reais da ferramenta de navegador, porque é isso que elas são.

As duas linhas que decidem a maioria dos projetos

Scripting é a lacuna que vai irritar qualquer pessoa com um pipeline. Se o seu fluxo envolve renomear cada quadro, preencher a folha até uma grade fixa ou emitir um atlas JSON ao lado do PNG, o Pixelorama pode ser estendido para fazer esse trabalho e a ferramenta de navegador não pode. Ela é uma interface, não uma biblioteca.

Controle exato de paleta é a outra. O Pixelorama permite travar uma paleta indexada e auditar cada cor contra ela. A geração devolve cores que você não escolheu, e você ou as ajusta de volta à paleta do projeto à mão ou aceita desvio ao longo da folha. Para um único personagem, são dez minutos de trabalho. Para um tileset de quarenta sprites, é a tarde inteira.

Experimente o editor no navegador aqui

O Agent Sprite Forge abre com uma tela, um lápis, uma borracha, um preenchimento, uma ferramenta de linha, um painel de camadas, uma tira de quadros e um campo de geração. Não há nada para instalar e nenhuma conta é necessária para começar a desenhar.

O caminho mais rápido para algo utilizável passa pelo campo de geração, e a formulação importa. Digite uma locução nominal, não uma frase: “cavaleiro armadurado com lança” devolve um sprite mais coerente do que “um cavaleiro que está em uma floresta parecendo corajoso”. Escolha uma direção de frente depois. A direção não é cosmética — um jogo de cima para baixo ou em três quartos precisa de quatro delas, e cada uma é uma folha separada com silhueta própria.

Desenhar vs. descrever: duas formas de chegar a um sprite

Desenhar e descrever não são métodos concorrentes. Eles falham em direções diferentes, e é por isso que o fluxo útil coloca um sobre a fraqueza do outro.

Desenhar dá disciplina de paleta e uma silhueta que você decidiu, não uma que você aceitou. Se você declara que o personagem tem cinco cores mais transparência, você impõe cinco cores, e cada sprite do projeto permanece coerente porque todos obedecem à mesma restrição. O custo é tempo, e o teto é a sua mão no dia.

Gerar dá um primeiro rascunho em segundos e, mais útil ainda, uma variedade. Rode a mesma locução nominal com uma semente diferente e você recebe variações que diferem em proporção e equipamento — ombros mais largos, um capacete em vez de um capuz, uma arma mais pesada. Escolher entre quarenta é mais rápido que desenhar um, e isso ensina o que o personagem realmente é. O custo é inconsistência: em quatro quadros gerados, o mesmo personagem pode variar dois pixels de altura e oscilar na paleta.

Um fluxo de alternativa ao Pixelorama: gere a folha, corrija à mão

Gere a folha primeiro, depois reproduza na velocidade alvo e encontre os quadros que leem mal em tamanho pequeno. Em uma tira de quatro quadros, normalmente são dois. Redesenhe esses dois e deixe o resto: iguale a altura dos quadros vizinhos, amostre uma cor existente em vez de escolher uma nova e conserte os pés para que o personagem não deslize nem flutue. São quinze minutos em vez de duas horas, e o resultado é um sprite que você realmente olhou.

Quadros, tiras e folhas

Formatos de animação que sobrevivem ao contato com uma engine obedecem às mesmas quatro regras. Tamanho fixo de quadro: cada quadro tem exatamente a mesma largura e altura, mesmo quando o personagem ocupa apenas o centro. Quadros em uma linha: uma tira horizontal, da esquerda para a direita, sem empacotamento, sem corte e sem layout engenhoso que um importador interprete errado. Um loop em que o último quadro encontra o primeiro: o quadro quatro é seguido pelo quadro um sem duplicata no meio, então a pose do quadro quatro deve ser um passo antes da pose do quadro um, não a mesma pose. Uma contagem de quadros documentada: quatro, seis ou oito, escrita ao lado do arquivo, porque uma tira não documentada é um jogo de adivinhação para quem a importa.

Por que uma caminhada de quatro quadros lê como caminhada enquanto um idle de quatro quadros lê como tremulação: um ciclo de caminhada tem quatro grandes mudanças de silhueta — contato, passagem, contato oposto, passagem oposta — e o olho aceita quatro amostras de um movimento grande. O idle quase não muda de silhueta, então quatro quadros significam que as únicas diferenças são deslocamentos de um pixel no ombro, que o olho lê como ruído. O idle quer dois quadros, ou seis a oito com um movimento secundário real, como um peito que respira ou a borda de um tecido que balança. Não use quatro para ambos só porque parece simétrico no painel de configurações.

Um personagem de 16 pixels de altura tem cerca de quatorze pixels utilizáveis depois de desenhado o contorno. Isso basta para direção de frente, formato da cabeça, um item na mão, um capacete e posição das pernas. Não basta para expressão facial, dedos, dobras de tecido ou uma arma que precise ser identificada pelo tipo em vez de apenas apontada. Faça o orçamento antes de desenhar — cabeça 5, tronco 6, pernas 5 — e aceite que o rosto são dois pixels escuros e nada mais. Com 32 pixels de altura você ganha boca, cinto e uma arma de dois tons. Com 64, você está desenhando em vez de sugerindo, e uma caminhada de quatro quadros começa a parecer rígida porque o detalhe extra exige mais amostras do movimento.

Do sprite a uma rua caminhável

Esta é a etapa que um editor 2D não dá. No construtor de jogos 3D, um PNG é uma textura. Você posiciona um plano, atribui o sprite, define o material como unlit ou levemente iluminado, e o personagem ocupa o mesmo espaço de coordenadas da rua, das paredes e da câmera. The Cyclops' Island é a demo para observar: personagens em pixel, ilha low-poly, uma câmera que você conduz. Mini World faz o mesmo em escala menor, e uma cena Opus de pixel art mostra o arranjo oposto, em que o próprio ambiente é limitado a pixels e os sprites são as únicas bordas nítidas no quadro.

Dois modos de posicionamento cobrem quase todos os casos. Um plano achatado é um quadrilátero em pé no mundo, girado para um ângulo fixo. Ele lê como um personagem em um diorama e revela sua espessura no momento em que a câmera orbita além de uns 60 graus, então serve para ângulos de câmera fixos ou limitados. Um billboard gira para encarar a câmera. Para um jogo de cima para baixo em três quartos, use um billboard apenas no eixo Y: gire em torno do eixo vertical e trave a inclinação, ou o sprite tomba para trás conforme a câmera desce e o personagem parece estar deitado no chão.

A escala é onde a maioria das primeiras tentativas fica errada. Fixe um pixel do sprite em uma fração conhecida de uma unidade de mundo e nunca mude isso. Se o personagem tem 32 pixels de altura e deve ter 1,8 unidade, o plano tem 1,8 unidade de altura e 1,8 de largura para um quadro quadrado. Mantenha o multiplicador inteiro. Um plano a 1,35× da grade nativa de pixels produz larguras de pixel desiguais — algumas colunas caem em dois pixels de tela e outras em um — e o personagem inteiro cintila quando a câmera se move. Depois ancore: os pés ficam na borda inferior do plano, e essa borda toca o chão, não o centro do plano.

Por que bordas de pixel duras ao lado de um ambiente suave é uma escolha

O lado 3D tem céu em gradiente, sombras filtradas e geometria com antialiasing. O sprite não tem nada disso. A incompatibilidade é uma pista de profundidade: o personagem salta do fundo porque é o único elemento no quadro que é quantizado. Também é mais barato de produzir do que um personagem 3D com rig, esqueleto e animações. Se você suaviza o sprite com um desfoque ou um mipmap para “combinar” com o ambiente, perde o destaque e mantém o custo.

• Filtro de texturaNearest. Amostragem por ponto, nunca linear.
• MipmapsDesligados. Mipmaps fazem a média dos pixels vizinhos e transformam um contorno duro em papa cinzenta à distância.
• Filtragem anisotrópicaDesligada, ou 1×. Ela reintroduz a suavidade que você acabou de remover.
• Escala do planoUm múltiplo inteiro do tamanho nativo do pixel, com o pivô nos pés.

Grátis, sem instalação, sem conta

A parte gratuita cobre todo o ciclo descrito acima: o editor de sprites, o campo de geração, as ferramentas de desenho, camadas, quadros, exportação em PNG como quadro único ou tira horizontal, e a colocação desse PNG em uma cena 3D pela qual você pode caminhar. Nenhuma conta é necessária para experimentar, e não há marca d'água na exportação.

Vale nomear os limites antes de você gastar uma tarde:

Onde uma alternativa ao Pixelorama é pior

Sem API de script. Se você precisa renomear quadros em lote, gerar um atlas ou controlar o editor a partir de um script de build, não há nada em que se conectar.

Sem ecossistema de plugins. O caminho de extensão do Pixelorama significa que outras pessoas podem adicionar exportadores e ferramentas; aqui você recebe o que foi lançado.

Sem editor de tilemap profundo. Não há grade de autotiling, nem definição de colisão por tile, nem empacotamento de tileset. Se o projeto é um jogo 2D de tilemap, construa o mapa em uma engine.

Limites de tela. O espaço de trabalho é feito para telas do tamanho de sprites. De 16×16 a 128×128 por quadro é a faixa confortável, e 256×256 funciona, mas esta não é a ferramenta para uma ilustração de 4000 pixels com quarenta camadas; o conjunto de ferramentas e o comportamento do zoom deixam de ser agradáveis bem antes disso.

A geração não é determinística nem livre de correção. Mesmo prompt, semente diferente, resultado diferente. Você vai descartar mais do que guardar, e o descarte é o trabalho.

Uma ferramenta só é alternativa se você souber nomear onde ela é pior. Estas são as nossas. Use esta para o ciclo sprite-cena e mantenha o Pixelorama instalado para o trabalho que exige um caminho real de extensão, edição offline e uma paleta indexada que você possa travar.

Entre no mundo a que ele pertence

Uma folha de sprites é um material sem lugar para ficar. A última etapa desta página é a que um editor de desktop não pode oferecer: coloque a folha em um mundo pelo qual alguém pode caminhar — cada mundo do construtor foi feito a partir de uma descrição escrita e publicado como uma página com um link.

FAQ