Sprite sheet no Cocos: como transformar uma imagem em frames de animação

Você gerou uma animação em frames de um personagem usando Midjourney ou Stable Diffusion. Todos os frames ficaram alinhados na mesma imagem: parado, começando a andar, correndo e parando, em 8 frames bem organizados.

A imagem parece perfeita.

Mas, ao importar para o Cocos Creator, o problema aparece: aquilo não são 8 imagens independentes, e sim uma imagem grande inteira. Como separar cada movimento do personagem? Como transformar isso em um Animation Clip que realmente toca?

Sem um arquivo plist pronto, cortar tudo manualmente demora demais. Este artigo mostra três caminhos, de ferramentas online gratuitas a software profissional, para você escolher o método com menos atrito.

O que e Sprite Sheet e por que o desenvolvimento de jogos depende dela

Sprite Sheet, também chamada de atlas em muitos fluxos, é uma imagem grande formada por várias imagens menores. Junto dela, um arquivo de configuração registra a posição é o tamanho de cada pedaço.

Imagine uma animação de personagem com 8 frames, cada um com 64x64 pixels. Se você guardar tudo solto, terá 8 arquivos PNG independentes. Em uma sprite sheet, esses 8 frames podem virar uma única imagem de 512x64 ou 256x256, acompanhada por um arquivo plist ou json dizendo: “o primeiro frame fica em (0,0), o segundo em (64,0)”.

Por que passar por esse trabalho? Dois motivos bem concretos.

Reduz Draw Calls. Esse é o ganho de desempenho mais direto. Draw Call e cada chamada de instrução que a GPU recebe para desenhar. Se você tem 8 imagens soltas, mesmo que todas aparecam na mesma cena, a GPU precisa lidar com 8 chamadas, porque cada troca de textura exige uma nova operação de binding. Depois que tudo vira uma imagem so, basta 1 Draw Call. A eficiência de renderização sobe na hora. Em celulares, onde o hardware e mais limitado, essa diferença fica bem visível.

Segundo a documentação oficial do Cocos, em cenas complexas, reduzir Draw Calls de dezenas para poucas chamadas ajuda a manter 60 FPS sem quedas. Eu ja medi isso em um jogo pequeno: quando troquei a animação de personagem de imagens soltas para atlas, os engasgos em um Android de entrada diminuiram de forma perceptível.

Reduz fragmentação de memória. O TexturePacker também tem testes mostrando que atlas podem economizar 30-50% de memória em comparação com imagens soltas. A ideia não e complicada: cada imagem independente tem seu proprio buffer de textura, e custos como alinhamento de borda e conversão de formato vao se acumulando. Ao juntar tudo em uma imagem, a alocação fica mais compacta e a GPU trabalha com menos atrito.

Você pode perguntar: esse arquivo de configuração usa qual formato? No Cocos Creator, o formato comum e plist. Ferramentas gerais também usam bastante json. O plist vem do ecossistema Apple, tem estrutura XML e registra nome, coordenadas, tamanho e rotação de cada SpriteFrame. O json cumpre papel parecido, mas costuma ser mais enxuto e é aceito por muitas ferramentas online e pelo Unity.

Três formas de dividir: qual da menos trabalho

Você so tem uma imagem grande, sem arquivo de configuração. Como dividir? Existem três caminhos. Escolha pelo seu contexto.

Caminho 1: TexturePacker como ferramenta profissional

Essa e a escolha mais comum na indústria de jogos. O TexturePacker foi feito para empacotar e desmontar atlas, com suporte a Cocos, Unity, SpriteKit e vários outros motores.

Vantagens: é completo. Tem algoritmos automáticos de layout (MaxRects, Grid, Shelf), otimização de formato de pixel (PVRTC para iOS, ETC para Android), rotação, corte e compressão de áreas transparentes. Os formatos de exportação também cobrem bem o fluxo: o plist do Cocos ja sai pronto para uso. Processamento em lote também e tranquilo: você joga centenas de imagens, clica uma vez e resolve.

Desvantagens: custa dinheiro. A versão basica parte de US$ 49, e a profissional custa US$ 199. A ferramenta e forte, mas para um desenvolvedor independente em projeto pequeno, esse investimento nem sempre fecha a conta. Tambem exige instalação; Windows e macOS são suportados, Linux não.

Quando usar: projetos de longo prazo, muitos assets de arte e jogos comerciais que precisam de atualização continua. Se você está criando um produto para lançamento real, esse investimento costuma valer a pena.

Alibaba Cloud - Escolha dos desenvolvedores, 15% de desconto exclusivo em Lighthouse

