Construct do Zero: Sprites, Animações e Estados do Personagem

Sprites: criação e importação (com organização)

No Construct, o Sprite é o objeto visual 2D que pode ter múltiplas animações (por exemplo: idle, run, jump, hit). Cada animação é composta por frames (quadros). Um mesmo Sprite pode conter todas as animações do personagem, o que facilita trocar o visual por eventos sem precisar criar vários objetos.

Boas práticas antes de importar

• Padronize tamanho: exporte frames com dimensões consistentes (ex.: 64x64, 128x128). Se as dimensões variam, a animação pode “pular” na tela.
• Nomeie arquivos: use padrões como player_idle_0.png, player_run_0.png etc., para facilitar importação em lote.
• Separação por pastas: organize por animação (idle/run/jump/hit) para evitar misturar frames.

Passo a passo: criar/importar um Sprite com animações

1. Insira um Sprite no layout (ou crie via inserção de objeto).
2. Abra o Image Editor do Sprite.
3. Na área de animações, renomeie a animação padrão para idle.
4. Importe os frames do idle: opção de importar múltiplos arquivos (cada arquivo vira um frame).
5. Crie nova animação: run e importe os frames correspondentes.
6. Crie nova animação: jump e importe os frames correspondentes.
7. (Opcional) Crie hit e importe frames (pode ser 1 frame apenas).

Dica: se você tiver spritesheet, use a opção de importar spritesheet e recortar por grade (quando aplicável). O objetivo é manter as animações dentro do mesmo Sprite.

Edição de animações: velocidade, loop e consistência visual

Uma animação no Construct tem propriedades importantes: Speed (FPS), Loop, Repeat count e ordem dos frames. Ajustar isso evita animações rápidas demais, lentas demais ou que não param quando deveriam.

Ajustes recomendados por tipo de animação

Passo a passo: ajustar uma animação

1. No Image Editor, selecione a animação (ex.: run).
2. Ajuste Speed para o FPS desejado.
3. Marque/desmarque Loop conforme o tipo.
4. Reordene frames se necessário (arrastar frames na timeline).
5. Teste no layout: observe se há “tremida” (geralmente causada por origem inconsistente ou frames com tamanhos diferentes).

Ponto de origem (Origin Point): o “pivô” do personagem

O Origin Point é o ponto de referência do Sprite para posicionamento, rotação, espelhamento e também influencia a sensação de estabilidade da animação. Se cada frame tiver o origin em lugar diferente, o personagem parece “sacudir” mesmo parado.

Como escolher um bom origin

• Para personagens de plataforma, um padrão comum é o origin no centro inferior (entre os pés). Isso facilita alinhar no chão.
• Se o personagem usa arma/ataque, pode ser útil origin no tronco, mas mantenha consistência com colisão.

Passo a passo: definir origin consistente

1. No Image Editor, selecione a animação.
2. Use a ferramenta de Set origin e posicione no ponto desejado (ex.: centro inferior).
3. Aplique para todos os frames (use a opção de aplicar ao frame atual e depois replicar, ou ajuste frame a frame se necessário).
4. Repita para cada animação (idle/run/jump/hit), garantindo que o origin fique no mesmo local relativo ao corpo.

Dica prática: ative a visualização do origin e compare frames. Se o pé “escapa” do chão, o origin provavelmente está variando.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Collision Polygon: colisão que combina com o gameplay

O Collision Polygon define a área usada para colisões. Ele não precisa seguir o contorno exato do personagem. Para jogos 2D, colisões mais simples costumam ser melhores: mais estáveis, mais previsíveis e com menos “enganchos” em cantos.

Estratégias comuns de colisão

• Caixa simples: retângulo envolvendo tronco/pernas; ótimo para plataforma.
• Polígono simplificado: contorno com poucos pontos, evitando detalhes como braços.
• Colisão consistente entre animações: idealmente, a colisão não deve mudar drasticamente entre frames, para não causar “teleporte” em contato com paredes/chão.

Passo a passo: ajustar Collision Polygon

