Tutorial Phaser – Criando um RPG – Parte 2 – Utilizando sprites e criando um personagem

Tutorial Phaser – Este é o segundo artigo da série “Phaser para iniciantes”. No primeiro artigo (https://programandojuntos.com.br/phaser-para-iniciantes-parte-1/) criamos nosso primeiro mapa e agora nesse segundo artigo vamos criar nosso personagem e fazer ele aparecer no mapa.

Se você prefere acompanhar tudo em vídeo, temos também um canal no Youtube com esse mesmo conteúdo:

Arquivos necessários

Para poder seguir esse tutorial, será necessário realizar o download de 3 arquivos ‘.png’ que iremos utilizar para criar as animações do nosso personagem. Hospedei esses arquivos em um Drive pra ficar mais fácil o download: https://drive.google.com/drive/folders/1g08uuOC7NPEuxw-92CxraN4a_nsBYfGV?usp=sharing

Basta clicar no link acima e baixar todos os arquivos dessa pasta.

Após isso, dentro do projeto do nosso jogo, crie uma pasta chamada ‘player’ dentro de ‘dist/assets/’ e copie os arquivos baixados para dentro dessa pasta ‘player’ que você acabou de criar.

Carregando sprites do personage – Tutorial Phaser

Primeiramente vamos criar um arquivo ‘player.ts’ dentro da pasta ‘src’. Dentro desse arquivos iremos copiar o seguinte código:

export const loadSprites = (scene: Phaser.Scene): void => {
  // Essa função 'scene.load.spritesheet' é responsável por carregar os sprites na instância do Phaser.
  // Aqui iremos carregar a animação do personagem parado na tela.
  // O primeiro parâmetro 'player_idle' é o nome do índice que iremos dar a esse sprite carregado.
  // O segundo parâmetro é o caminho do sprite. Repare que aqui estamos utilizando a imagem que baixamos no passo anterior.
  scene.load.spritesheet("player_idle", "./assets/player/idle.png", {
    frameWidth: 83, // Largura do frame dessa animação
    frameHeight: 64, // altura do frame dessa animação
    spacing: 45, // O espaçamento em pixels entre um frame e outro. Se você abrir a imagem, vai reparar que os frames estão espaçados
  });

  // Essa função faz a mesma coisa que a de cima, porém carregando o sprite de 'caminhada' do personagem
  scene.load.spritesheet("player_walk", "./assets/player/walk.png", {
    frameWidth: 83,
    frameHeight: 64,
    spacing: 45,
  });

  // Essa função faz a mesma coisa que a de cima, porém carregando o sprite de 'ataque' do personagem
  scene.load.spritesheet("player_attack", "./assets/player/attack.png", {
    frameWidth: 83,
    frameHeight: 64,
    spacing: 45,
  });
};

Após isso os sprites estão carregados na instância do Phaser.

A seguir vamos configurar as animações do sprite do nosso personagem.

Configurando animação de sprite – Tutorial Phaser

Nessa etapa vamos transformar esses sprites em animações, dizendo ao Phaser quantas vezes o sprite será executado por segundo e outros detalhe assim.

Logo abaixo copie e cole o seguinte código no arquivo ‘player.ts’:

const createAnimations = (scene: Phaser.Scene): void => {
  // A função 'scene.anims.create' cria uma animação na instância do Phaser para podermos usar em qualquer momento do jogo.
  // Aqui iremos criar a animação do personagem parado
  scene.anims.create({
    key: "player_idle",
    frames: scene.anims.generateFrameNames("player_idle", {  // Aqui você informa qual sprite você está carregando. Nós configuramos esse nome na etapa anterior
      start: 0, // Em qual dos frames irá começar a executar a animação. Nesse caso escolhemos 0, mas poderia ser qualquer outro.
      end: 7, // Aqui em qual dos frames irá terminar a execução da animação.
    }),
    frameRate: 8, // Quantas frames serão apresentados por segundo. Aqui iremos exibir 8 frames por segundo.
    repeat: -1, // Quantas vezes a animação irá se repetir. Deixamos -1 para repetir infinitamente.
    yoyo: true, // Indica se a animação deve ser executada de traz pra frente também, como um yoyo, vai e volta.
  });

  // Faz a mesma coisa da função acima, mas cria a animação de 'caminhada'
  scene.anims.create({
    key: "player_walk",
    frames: scene.anims.generateFrameNames("player_walk", {
      start: 0,
      end: 6,
    }),
    frameRate: 8,
    repeat: -1,
  });

  // Faz a mesma coisa da função acima, mas cria a animação de 'ataque'
  scene.anims.create({
    key: "player_attack",
    frames: scene.anims.generateFrameNames("player_attack", {
      start: 0,
      end: 3,
    }),
    frameRate: 12,
    repeat: 0,
  });
};

Criando personagem

E finalmente iremos criar nosso personagem, para isso copie a seguinte função no mesmo arquivo ‘player.ts’:

export const createPlayer = (scene: Phaser.Scene) => {
  // Essa função adiciona um elemento no jogo usando um sprite. O sprite que vamos usar aqui é o 'player_idle'
  const player = scene.physics.add.sprite(200, 200, "player_idle");
  // chamamos a função implementada anteriormente para criar todas as animações para nosso personagem
  createAnimations(scene);
  return player;
};

Agora no arquivo ‘src/game.ts’ iremos importar duas funções criadas anteriormente:

import { createPlayer, loadSprites } from "./player";

Vamos criar a propriedade ‘player’ dentro da classe Demo, ficando assim:

import * as Phaser from "phaser";
import { createPlayer, loadSprites } from "./player";

export default class Demo extends Phaser.Scene {
  player;

  ...
  ...
  ...

Dentro da função ‘preload’, ainda no arquivo ‘src/game.ts’ iremos chamar a função para carregar os sprites do personagem, ficando assim:

preload() {
    this.load.image("tiles", "./assets/map/grass.png");
    this.load.image("border", "./assets/map/water.png");
    this.load.tilemapTiledJSON("map", "./assets/map/map.json");
    loadSprites(this);
}

Por último dentro da função ‘create’ vamos chame a função de criação de personagem, ficando assim:

create() {
    const map = this.make.tilemap({ key: "map" });
    const tilesetGrass = map.addTilesetImage("grass", "tiles");
    const tilesetWater = map.addTilesetImage("water", "border");
    const ground = map.createLayer("grass", tilesetGrass, 0, 0);
    const water = map.createLayer("water", tilesetWater, 0, 0);
    this.player = createPlayer(this);
 }

Desse modo podemos finalmente ver o personagem aparecendo no nosso mapa. Basta salvar todos os arquivos e acessar o endereço http://localhost:10001/ (que é o endereço onde está rodando nosso projeto)

Conclusão

Nesse Tutorial Phaser aprendemos como carregar e utilizar sprites dentro do Framework Phaser. E também aprendemos como criar um personagem na tela.