Ganhar 15% off →Anúncio

Caminho 2: ferramentas online de corte automático

Não precisa instalar nada: abre no navegador e usa. O princípio e detecção de componentes conectados: a ferramenta identifica blocos independentes de pixels dentro de um fundo transparente e calcula automáticamente as caixas de recorte.

Testei algumas opcoes e recomendo duas mais confiaveis:

ImgCrop Smart Split (imgcrop.com). Você envia uma sprite sheet, a ferramenta detecta os frames independentes e exporta PNGs separados. Há uma opção de “nomear em ordem visual”, de cima para baixo e da esquerda para a direita, que evita renomear tudo na mao.

Imgtool (imgtool.net). A função e parecida, com suporte adicional a processamento em lote e conversão de formato.

Vantagens: gratuito, sem instalação é rápido. Usei uma animação de personagem com 50 frames é o resultado saiu em 3 segundos, com nomes de arquivo bem organizados.

Desvantagens: recursos limitados. Layouts complexos, áreas sobrepostas e fundos não transparentes podem falhar. Além disso, depende da rede; não envie assets sensiveis.

Quando usar: protótipos rápidos, processamento pontual e baixo volume de assets. Se você so quer dividir algumas imagens de animação geradas por IA, esse caminho ja resolve.

Caminho 3: corte manual com Photoshop ou GIMP

O método mais direto: abrir a imagem, usar a ferramenta de slice, marcar as linhas manualmente e exportar um por um.

Vantagens: controle preciso. Formas irregulares, layouts especiais, áreas especificas de corte: o modo manual é o mais flexível. Para quem ja domina Photoshop, tratar algumas imagens não e tao trabalhoso.

Desvantagens: baixa eficiência e mais chance de erro. Cortar dezenas de frames cansa e exige aténção. Se o asset mudar depois, você refaz tudo. A padronização dos nomes também pode virar bagunca.

Quando usar: necessidades especiais, tratamento único ou quando você ja tem habilidade com Photoshop. Se o asset foi desenhado manualmente, tem layout irregular e a ferramenta automática não reconhece, o corte manual pode ser a única saída.

Tabela comparativa

Na prática: cinco passos da imagem grande até a animação

Depois de escolher o método, como executar? Vamos usar o fluxo “animação de personagem gerada por IA -> Animation Clip reproduzível no Cocos Creator”.

Passo 1: preparar o asset

Suponha que você gerou uma animação de corrida no Midjourney com um prompt como character running animation sprite sheet, 8 frames, transparent background. O resultado é um PNG com 8 frames alinhados na horizontal.

Confira duas coisas:

1. Fundo transparente. O arquivo deve ser PNG, com área transparente limpa, sem resíduos coloridos ou marca d’água. Imagens geradas por IA às vezes deixam sujeira nas bordas; limpe com Photoshop ou uma ferramenta online.
2. Frames alinhados. A ordem da esquerda para a direita corresponde a sequencia do movimento? Modelos de IA podem embaralhar a ordem. Vale conferir visualmente.

Sugestáo de nome: use character_run_sheet.png para a imagem original. Fica mais facil reconhecer depois.

Passo 2: escolher a forma de dividir

Para velocidade, a ferramenta online é o caminho mais rápido. Abra o ImgCrop (imgcrop.com) e envie o PNG.

Marque duas opcoes:

• “nomear em ordem visual”: da esquerda para a direita, exportando automáticamente de frame_01.png a frame_08.png
• “manter tamanho original”: sem redimensionar, preservando a precisão de pixels gerada pela IA

Clique para dividir e baixe o resultado. Em 3 segundos está pronto.

Se você usa TexturePacker, o fluxo é parecido. Abra o software, importe a sprite sheet, escolha o modo de “dividir atlas existente” (não “empacotar imagens soltas”) e exporte plist + os SpriteFrames. Esse método e mais profissional e ainda permite otimizar formato de pixel.

Passo 3: importar no Cocos Creator

Abra o Cocos Creator 3.8 LTS, a versão de suporte de longo prazo atual. Arraste os PNGs extraídos para a pasta assets; por exemplo, crie assets/sprites/character/.

Ao importar cada PNG, o Cocos gera automáticamente um arquivo .meta. No painel de propriedades, confirme se o tipo da imagem está como sprite-frame (e o padrão, então normalmente não precisa mudar).

Se você estiver usando um atlas exportado pelo TexturePacker (com arquivo plist), arraste o plist + PNG inteiro para o projeto. O Cocos reconhece automáticamente como recurso Atlas, contendo vários sub-recursos SpriteFrame.

