Navegação:

Criando Animações

Animação no Phaser

A animação funciona mostrando um conjunto de imagens, uma após a outra, muito rapidamente.
Quando isso acontece, nosso cérebro entende como se fosse movimento. É como se estivéssemos “enganando” a mente para pensar que esse conjunto de imagens é um único objeto em movimento.

animation

Usamos spritesheets para coisas que queremos animar, pois podemos criar a animação passando rapidamente por cada quadro da spritesheet.
Para animar spritesheets, precisamos seguir dois passos.

O primeiro passo é criar as “instruções” para a animação:

this.anims.create({
    key: "dude_anim",
	frames: this.anims.generateFrameNumbers("dude"),
	frameRate: 10,
	repeat: -1
});

Isso cria uma animação chamada "dude_anim" que funciona sobre o "dude".

frameRate é a velocidade da animação.
repeat indica quantas vezes a animação se repete. Um número negativo significa que ela se repete infinitamente.

O segundo passo é simplesmente dizer para o jogo executar a animação que definimos. Isso também pode ser feito no create():

this.dude.anims.play("dude_anim");

Ao fazer essa chamada, ela precisa vir depois da linha onde o dude é colocado na tela, pois o código é lido de cima para baixo.
Se colocarmos o comando antes, o computador não saberá o que animar.

Tente animar o dude da última lição. Brinque com os valores e veja como eles mudam o resultado final.

Abrir Replit