1. No Image Editor, abra o modo de edição de colisão.
2. Escolha uma base: Bounding box (caixa) ou ajuste manual com pontos.
3. Crie uma forma simples (ex.: retângulo do peito até os pés).
4. Aplique de forma consistente: se a animação muda muito de pose, prefira uma colisão estável (não siga braços levantados, por exemplo).

Regra prática: colisão deve representar o “corpo jogável”, não o desenho inteiro.

Ajustes de escala: tamanho visual sem quebrar colisão

Você pode ajustar o tamanho do personagem por escala (Scale) ou por redimensionamento do Sprite. Em geral, prefira manter os assets em uma resolução coerente e ajustar escala com cuidado para não distorcer pixel art (se for o caso) e para manter a sensação de velocidade.

Boas práticas de escala

• Se o jogo usa pixel art, use escalas inteiras (2x, 3x) para evitar borrado.
• Após escalar, revise a colisão: dependendo do modo, a colisão acompanha a escala, mas o formato base ainda precisa ser adequado.
• Evite mudar escala durante animações do personagem se isso afetar colisão e sensação de contato.

Estados do personagem: modelando comportamento com variáveis

Um estado é uma forma de representar “o que o personagem está fazendo agora”. Em vez de trocar animação diretamente em dezenas de condições, você define um estado (ex.: idle/run/jump/hit) e usa eventos para: (1) decidir o estado, (2) tocar a animação correspondente, (3) aplicar regras de prioridade.

Opção A: variável de instância (recomendado)

Crie uma variável de instância no Sprite do personagem chamada state. Você pode usar texto ("idle") ou número (enumeração). Texto é mais legível; número é mais rápido de comparar e menos sujeito a erro de digitação.

Exemplo com números:

0 = idle
1 = run
2 = jump
3 = hit

Opção B: flags/variáveis separadas

Você pode usar booleanos como isJumping, isHit, isMoving. Funciona, mas tende a gerar combinações inválidas (ex.: isJumping e isIdle ao mesmo tempo). Para começar, o estado único costuma ser mais simples.

Troca de animações por eventos (com prioridade)

O objetivo é garantir que animações “fortes” (como hit) sobreponham outras (como run). Para isso, você define uma ordem de decisão: primeiro hit, depois jump, depois run, depois idle.

Estrutura de prioridade (modelo mental)

• Se está em hit, não pode trocar para run/idle até terminar ou até liberar.
• Se está em jump, não deve tocar run/idle no ar.
• Se está no chão e com movimento, use run; senão idle.

Eventos: padrão de atualização do estado

Você pode atualizar o estado a cada tick (Every tick) ou em eventos específicos (tecla pressionada, colisão, etc.). Para manter simples e previsível, um padrão comum é:

• Eventos que disparam estados especiais (hit, jump).
• Um evento contínuo que resolve estados básicos (run/idle) quando não há prioridade maior.

Exercício prático: personagem com 3+ animações e controlador de estados

Objetivo: criar um personagem com animações idle, run, jump (e opcional hit) e um controlador de estados por eventos com prioridade (hit > jump > run > idle).

Preparação do Sprite

1. Crie/importe um Sprite chamado Player.
2. No Image Editor, crie as animações: idle, run, jump, hit (opcional, mas recomendado para a regra de prioridade).
3. Ajuste FPS e loop: idle e run com loop; jump e hit sem loop.
4. Defina origin consistente (centro inferior) em todas as animações.
5. Ajuste collision polygon para uma forma simples e consistente.

Variáveis de instância

No Player, crie:

• state (Number) com padrão 0 (idle)
• facing (Number) opcional: 1 direita, -1 esquerda (para espelhar)
• hitTimer (Number) opcional: tempo restante de hit

Definição dos estados (enumeração)

STATE_IDLE = 0
STATE_RUN  = 1
STATE_JUMP = 2
STATE_HIT  = 3

Se você não estiver usando constantes, use os números diretamente nos eventos, mas mantenha uma anotação para não se perder.