Passo 4: criar o Animation Clip

Agora você tem 8 SpriteFrames e precisa transformar isso em uma animação reproduzível.

Railway - Plataforma de deploy moderna, sem ops complexas, no ar em minutos

Começar agora →Anúncio

1. Crie um nó Sprite na cena (clique com o botão direito em Hierarchy -> Creaté -> Sprite)
2. Adicione um componente Animation nesse no (Inspector -> Add Component -> Animation)
3. Crie um Animation Clip: clique com o botão direito em assets -> Creaté -> Animation clip, com o nome character_run.anim
4. Arraste esse Clip para a propriedade Clips do componente Animation

Agora vem a parte importante.

Abra o editor de Animation (menu Window -> Animation). Selecione o nó Sprite; o editor exibirá a trilha de animação.

Arraste os 8 SpriteFrames para a trilha. Por padrão, isso cria 8 keyframes, um para cada imagem. As posições são distribuídas automáticamente, com intervalo de 1 segundo, lento demais para corrida.

Ajuste o intervalo entre frames: na parte inferior do editor, mude Sample (taxa de amostragem) para 10 ou 12. Isso significa 10-12 frames por segundo, uma velocidade razoavel. Para corrida, 10 frames por segundo costuma parecer natural.

Faca um preview: clique no botão de play do editor de Animation. A imagem do nó Sprite deve trocar em sequencia, é o personagem comeca a correr.

Passo 5: controlar a reprodução por script

O Animation Clip está pronto. Como chamar isso dentro do jogo?

Cenário simples: reprodução automática em loop.

// CharacterController.ts
import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
    
    @property(Animation)
    animation: Animation | null = null;
    
    start() {
        if (this.animation) {
            // Reproduz a animação de corrida em loop
            this.animation.play('character_run');
            // Define a reprodução como loop
            const staté = this.animation.getStaté('character_run');
            if (staté) {
                staté.repeatCount = Infinity;
            }
        }
    }
}

Anexe esse script ao nó Sprite e vincule a referência do componente Animation. Quando o jogo iniciar, o personagem comeca automáticamente a animação de corrida.

Cenário de troca de animação, por exemplo de corrida para parado:

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // transição de 0,2 s para evitar cortes bruscos
    }
}

// Chamada: o personagem para de correr
this.playAnimation('character_idle');

crossFade faz a transição suave entre duas animações, sem salto instantaneo de frame. Esse detalhe importa bastante; sem ele, a troca de animação parece dura.

Pegadinhas que eu ja encontrei e como evitar

O tratamento de sprite sheets tem alguns problemas recorrentes. Saber disso antes economiza bastante tempo de depuração.

Pegadinha 1: Cocos Creator 3.x não reconhece TexturePacker antigo

Se você usa TexturePacker 4.x ou uma versão anterior, o arquivo plist exportado pode gerar erro ao ser importado no Cocos Creator 3.0+: “Atlas format not supported”.

O motivo: o Cocos Creator 3.x mudou o parser de atlas e so reconhece o formato do TexturePacker 5.x.

Solucao: atualize o TexturePacker para 5.x. Ou deixe o TexturePacker de lado e use o Auto Atlas nativo do Cocos. No Cocos Creator, clique com o botão direito na pasta assets -> Creaté -> Auto Atlas, arraste as imagens soltas para dentro é o atlas será gerado automáticamente.

Pegadinha 2: ordem de nomes baguncada

Depois que uma ferramenta online divide a imagem, os arquivos saem como frame_01.png, frame_02.png e assim por diante. Mas a ordem às vezes não e a certa. Por exemplo: se a imagem gerada por IA tiver frames da direita para a esquerda e a ferramenta nomear por “ordem visual”, o primeiro frame pode acabar sendo o último movimento.

Ao importar a animação, o personagem passa a correr “de trás para frente”, como se estivesse voltando.

Solucao: antes de dividir, confira visualmente a direção dos frames. Se for da direita para a esquerda, renomeie manualmente ou use renomeação em lote no Photoshop. O TexturePacker tem opção de “ordenação espacial”, onde da para definir a direção (de cima para baixo, da esquerda para a direita).

Pegadinha 3: corte de pixels transparentes

O componente Sprite tem uma propriedade Trim, que por padrão remove pixels transparentes nas bordas. Em teoria, é uma otimização: a renderização fica mais compacta.

Mas em algumas animações isso quebra o posicionamento. Imagine que cada frame do personagem não tenha exatamente o mesmo tamanho: o primeiro e 64x64, mas o segundo vira 64x70 porque o braço esticou. Depois do corte, a borda do segundo frame muda, é o personagem parece pular durante a reprodução.

