Making your first Phaser 3 game

Temos algumas plataformas prontas para uso, mas ningu├®m para correr nelas. Vamos corrigir isso.

Crie uma nova vari├ível chamada player e adicione o seguinte c├│digo ├á fun├º├úo create. Voc├¬ pode encontrar em part5.html:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

H├í duas coisas diferentes acontecendo aqui: a cria├º├úo de um Physics Sprite e a cria├º├úo de umas anima├º├Áes que ele pode utilizar.

Sprite com Física

A primeira parte do c├│digo cria o sprite:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

Isso cria um novo sprite chamado player, posicionado a 100 x 450 pixels da parte inferior do jogo. O sprite foi criado atrav├®s do Factory Physics Game Object (this.physics.add), que significa que ele possui um corpo de F├¡sica din├ómico por padr├úo.

Depois de criar o sprite, ├® dado um leve fator de ressalto de 0,2. Isto significa que quando aterrissar depois de pular, ele saltar├í muito levemente. O sprite ├® ent├úo definido para colidir com os limites do mundo do jogo. Os limites, por padr├úo, est├úo do lado de fora das dimens├Áes do jogo. Como definimos o jogo como sendo 800 x 600, o jogador n├úo poder├í correr fora desta ├írea. Isso impedir├í que o player saia das bordas da tela ou salte pela parte superior.

Anima├º├Áes

Voltando sua aten├º├úo para a fun├º├úo preload, ver├í que o personagem 'dude' foi carregado como uma sprite sheet, n├úo uma imagem. Isso ├® porque cont├®m quadros de anima├º├úo. ├ë assim que o sprite sheet completo se parece:

Há 9 quadros no total, 4 para correr à esquerda, 1 para olhar para a câmera e 4 para correr à direita. Nota: O Phaser suporta virar os sprites para salvar quadros de animação, mas, para este tutorial, vamos mantê-lo no modo antigo.

N├│s definimos duas anima├º├Áes chamadas 'left' e 'right'. Aqui est├í a anima├º├úo da esquerda:

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

A animação 'left' usa quadros 0, 1, 2 e 3 e roda a 10 quadros por segundo. O valor 'repeat -1' diz para a animação fazer um loop.

Este ├® o nosso ciclo de corrida padr├úo e o repetimos para correr na dire├º├úo oposta, usando a tecla 'direita'.

Informa├º├úo Extra: No Phaser 3, o Animation Manager ├® um sistema global. Anima├º├Áes criadas dentro dele est├úo dispon├¡veis globalmente para todos os Objetos do Jogo. Eles compartilham os dados b├ísicos de anima├º├úo enquanto gerenciam suas pr├│prias timelines. Isso permite definir uma ├║nica anima├º├úo uma vez e aplic├í-la a quantos Objetos forem necess├írios. Isso ├® diferente do Phaser 2, no qual as anima├º├Áes pertenciam especificamente aos Objetos em que foram criados.