Introdução
Spritesheets existem para que o jogo possa renderizar vários frames a partir de uma única textura. De vez em quando, você precisa fazer o contrário: repintar um frame, extrair arte antiga de um jogo já lançado ou reconstruir uma spritesheet cujos arquivos de origem ninguém guardou.
Recortar frames manualmente em um editor de imagens funciona para três sprites, mas é um pesadelo para trezentos. O Descompactador de Spritesheet faz isso em uma aba do navegador: aponte para o arquivo de dados, se houver, ou deixe que ele encontre os sprites automaticamente.
Veja como escolher a maneira correta de cortar sua folha, o que fazer quando você não tem um arquivo de dados e como verificar se os quadros são reproduzidos corretamente antes de baixá-los.
Quatro maneiras de cortar uma folha
As folhas são construídas de maneiras diferentes, portanto, não há uma única maneira correta de cortá-las. Uma folha de peças com espaçamento uniforme de um jogo antigo requer uma grade. Um atlas compacto com quadros cortados precisa de seu arquivo de dados, porque sem ele não há como saber onde um quadro termina e o próximo começa.
O descompactador oferece quatro modos. Ele escolhe um para você com base no que você arrasta e solta, e você pode alternar entre eles a qualquer momento. A imagem e qualquer arquivo de dados são lidos no seu navegador; nada é carregado.
- Automático: encontra cada sprite procurando por ilhas de pixels não transparentes. Bom para folhas soltas com espaço entre os sprites.
- Configuração: lê o arquivo de dados da folha (JSON, plist, XML, .atlas e outros) e corta cada quadro exatamente onde está indicado, com seu nome.
- Grade: corta a folha em células iguais. Você define o tamanho da célula, o deslocamento e o espaçamento.
- Manual: desenhe caixas na folha você mesmo; para folhas com formatos irregulares, nenhuma das opções acima funciona.
Dividindo uma folha passo a passo
Comece com a imagem da folha: PNG, JPG, WebP, GIF ou BMP. Se você tiver o arquivo de dados que veio com ela, por exemplo, um JSON ou um plist exportado de TexturePacker, arraste-o para a mesma posição. O descompactador reconhece o formato e alterna para o modo de Configuração. Os quadros cortados são reconstruídos em seu tamanho original e os quadros rotacionados são endireitados, para que se alinhem como estavam antes da compactação.
Sem arquivo de dados? Tente o modo Automático primeiro. Se os sprites se tocarem ou estiverem sobre um fundo sólido, alterne para Grade e insira o tamanho da célula. Verifique os contornos desenhados sobre a folha, clique em um quadro para observá-lo de perto e, em seguida, faça o download.
- Insira a imagem da folha, além do arquivo de dados, se você o tiver.
- Verifique o modo selecionado (Automático, Configuração, Grade ou Manual) e altere-o, se necessário.
- Examine os contornos na folha e corrija qualquer desalinhamento.
- Baixe os quadros como um arquivo ZIP ou como arquivos separados, caso precise apenas de alguns.
Reproduza os frames antes de fazer o download
Extrair os frames é metade do trabalho. A outra metade é garantir que eles ainda sejam animados corretamente. Ative a pré-visualização da animação e o descompactador reproduzirá os frames em ordem, para que você possa ver toda a sequência em movimento.
Altere a taxa de quadros até que fique igual à do jogo. Um frame ausente aparece como uma travada e um frame cortado em alguns pixels aparece como uma oscilação. Ambos são mais fáceis de identificar aqui do que depois de importar tudo para um mecanismo de jogo.
- Reproduz os frames extraídos em loop.
- Taxa de quadros que você pode alterar (12 fps por padrão).
- Travadas e oscilações indicam frames ausentes ou desalinhados.
Que arquivo de dados você tem?
Um arquivo de dados é apenas uma lista de nomes de frames e retângulos, mas cada mecanismo de jogo o grava de uma maneira um pouco diferente. Se você estiver trabalhando com uma folha criada por outra pessoa, saber qual tipo você tem facilita a compreensão de quaisquer avisos.
O descompactador lê JSON em layouts de hash e array (Phaser, PixiJS e exportação genérica de TexturePacker), arquivos plist do Cocos2d, XML do Starling e Sparrow, folhas de sprites CSS, arquivos de texto .atlas de Spine e libGDX e metadados de sprites YAML de Unity. Atlas com várias páginas também funcionam, desde que você insira a imagem de cada página.
O que geralmente vem a seguir?
Depois que os frames são extraídos, você geralmente faz algo com eles. Se eles forem mais pesados do que o necessário, processe-os com o Compressor de Imagens. Se você quiser as imagens em uma nova folha mais organizada, carregue-as no Texture Packer e recompacte-as. E se você fatiou com Auto ou Grid e deseja um arquivo de dados para o resultado, o descompactador pode exportar apenas os metadados em vez das imagens.
Todos esses programas são executados no navegador, então você pode ir de uma folha antiga para uma nova e limpa sem que a arte saia do seu computador.
Escrito por
Ankit Kumar
Engenheiro de software sênior e fundador da ToolBuddy
Projete utilitários inovadores para navegadores com zero requisitos de upload usando tecnologias WebAssembly, Web Audio e Canvas.