Solucao: nas propriedades do SpriteFrame, mude Trim Type para None (sem corte) ou Custom (corte personalizado). Mantenha todos os frames com tamanho consistente para evitar deslocamento.

Pegadinha 4: intervalo errado no Animation Clip

Problema comum para quem está começando: o Animation Clip toca rápido ou lento demais.

A taxa de amostragem padrão e 60, ou seja, 60 frames por segundo. Se você so tem 8 imagens, nessa velocidade tudo termina em 0,13 segundo. O personagem parece se teletransportar.

Vultr - Servidor cloud NVMe de alto desempenho, 32 locais globais, deploy Docker com um clique

Ver preços →Anúncio

Solucao: ajuste o parâmetro Sample. Animacoes de corrida costumam ficar boas entre 8 e 12 frames por segundo; use 10 ou 12. Se a animação for lenta, como respiracao ou idle, 6-8 frames por segundo ja basta.

No editor de Animation, também da para ajustar manualmente a duração de cada frame. Selecione o keyframe e arraste a posição para controlar o intervalo com precisão.

Otimizacao de desempenho: como desenhar o atlas

Depois que a sprite sheet está pronta, ainda da para apertar um pouco mais o desempenho.

Tamanho recomendado do atlas

Não deixe uma única imagem de atlas passar de 2048x2048 pixels. Esse é o limite de textura em muitos dispositivos de entrada. Acima disso, alguns aparelhos podem falhar ou renderizar com qualidade reduzida.

Se a animação do personagem tiver muitos frames, como um ataque com 50 frames, considere dividir em dois atlas. O TexturePacker faz isso automáticamente: defina Max Size como 2048, é o excedente vai para uma nova imagem.

Escolha do formato de pixel

Cada plataforma tem um formato mais adequado:

• iOS: PVRTC, formato de compressão específico da Apple. Ao exportar no TexturePacker, escolha PVRTC 4bpp; o tamanho do arquivo pode cair para 1/4 do original.
• Android: ETC1 ou ETC2. A maioria dos dispositivos suporta, e a eficiência de compressão e boa.
• Uso multiplataforma: RGBA8888, sem compressão. O arquivo fica maior, mas a compatibilidade e a melhor, ideal para a fase de teste.

No lançamento, escolha o formato conforme a plataforma alvo. O TexturePacker suporta “empacotamento em múltiplos formatos”, gerando conjuntos separados para iOS e Android de uma vez.

Atlas dinamico

O Cocos Creator tem um recurso chamado Auto Atlas, que consegue agrupar automáticamente SpriteFrames soltos para renderização em lote.

Como ativar: clique com o botão direito em assets -> Creaté -> Auto Atlas e arraste todas as imagens soltas para dentro. Durante o build, o Cocos gera o atlas automáticamente, e as Draw Calls diminuem.

Esse recurso funciona bem para projetos com poucos assets. Se o volume de arte for grande, ainda recomendo empacotar antes com TexturePacker, porque o controle e maior.

Monitoramento de Draw Calls

Como confirmar que a sprite sheet realmente otimizou algo? Olhe o número de Draw Calls.

Nas ferramentas de desenvolvimento do Cocos Creator, o painel Profiler mostra Draw Calls em tempo real. Em uma cena complexa, compare os números entre imagens soltas e atlas.

O estádo ideal: todos os frames de animação do mesmo personagem ficam no mesmo atlas, e a Draw Call permanece em 1. Se o personagem estiver em atlas diferentes, a Draw Call pode oscilar ao trocar de animação. Nesse caso, considere juntar animações relacionadas na mesma imagem.

Resumo

Transformar uma sprite sheet gerada por IA em um Animation Clip reproduzível no Cocos Creator não é um fluxo complicado:

1. Confirme o asset (fundo transparente e ordem correta dos frames)
2. Escolha a forma de dividir (ferramenta online para velocidade, TexturePacker para fluxo profissional)
3. Importe no Cocos Creator (PNG ou formato Atlas)
4. Crie o Animation Clip (arraste frames, ajuste intervalo e faca preview)
5. Controle a reprodução por script (loop, troca de animação e transição)

Na escolha da ferramenta: prototipo rápido combina com ferramenta online; projeto comercial combina com TexturePacker. Nas pegadinhas: fique aténto a compatibilidade de versão, ordem de nomes, configuração de corte e intervalo entre frames.

Depois desses passos, seu personagem ja consegue correr dentro do jogo.