Módulo 3 · Aula 3.2 · Objetos, sprites e animações

Objetivos de aprendizagem

1. Criar objetos do tipo Sprite a partir de imagens PNG.
2. Montar um objeto com duas animações com nome (Parado e Andando).
3. Ajustar o tempo entre quadros e a repetição de uma animação.
4. Colocar instâncias na cena e organizar quem fica na frente (fundo atrás de tudo).

Pré-requisitos

Aula 3.1 (projeto sementes-SEUNOME criado).

Materiais

Pasta imagens/ do Sementes do Sertão copiada para dentro da pasta do seu projeto. São 8 desenhos originais feitos para o curso:

Conceitos

Sprite. Objeto feito de imagens. No GDevelop, a janela de novo objeto descreve assim: "Objeto animado que pode ser usado para a maioria dos elementos de um jogo 2D."

Animação. Uma sequência de imagens (quadros) que se repete. O sertanejo andando tem 2 quadros que se alternam. Cada animação pode ter um nome. O nome é o que os eventos usam depois ("mude para a animação Andando").

Tempo entre quadros. Quanto tempo cada imagem fica na tela, em segundos. 0,15 s dá cerca de 7 quadros por segundo, bom para pixel art.

Repetição. Se marcada, a animação recomeça ao terminar (caminhada). Se desmarcada, para no último quadro (explosão, por exemplo).

Camada e ordem (Z). Quem tem o número Z maior fica na frente. O fundo precisa ficar atrás de todos.

Exemplos

Tutorial passo a passo

Parte A. O fundo (40 min)

1. Abra o seu projeto. No gerenciador do projeto, em Cenas, deixe uma cena chamada Jogo: se já existir uma cena, use os três pontinhos ao lado do nome dela e a opção de renomear; se não existir, clique no + ao lado de Cenas (o botão se chama Adicionar uma cena).
2. No painel Objetos, em Objetos da Cena, clique no + roxo.
3. Na janela Novo objeto, aba Novo objeto do zero, clique em Sprite.
4. Abre a janela Editar NewSprite. Em Nome do objeto, escreva Fundo.
5. Clique em Adicionar uma animação e depois em Adicione um sprite. Escolha imagens/fundo.png.
6. Clique em Aplicar.
7. Arraste Fundo do painel Objetos para a cena e encaixe o canto no ponto 0,0 (no painel Propriedades, digite X = 0 e Y = 0).

Parte B. O sertanejo com duas animações (90 min)

8. Novo objeto Sprite com o nome Jogador.
9. Adicionar uma animação. No campo Nome da animação opcional, escreva Parado. Adicione um sprite: jogador_parado.png.
10. Adicionar uma animação de novo. Nome: Andando. Adicione um sprite e escolha os dois arquivos jogador_andando1.png e jogador_andando2.png.
11. Na animação Andando, mude o tempo (ícone de cronômetro, vem 0,08) para 0,15 e marque Repetição.
12. Clique em Visualizar dentro da animação (ao lado de Criar com Piskel) para ver o boneco andando.
13. Aplicar. Arraste o Jogador para o meio da cena.

Parte C. Semente e redemoinho (60 min)

14. Objeto Semente, uma animação com semente.png. Coloque 3 instâncias espalhadas na cena.
15. Objeto Redemoinho, uma animação com redemoinho1.png e redemoinho2.png, tempo 0,1, Repetição marcada. Coloque 1 instância num canto.

Parte D. Ordem e teste (60 min)

16. Clique na instância do Fundo e, no painel Propriedades, procure o campo da ordem Z (a "profundidade") e mude para -10. Os outros ficam na frente.
17. Visualizar. O redemoinho gira, mas o sertanejo fica Parado, porque ninguém mandou ele trocar de animação. Isso vem na Aula 3.3.
18. Salve (Ctrl+S).

Imagens

• Captura real da janela Editar NewSprite depois de Adicionar uma animação: recursos/imagens/gdevelop/captura-editar-sprite.png. Mostra o campo Nome da animação opcional, Criar com Piskel, Visualizar, o tempo 0,08, Repetição e o botão Adicione um sprite.
• Os desenhos em imagens/ são originais, feitos por script para este curso (scripts/gerar_sementes_sertao.py).

Indicação da interface

O código completo

Nesta aula não há eventos. O "código" é a configuração dos objetos:

Instâncias na cena Jogo: Fundo em (0, 0) com Z −10; Jogador em (384, 300); Sementes em (150, 150), (600, 250) e (300, 480); Redemoinho em (700, 480).

Explicação do código

• A ordem das animações importa: a primeira (Parado) é a que aparece quando o jogo começa.
• Os nomes "Parado" e "Andando" serão escritos nos eventos entre aspas. Um acento ou letra maiúscula diferente faz o evento não achar a animação.
• O Fundo tem Z −10 para nunca cobrir o resto, mesmo que alguém arraste outro objeto depois.

Resultado esperado

Ao Visualizar: o chão do sertão ocupa a tela toda, o sertanejo parado no meio, três sementes e o redemoinho girando no canto. Nada se mexe além do redemoinho.

Problemas comuns

Exercício guiado

Adicione ao Jogador uma terceira animação chamada Comemorando usando jogador_parado.png e jogador_andando1.png, tempo 0,3, com repetição. Visualize dentro da janela da animação. (Resposta conferível: o boneco alterna devagar entre parado e um passo.)

Desafio individual

Abra Criar com Piskel em uma animação nova do objeto Semente e desenhe uma semente dourada (vale mais pontos no futuro). Nomeie a animação Dourada.

Desafio avançado (opcional)

Desenhe no Piskel um terceiro quadro para o redemoinho e coloque na animação. O giro fica mais suave?

Critérios de avaliação

• Jogador com as duas animações nomeadas exatamente Parado e Andando.
• Fundo atrás de tudo.
• Tempo e repetição corretos na animação Andando.

Checklist de conclusão

• Criei 4 objetos Sprite
• O Jogador tem Parado e Andando
• Ajustei tempo e repetição
• O Fundo está atrás de tudo
• Salvei o projeto

Extensão

Desenhe no papel quadriculado (16 × 24 quadradinhos) um personagem seu em 2 poses de caminhada. Na Aula 3.10 ele pode virar o seu jogador.