Voltar para: Games com Phaser + Reactjs

(Frames, Atlas, Animation Manager)

Em jogos 2D, tudo o que vemos na tela é composto por imagens organizadas e manipuladas pelo motor do jogo.
No Phaser, essas imagens são organizadas em estruturas específicas que permitem criar movimento e dar vida aos personagens.

Para entender como isso funciona, precisamos dominar alguns conceitos fundamentais:

Sprites
Spritesheets
Frames
Texture Atlas
Animation Manager

Esses elementos formam a base de qualquer sistema de animação em jogos 2D.

🎯 Objetivos da Lição

Ao final desta aula o aluno será capaz de:

Entender o que são Sprites
Compreender o funcionamento de Spritesheets
Entender o conceito de Frames
Conhecer o que é um Texture Atlas
Entender como funciona o Animation Manager
Compreender como jogos criam animações a partir de imagens

🧩 O que é um Sprite

Um Sprite é uma imagem usada para representar um objeto dentro do jogo.

Sprites podem representar praticamente qualquer elemento visual.

Exemplos comuns:

personagem do jogador
inimigos
moedas
projéteis
plataformas
objetos do cenário

Em essência, um sprite é simplesmente:

uma imagem posicionada dentro do mundo do jogo

Essas imagens podem ser:

PNG
JPG
WebP

Mas PNG é o formato mais comum porque suporta transparência.

🧠 Sprite como objeto do jogo

No Phaser, um sprite não é apenas uma imagem.

Ele também possui propriedades como:

posição (x, y)
escala
rotação
visibilidade
interação
física

Ou seja, um sprite é um Game Object visual dentro da cena.

🎞️ O que é animação em jogos

Animação em jogos é criada exibindo várias imagens rapidamente.

Cada imagem representa um pequeno estágio do movimento.

Quando exibidas rapidamente, essas imagens criam a sensação de movimento.

Esse conceito é o mesmo usado em:

desenhos animados
filmes
GIFs

Cada imagem individual é chamada de Frame.

🧩 Frames

Um Frame é uma imagem individual dentro de uma sequência de animação.

Exemplo simples de animação de corrida:

Frame 1 → personagem parado
Frame 2 → perna direita avançando
Frame 3 → pernas abertas
Frame 4 → perna esquerda avançando

Quando exibimos esses frames rapidamente:

1 → 2 → 3 → 4 → 1 → 2 → 3 → 4

temos a animação de corrida.

🎨 Problema de usar muitas imagens separadas

Se cada frame fosse um arquivo separado, teríamos problemas:

muitos arquivos sendo carregados
alto número de requisições
pior desempenho

Por isso jogos utilizam spritesheets.

🧩 Spritesheet

Uma Spritesheet é uma única imagem que contém vários frames organizados em uma grade.

Exemplo conceitual:

┌────┬────┬────┬────┐
│ F1 │ F2 │ F3 │ F4 │
├────┼────┼────┼────┤
│ F5 │ F6 │ F7 │ F8 │
└────┴────┴────┴────┘

Cada célula é um frame da animação.

O Phaser consegue:

cortar cada frame
armazenar individualmente
reproduzir animações

🧠 Vantagens das Spritesheets

Spritesheets oferecem vários benefícios:

✔ menos requisições de rede
✔ melhor desempenho gráfico
✔ organização de animações
✔ melhor uso da GPU

Motores de jogos usam spritesheets porque a GPU trabalha melhor com texturas grandes em vez de muitas pequenas.

📦 Texture Atlas

Um Texture Atlas é uma evolução da spritesheet.

Enquanto a spritesheet usa grade fixa, o atlas organiza imagens de forma livre.

Exemplo:

┌───────────────┐
│ personagem    │
│               │
├───────┬───────┤
│ moeda │ item  │
├───────┴───────┤
│ inimigo       │
└───────────────┘

Isso permite colocar vários sprites diferentes em uma única textura.

🧠 Por que usar Texture Atlas

O atlas oferece vantagens importantes:

melhor aproveitamento do espaço
menos desperdício de pixels
menos trocas de textura na GPU

Isso melhora o desempenho.

Ferramentas populares para criar atlas incluem:

TexturePacker
Free Texture Packer

🎮 Animation Manager

O Phaser possui um sistema interno chamado Animation Manager.

Esse sistema é responsável por:

criar animações
armazenar animações
reproduzir animações
controlar velocidade

Ele funciona como um registro global de animações.

🧠 Como o Animation Manager funciona

O processo geralmente segue três etapas:

1️⃣ Definir animação

O jogo define quais frames compõem a animação.

2️⃣ Registrar animação

A animação é registrada com um nome.

Exemplo conceitual:

"run"
"idle"
"jump"
"attack"

3️⃣ Reproduzir animação

O sprite pode então executar a animação registrada.

🎞️ Componentes de uma animação

Uma animação possui alguns parâmetros importantes.

Frames

Lista de frames que compõem a animação.

Frame Rate

Define quantos frames são exibidos por segundo.

Exemplo:

10 fps

Significa:

10 frames por segundo.

Repeat

Define quantas vezes a animação se repete.

Exemplo:

-1

Significa:

repetição infinita.

Key

Nome da animação.

Exemplo:

run
jump
attack

🧠 Exemplo conceitual de animação

Imagine um personagem com animação de corrida.

Frames:
1, 2, 3, 4FrameRate:
12 fpsRepeat:
infinito

Fluxo da animação:

1 → 2 → 3 → 4 → 1 → 2 → 3 → 4

Isso cria um ciclo contínuo de corrida.

🎮 Sprites e animações no fluxo do jogo

Dentro do jogo, a animação geralmente é controlada pela lógica.

Exemplo conceitual:

se jogador está parado
   tocar animação idlese jogador está correndo
   tocar animação runse jogador pulou
   tocar animação jump

Isso faz com que o personagem reaja às ações do jogador.

⚙️ Performance e animação

Animações precisam ser eficientes para manter o jogo fluido.

Boas práticas incluem:

usar spritesheets
evitar texturas gigantes
reutilizar animações
evitar troca excessiva de texturas

Motores como o Phaser utilizam aceleração gráfica através de:

WebGL
HTML5 Canvas

Isso permite desenhar milhares de sprites rapidamente.

🧠 Conceitos fundamentais fixados

Após essa aula o aluno compreende:

como personagens são representados graficamente
como animações são criadas em jogos
como spritesheets organizam frames
como atlas agrupam texturas
como o Animation Manager controla animações

Esses conceitos conectam arte digital com programação.

🎓 Conclusão

Jogos 2D são essencialmente sequências inteligentes de imagens.

No Phaser, a criação de personagens animados depende de entender:

Sprites
imagens que representam objetos

Frames
imagens individuais de uma animação

Spritesheets
imagens que contêm vários frames organizados

Texture Atlas
texturas que agrupam múltiplos sprites

Animation Manager
sistema que controla animações no jogo

Dominar esses conceitos permite transformar imagens estáticas em personagens vivos dentro do mundo do jogo.