Pular para o conteúdo
Jogos Digitais
Nesta página
  1. Objetivos de aprendizagem
  2. Pré-requisitos
  3. Materiais
  4. Conceitos
  5. Exemplos
  6. Tutorial passo a passo
  7. Imagens
  8. Indicação da interface
  9. O código completo
  10. Explicação do código
  11. Resultado esperado
  12. Problemas comuns
  13. Exercício guiado
  14. Desafio individual
  15. Desafio avançado (opcional)
  16. Critérios de avaliação
  17. Checklist de conclusão
  18. Extensão

Módulo 5 · Aula 5.4 · Personagem: parado, andando e pulando

Carga horáriaDificuldadeFerramentaCompetências
10 h/a⭐⭐⭐Piskel (piskelapp.com) e GDevelop 5C3, C4

Objetivos de aprendizagem

  1. Desenhar um personagem de 16 × 24 legível no tamanho do jogo.
  2. Fazer os quadros de Parado, Andando (2 a 4 quadros) e Pulando.
  3. Manter os pés na mesma linha e o corpo no mesmo lugar entre quadros.
  4. Trocar o personagem da Trilha da Serra sem mexer em nenhum evento.

Pré-requisitos

Aulas 5.1 a 5.3. Aula 4.1 (animações Parado, Andando e Pulando).

Materiais

Computador com navegador e GDevelop; exemplos/quadros-personagem.png; ficha do personagem feita no Módulo 2 (se houver).

Conceitos

Silhueta. Pinte o personagem todo de preto: ainda dá para saber quem é? Um chapéu, um cabelo, uma mochila marcam a silhueta. O sertanejo é reconhecido pelo chapéu de couro.

Tamanho e proporção. Em 16 × 24 a cabeça fica grande (uns 8 pixels de altura com o chapéu). Proporção "fofinha" é proposital: rosto e chapéu precisam aparecer.

Linha dos pés. Em todos os quadros os pés tocam a mesma linha (a última linha da imagem). Se mudar, o personagem "flutua" ou "afunda" ao trocar de animação.

Ciclo de caminhada simples. Dois quadros: perna esquerda à frente; perna direita à frente. Com quatro fica mais suave: passo, junta, outro passo, junta. O sertanejo usa dois, a 0,15 s cada.

Quadro de pulo. Um quadro só já funciona: braços para cima, pernas encolhidas. O jogador entende na hora.

Olhar para a direita. Desenhe olhando para a direita. O GDevelop espelha quando anda para a esquerda (Aula 4.1).

Mesmo tamanho de arquivo. Para trocar a arte da Trilha sem mexer em nada, cada PNG novo precisa ter o mesmo nome e o mesmo tamanho do antigo (32 × 48 para o jogador, depois da escala 2).

Exemplos

exemplos/quadros-personagem.png mostra os 4 quadros do sertanejo lado a lado com a grade: Parado, Andando 1, Andando 2, Pulando. Repare que só as pernas (e, no pulo, os braços) mudam.

Tutorial passo a passo

Parte A. Esboço e silhueta (90 min)

  1. No papel, 3 ideias de personagem do seu tema. Pinte cada uma só de preto. Escolha a silhueta mais fácil de reconhecer.
  2. No Piskel, RESIZE 16 × 24 (sem manter proporção).
  3. Desenhe o quadro Parado: contorno, cores da sua paleta, luz de cima à esquerda.

Parte B. Andando (120 min)

  1. Duplique o quadro Parado duas vezes.
  2. Com a casca de cebola ligada, mude só as pernas: no quadro 2, perna de trás encolhida e a da frente esticada; no quadro 3, o contrário.
  3. Na prévia, ponha uns 7 FPS (perto de 0,15 s por quadro) e veja só os quadros 2 e 3 alternando. Ajuste.

Parte C. Pulando (60 min)

  1. Duplique o Parado de novo: braços para cima, pernas encolhidas (subindo 1 ou 2 pixels), pés ainda dentro da imagem.

Parte D. Exportar e trocar no jogo (90 min)

  1. EXPORT → Zip → Scale 2 → Download ZIP.
  2. Faça uma cópia da pasta da Trilha da Serra. Renomeie os PNGs exportados para jogador_parado.png, jogador_andando1.png, jogador_andando2.png, jogador_pulando.png e substitua os da pasta imagens/ da cópia.
  3. Abra a cópia no GDevelop. Se as imagens antigas ainda aparecerem, feche e abra o projeto de novo.
  4. Visualizar e jogue a fase inteira.

Imagens

  • exemplos/quadros-personagem.png.
  • exemplos/grade-ampliada.png.

Indicação da interface

ItemOnde fica
Duplicar quadro, casca de cebola, FPSigual à Aula 5.3
Move tool (M)mover o desenho inteiro dentro do quadro (para corrigir a linha dos pés)
Vertical Mirror pen (V)caneta espelhada: desenha dos dois lados ao mesmo tempo; boa para o personagem de frente

O código completo

Nenhum evento muda. Os eventos da Trilha usam os nomes das animações ("Parado", "Andando", "Pulando"), não as imagens.

Explicação do código

Os eventos dizem "mostre a animação Andando". Quais imagens formam essa animação é problema da arte. Por isso dá para trocar todo o visual sem tocar na programação, desde que os nomes e tamanhos sejam mantidos. Em equipe, isso permite que artista e programador trabalhem ao mesmo tempo.

Resultado esperado

A Trilha da Serra rodando com o seu personagem: parado, andando, pulando e virando para a esquerda, sem nenhuma mudança nos eventos.

Problemas comuns

SintomaCausaSolução
Personagem afunda no chão ao andarpés subiram ou desceram num quadropés na última linha em todos
Treme paradoquadros de Parado diferentesParado com um quadro só
Tamanho errado no jogoexportou em escala 1, ou desenhou em 32 × 3216 × 24, escala 2
Olha para trás ao andardesenhou olhando para a esquerdaespelhar todos os quadros (Flip horizontally com Shift aplica em todos)
Colide com o chão de um jeito estranhoimagem de tamanho diferente da originalmanter 32 × 48 depois de exportar

Exercício guiado

O personagem tem 48 px de altura no jogo e o pulo sobe uns 180 px (Aula 4.1). Quantas "alturas de personagem" ele pula? (Resposta: 180 ÷ 48 = 3,75.)

Desafio individual

Faça um ciclo de andar com 4 quadros e ajuste o tempo no GDevelop. Compare com o de 2 quadros: qual combina mais com o jogo?

Desafio avançado (opcional)

Faça uma animação Caindo separada do pulo (braços abertos, olhando para baixo) e um evento novo que use Está caindo para mostrá-la. Aqui sim muda o código: anote no diário por quê.

Critérios de avaliação

  • Silhueta reconhecível e paleta coerente.
  • Pés alinhados, animação sem tremer.
  • Trilha rodando com o personagem novo, sem mudar eventos.

Checklist de conclusão

Extensão

Observe alguém andando em câmera lenta (vídeo do celular). Desenhe no papel 4 posições das pernas. Compare com o ciclo de 2 quadros.