ADICIONAR UM

2
RODAPÉ
▪ É um conjunto de sprites agrupados
em um único arquivo, que
representam um conjunto lógico de
imagens para uma animação, por
exemplo: Inimigos, Frutas ou Doces.

3
Professora Alessandra Aparecida da Silva
• Os recursos (chamados de assets, em inglês) representam as mídias
usadas no jogo, como imagens, spritesheets, áudios e vídeos. Dentre
eles, as spritesheets são muito utilizadas em desenvolvimento de
jogos.
• As imagens do spritesheet são usadas para representar as diversas
posições de um personagem.
• As imagens possuem transparência (formato PNG).
• Cada imagem do spritesheet deve apresentar uma similaridade na
dimensão em pixels, para se possamos manter padrão para que o
carregamento utilizado a seguir funcione.

4
Para carregar um spritesheet, usamos o método:
game.load.spritesheet(‘nomeInterno’,’percursoArquivo’,dimX,dimY);

Onde, dimX e dimY referem-se as dimensões em pixel de largura e altura

de cada elemento.

5
 Índices de
0 1 2 3 um sprite

6
Podemos criar objetos de tipo sprite indicando o índice de posição da
imagem que queremos utilizer:

Sprite = game.add.sprite(x, y, ‘nomeInterno’,indice);

banana = game.add.sprite(50, 50, ‘frutas’,1);
pessego = game.add.sprite(100, 100, ‘frutas’,3);

0 1 2 3 4

5 6 7 8 9
Se o spritesheet contém gráficos de animação, cada elemento é chamado
de frame – Quadro.

Sprite.animations.add(‘nomeAnimação’,[frames],frameRate, repetição);

Onde:
[frames] → array com índices dos elementos que compõem a animação;
frameRate → número de frames por Segundo, que se não informado segue o
padrão de 60;
repetição → valor booleano que indica se a animação deve ou não repetida. 8
9
Agora que sabemos o que é um spritesheet,
vamos aprender a converter uma imagem .gif
em um spritesheet! Observe os processos
abaixo e assista a videoaula a seguir:
2. Em Upload image
1. Acesse o site from your computer,
3. Clique no botão
https://ezgif.com/gif- clique em ficheiro
Upload
to-sprite para escolher a sua
imagem .gif

6. Para finalizar
4. Espere o
clique no ícone Save 5. Clique no botão
carregamento
para fazer o “Convert to Sprite
completo da sua
download do seu Sheet!”
imagem
spritesheet.

10
11
Fonte: https://youtu.be/5Yfe4fIQsBw
12
Canal: Alessandra Silva
Imagem borboletas.gif
Largura: 201px, Altura: 103px e Frames: 14
13
Spritesheet da imagem borboletas.gif
Largura: 1005px, Altura: 309px e Frames: 14
14
15
 No arquivo index.html
incluiremos a biblioteca da
phaser.min.js, conforme
podemos verificar na linha 10.

16
 17

Professora Alessandra Aparecida da Silva

 Agora, fiquem atentos ao arquivo
main.js que está com muitas
linhas novas de códigos! Somente
serão explicadas as novas linhas
de código.

Retome os estudos anteriores,

caso seja necessário recordar um
comando já estudado!

18
Linha Explicação do código
7 O spritesheet ssborboletas.png é carregado através do método
19
game.load.spritesheet e terá a dimensão em pixels de 201 de largura e 103 de altura.
Professora Alessandra Aparecida da Silva
 20

Professora Alessandra Aparecida da Silva

Linha Explicação do código
37 Nas linhas 38 a 41, é criado nosso sprite borboletas, é colocado ancora no
centro e aumentamos um pouco o tamanho.
Na linha 41 é criada a animação voar utilizando os 14 frames e com tempo de
animação 5 frames por segundo.
21

Professora Alessandra Aparecida da Silva

Linha Explicação do código
50 É executado a animação voar que ficará em um laço infinito.

22

Professora Alessandra Aparecida da Silva

 Enfim, terminamos! Ufa! Foram
várias linhas novas de códigos,
mas não se preocupem! Eu
deixei o projeto parcialmente
completo disponível para vocês
em Arquivos.

Bora, fazer o download e testar!

23

Professora Alessandra Aparecida da Silva

ADICIONAR UM
24
RODAPÉ
 Nessa etapa da aula, vamos aprender a
animar sprites.

Prestem bastante atenção na explicação

da professora e faça em seu caderno as
anotações que julgarem importantes e
necessárias.

25

Professora Alessandra Aparecida da Silva

26
27
28
 • Não deixe de realizar as atividades
dentro dos prazos propostos.
• Atenção na digitação.
• Evite o acumulo de atividades
pendentes.
• Atenção na digitação.
• Inicie as atividades de programação o
quanto antes.
• Atenção na digitação.
29

Professora Alessandra Aparecida da Silva