Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

Ao final da aula, o aluno será capaz de:

• Adicionar sprites ao jogo
• Utilizar Arcade Physics
• Detectar colisões
• Implementar movimentação com teclado

---

🖼️ Parte 1 – Adição de Sprites

4

Sprites são imagens exibidas na tela que podem se mover e interagir.

🔹 Carregar imagem (preload)

preload() {
  this.load.image("player", "assets/player.png");
  this.load.image("obstacle", "assets/obstacle.png");
}

---

🔹 Adicionar sprite (create)

create() {
  this.player = this.add.sprite(400, 300, "player");
}

Mas isso ainda não possui física.

---

⚙️ Parte 2 – Arcade Physics

Ativar física na configuração:

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {
      debug: false
    }
  },
  scene: [GameScene]
};

Agora podemos criar sprite com física:

this.player = this.physics.add.sprite(400, 300, "player");

Isso adiciona:

• Velocidade
• Gravidade (se configurada)
• Colisão

---

⌨️ Parte 3 – Movimento com Teclado

🔹 Criar controles

create() {
  this.player = this.physics.add.sprite(400, 300, "player");
  this.cursors = this.input.keyboard.createCursorKeys();
}

---

🔹 Movimentação no update()

update() {
  this.player.setVelocity(0);  if (this.cursors.left.isDown) {
    this.player.setVelocityX(-200);
  }
  else if (this.cursors.right.isDown) {
    this.player.setVelocityX(200);
  }  if (this.cursors.up.isDown) {
    this.player.setVelocityY(-200);
  }
  else if (this.cursors.down.isDown) {
    this.player.setVelocityY(200);
  }
}

Agora o personagem se move livremente.

---

💥 Parte 4 – Colisão

Criar obstáculo:

create() {
  this.player = this.physics.add.sprite(400, 300, "player");  this.obstacle = this.physics.add.staticSprite(400, 100, "obstacle");  this.physics.add.collider(this.player, this.obstacle);
}

🔹 Diferença

• physics.add.sprite() → objeto dinâmico
• physics.add.staticSprite() → objeto fixo

Colisão impede atravessar.

---

🎯 Atividade Prática

Criar Personagem Controlável com Obstáculo

---

📁 Estrutura sugerida

src/
 ├── scenes/
 │     └── GameScene.js
 └── main.js

---

🧩 GameScene.js Completo

import Phaser from "phaser";export default class GameScene extends Phaser.Scene {
  constructor() {
    super("GameScene");
  }  preload() {
    this.load.image("player", "assets/player.png");
    this.load.image("obstacle", "assets/obstacle.png");
  }  create() {
    this.player = this.physics.add.sprite(400, 500, "player");    this.obstacle = this.physics.add.staticSprite(400, 300, "obstacle");    this.physics.add.collider(this.player, this.obstacle);    this.cursors = this.input.keyboard.createCursorKeys();
  }  update() {
    this.player.setVelocity(0);    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-200);
    }
    else if (this.cursors.right.isDown) {
      this.player.setVelocityX(200);
    }    if (this.cursors.up.isDown) {
      this.player.setVelocityY(-200);
    }
    else if (this.cursors.down.isDown) {
      this.player.setVelocityY(200);
    }
  }
}

---

🧠 Conceitos Trabalhados

• Carregamento de assets
• Arcade Physics
• Objetos dinâmicos vs estáticos
• Detecção de colisão
• Controle via teclado
• Loop contínuo com update()

---

📝 Critérios de Avaliação

Critério	Peso
Sprite carregado corretamente	2
Física ativada	2
Movimento funcional	2
Colisão funcionando	2
Organização do código	2

Total: 10 pontos

---

🚀 Desafio Extra

• Adicionar gravidade
• Criar múltiplos obstáculos
• Implementar área de limite do mapa
• Adicionar animação ao mover
• Criar sistema de “vida” ao colidir

---

🎮 Conclusão

Agora existe algo vivo dentro do jogo.

Teclas pressionadas produzem movimento.
Objetos bloqueiam passagem.
Existe espaço. Existe regra. Existe interação.