Eventos: entrada e movimento (exemplo genérico)

A lógica abaixo assume que você já tem alguma forma de mover o personagem (por exemplo, alterando X/Y). Foque aqui no controlador de estados e animações.

1) Disparar HIT (prioridade máxima)

Escolha uma condição de hit, por exemplo: ao apertar uma tecla de teste (H) ou ao colidir com um inimigo.

On key H pressed
-> Player: Set state to STATE_HIT
-> Player: Set hitTimer to 0.35
-> Player: Set animation to "hit" (from start)

Agora, enquanto estiver em hit, você não quer que run/idle/jump substituam a animação.

Every tick
Condition: Player.state = STATE_HIT
-> Player: Set hitTimer to Player.hitTimer - dt

Every tick
Condition: Player.state = STATE_HIT
Condition: Player.hitTimer <= 0
-> Player: Set state to STATE_IDLE

Alternativa: em vez de timer, você pode usar o gatilho de fim de animação:

Player: On animation "hit" finished
-> Player: Set state to STATE_IDLE

2) Disparar JUMP (prioridade acima de run/idle)

Defina uma condição de pulo (por exemplo, tecla de pulo e estar no chão). Quando disparar, mude o estado e a animação.

On key Space pressed
Condition: Player.state ≠ STATE_HIT
Condition: Player is on floor (ou sua condição equivalente)
-> Player: Set state to STATE_JUMP
-> Player: Set animation to "jump" (from start)

Quando voltar ao chão, libere o estado jump:

Every tick
Condition: Player.state = STATE_JUMP
Condition: Player is on floor
-> Player: Set state to STATE_IDLE

Se você tiver subida/queda separadas, pode evoluir depois para jump e fall, mas aqui manteremos um único estado.

3) Resolver RUN e IDLE (somente se não estiver em HIT nem JUMP)

Agora você cria uma “camada base” que decide entre run e idle. Ela só pode rodar quando não há prioridade maior.

Every tick
Condition: Player.state ≠ STATE_HIT
Condition: Player.state ≠ STATE_JUMP
Condition: (Right is down) OR (Left is down)
-> Player: Set state to STATE_RUN

Every tick
Condition: Player.state ≠ STATE_HIT
Condition: Player.state ≠ STATE_JUMP
Condition: (Right is NOT down) AND (Left is NOT down)
-> Player: Set state to STATE_IDLE

4) Tocar a animação correta com base no state

Para evitar reiniciar a animação a cada tick, só troque se a animação atual for diferente.

Every tick
Condition: Player.state = STATE_IDLE
Condition: Player.AnimationName ≠ "idle"
-> Player: Set animation to "idle"

Every tick
Condition: Player.state = STATE_RUN
Condition: Player.AnimationName ≠ "run"
-> Player: Set animation to "run"

Every tick
Condition: Player.state = STATE_JUMP
Condition: Player.AnimationName ≠ "jump"
-> Player: Set animation to "jump"

Every tick
Condition: Player.state = STATE_HIT
Condition: Player.AnimationName ≠ "hit"
-> Player: Set animation to "hit" (from start)

Note que no hit é comum usar “from start” para garantir feedback imediato.

5) Espelhamento (direção) sem criar animações duplicadas

Se seu personagem anda para esquerda/direita, você pode espelhar horizontalmente com base na última direção pressionada.

Every tick
Condition: Right is down
-> Player: Set mirrored = false

Every tick
Condition: Left is down
-> Player: Set mirrored = true

Isso evita manter duas versões de cada animação (run_left, run_right).

Checklist de validação do exercício

• O Sprite possui pelo menos 3 animações (idle, run, jump) e preferencialmente hit.
• Origin consistente: o personagem não “treme” ao trocar frames.
• Collision polygon simples e estável: não muda drasticamente entre animações.
• Prioridade funciona: ao acionar hit, a animação hit não é substituída por run/idle/jump até terminar.
• Troca de animação não reinicia indevidamente (condição AnimationName != antes de trocar).