Módulo 5 · Aula 5.3 · Piskel: a castanha girando
| Carga horária | Dificuldade | Ferramenta | Competências |
|---|---|---|---|
| 8 h/a | ⭐⭐ | Piskel (piskelapp.com) e GDevelop 5 | C3, C4 |
Objetivos de aprendizagem
- Entender animação quadro a quadro e quadros por segundo.
- Criar, duplicar e ajustar quadros no Piskel usando a "casca de cebola".
- Exportar uma animação como folha de sprites e como PNGs separados.
- Colocar a animação num objeto do GDevelop e acertar a velocidade.
Pré-requisitos
Aulas 5.1 e 5.2. Aula 3.2 (animações no GDevelop).
Materiais
Computador com navegador e GDevelop; exemplos/castanha-girando.gif e exemplos/castanha-girando-folha.png.
Conceitos
Quadro (frame). Uma imagem parada. Mostrando vários em sequência, rápido, o olho vê movimento, como num folioscópio (livrinho de desenhos que se folheia).
Quadros por segundo (FPS). Quantos quadros aparecem por segundo. O Piskel mostra a velocidade da prévia em FPS (começa em 12 FPS). O GDevelop usa o tempo entre quadros: 12 FPS é cerca de 0,08 s, o valor padrão dele. Para converter: tempo = 1 ÷ FPS.
Girar de mentira. Uma moeda ou castanha "girando" em jogo 2D é só ela ficando mais estreita e voltando: largura cheia, metade, fininha, metade espelhada. Quatro quadros bastam.
Casca de cebola (onion skin). Mostra o quadro anterior bem clarinho por trás do atual. Ajuda a ver quanto o desenho mudou.
Folha de sprites (spritesheet). Todos os quadros lado a lado numa imagem só. Muitos motores usam esse formato. No GDevelop é mais simples usar um PNG por quadro.
Exemplos
Abra exemplos/castanha-girando.gif no navegador. Depois veja exemplos/castanha-girando-folha.png: os mesmos 4 quadros lado a lado, 24 × 24 cada.
| Quadro | Largura (em 12 × 12) |
|---|---|
| 1 | 12 (de frente, com luz e sombra) |
| 2 | 6 |
| 3 | 2 (de lado) |
| 4 | 6, espelhado |
Tutorial passo a passo
Parte A. Primeiro quadro (60 min)
- No Piskel, RESIZE para 12 × 12. Desenhe a castanha de frente, com contorno, luz e sombra (Aula 5.2). Ou importe a sua: IMPORT → IMPORT FROM PICTURE (importar de imagem).
Parte B. Os outros quadros (100 min)
- Na coluna de quadros (à esquerda do desenho), passe o mouse sobre o quadro 1 e use Duplicate this frame (duplicar este quadro).
- Ligue Toggle onion skin (casca de cebola, Alt+O), acima da prévia.
- No quadro 2, apague as laterais e redesenhe a castanha com metade da largura. Mantenha a altura e o centro.
- Duplique o quadro 2 e afine para 2 pixels (o quadro 3: a castanha de lado, quase só contorno).
- Duplique o quadro 2 de novo, arraste a cópia para o fim e espelhe: menu de transformação Flip horizontally (espelhar na horizontal).
- Ajuste a velocidade da prévia (no canto de cima à direita) até a rotação parecer natural. Anote o FPS.
Parte C. Exportar (40 min)
- Salve o
.piskel(SAVE → Save as .piskel). - EXPORT → aba Zip → Scale 2 → Prefix
castanha→ Download ZIP. Vem um PNG para cada quadro. - Também exporte a folha: aba PNG → Spritesheet file export: Download.
Parte D. No GDevelop (40 min)
- Na Trilha (ou numa cópia), edite o objeto
Castanha. Na animação, apague o quadro atual e use Adicione um sprite para colocar os 4 PNGs em ordem. - Marque a repetição (Repetição) e coloque o tempo entre quadros = 1 ÷ FPS anotado.
- Visualizar. Todas as 12 castanhas giram juntas, sem nenhum evento novo.
Imagens
exemplos/castanha-girando.gifeexemplos/castanha-girando-folha.png.
Indicação da interface
| Item (como aparece) | Tradução | Onde fica |
|---|---|---|
| Add new frame | novo quadro vazio | fim da coluna de quadros |
| Duplicate this frame / Delete this frame | duplicar / apagar quadro | ícones sobre cada quadro (aparecem com o mouse em cima) |
| Toggle onion skin (Alt+O) | casca de cebola | botões acima da prévia animada |
| 12 FPS | velocidade da prévia | controle da prévia, no alto à direita |
| Flip horizontally | espelhar | ferramentas de transformação |
| EXPORT → Zip → Download ZIP | um PNG por quadro | painel da direita |
| GDevelop: Adicione um sprite, Repetição | adicionar quadro, repetir | janela de edição do objeto, aba Propriedades |
O GDevelop também tem um botão Criar com Piskel na edição do objeto, que abre um Piskel integrado. O curso usa o Piskel do site, que foi o caminho testado.
O código completo
Nenhum evento novo. A animação é uma propriedade do objeto.
Explicação do código
Como a animação pertence ao objeto, todas as instâncias de Castanha passam a girar. É a diferença entre objeto e instância da Aula 3.4 aparecendo na arte.
Resultado esperado
Castanha girando em 4 quadros, suave, na velocidade escolhida, no Piskel e no GDevelop.
Problemas comuns
| Sintoma | Causa | Solução |
|---|---|---|
| A castanha "pula" de lugar ao girar | quadros fora do centro | casca de cebola para conferir; ferramenta Align image to the center (centralizar imagem) |
| Gira rápido demais no jogo | tempo entre quadros pequeno | tempo = 1 ÷ FPS |
| Só aparece o primeiro quadro | Repetição desligada ou quadros em animações diferentes | todos na mesma animação, repetição ligada |
| Quadros na ordem errada | nomes castanha0, castanha1... adicionados fora de ordem | adicionar na ordem dos números |
| Arquivo minúsculo | exportou com Scale 1 | escala 2 |
Exercício guiado
Com 4 quadros a 8 FPS, quanto tempo leva uma volta inteira? E qual é o tempo entre quadros no GDevelop? (Resposta: 4 ÷ 8 = 0,5 s; 1 ÷ 8 = 0,125 s.)
Desafio individual
Faça um brilho: um quinto quadro em que a castanha aparece com um pixel branco de reflexo. Onde ele entra na sequência para ficar bonito?
Desafio avançado (opcional)
Anime o calango com 4 quadros de andar em vez de 2. Compare as duas versões rodando no jogo.
Critérios de avaliação
- Quatro quadros alinhados, girando sem pular.
- Exportação em ZIP e folha; animação funcionando no GDevelop com tempo calculado.
Checklist de conclusão
Extensão
Faça um folioscópio de papel com 12 folhas: uma castanha girando ou um calango andando. Conte quantas folhas por segundo você consegue folhear.