Configuração do Phaser

Voltar para: Games com Phaser + Reactjs

0

🎯 Objetivos da Aula

Nesta aula o aluno aprenderá a:

1️⃣ Instalar uma biblioteca usando npm
2️⃣ Criar a estrutura mínima de um jogo
3️⃣ Entender como o Phaser desenha na tela
4️⃣ Criar o primeiro jogo funcional

Mesmo sendo simples, essa estrutura é a base de praticamente todos os jogos feitos com Phaser.

1 Preparação do Projeto

Antes de instalar o Phaser, precisamos de um projeto JavaScript.

O método mais simples atualmente é usar Vite, que cria um ambiente de desenvolvimento rápido.

Criar o projeto

No terminal execute:

npm create vite@latest meu-jogo

Escolha:

Framework: Vanilla
Variant: JavaScript

Depois entre na pasta:

cd meu-jogo

Instale as dependências:

npm install

Agora a estrutura inicial será parecida com esta:

meu-jogo/
│
├─ index.html
├─ package.json
├─ vite.config.js
│
└─ src/
   ├─ main.js
   └─ style.css

Nesta aula vamos trabalhar principalmente dentro da pasta src.

2 Instalação do Phaser

O Phaser é uma biblioteca de criação de jogos em JavaScript.

Ele fornece:

🎮 sistema de renderização
🎮 física
🎮 sprites
🎮 áudio
🎮 cenas

Para instalar execute no terminal:

npm install phaser

O npm irá baixar o Phaser e colocar dentro da pasta:

node_modules/

Essa pasta contém todas as bibliotecas do projeto.

3 Importando o Phaser no Projeto

Agora precisamos dizer ao JavaScript que queremos usar o Phaser.

Isso é feito com importação de módulo.

Dentro de um arquivo JavaScript escrevemos:

import Phaser from "phaser";

Isso significa:

“Importe a biblioteca Phaser que está dentro do node_modules”.

4 Organização dos Arquivos do Jogo

Para evitar bagunça, vamos separar responsabilidades.

Estrutura recomendada

src/
│
├── main.js
└── game.js

Função de cada arquivo

ArquivoFunção
main.jsArquivo principal do projeto
game.jsArquivo onde o jogo é configurado

5 Criando o Arquivo do Jogo

Agora o aluno deve criar manualmente um novo arquivo.

📁 Local

src/game.js

No VSCode:

src → botão direito → New File → game.js

6 Estrutura Inicial do game.js

Dentro de game.js escreva:

import Phaser from "phaser";

Esse comando importa o motor do jogo.

7 O que é o Game Config

O Phaser precisa de um objeto de configuração para iniciar o jogo.

Esse objeto define:

  • tamanho da tela
  • tipo de renderização
  • cor de fundo
  • quais cenas serão usadas

Exemplo:

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: "#000000",
};

Explicação detalhada das propriedades

type

Define como o jogo será desenhado na tela.

type: Phaser.AUTO

O Phaser tentará usar WebGL primeiro.

Se o navegador não suportar, ele usa Canvas.

width

Define a largura da tela do jogo.

width: 800

Isso significa:

800 pixels de largura

height

Define a altura da tela.

height: 600

Resultado:

800 x 600 pixels

backgroundColor

Define a cor de fundo.

"#000000"

Significa preto.

8 Canvas vs WebGL

O Phaser pode desenhar na tela de duas formas.

Canvas

O Canvas API é uma tecnologia do navegador que permite desenhar pixels.

Características:

✔ simples
✔ compatível com quase todos navegadores
❌ menos performance

WebGL

WebGL usa a placa de vídeo (GPU).

Características:

✔ muito mais rápido
✔ suporta milhares de sprites
✔ efeitos gráficos

Como o Phaser escolhe

Quando usamos:

type: Phaser.AUTO

O Phaser executa:

se WebGL existir → usar WebGL
senão → usar Canvas

Isso torna o jogo compatível com mais dispositivos.

9 O Ciclo de Vida de uma Cena

Todo jogo em Phaser é dividido em Scenes (cenas).

Cada cena possui três funções principais.

preload()
create()
update()

preload()

Usado para carregar arquivos do jogo.

Exemplos:

  • imagens
  • sons
  • sprites

Exemplo:

function preload() {
  this.load.image("player", "player.png");
}

create()

Executado uma única vez quando a cena começa.

Aqui criamos:

  • personagens
  • textos
  • objetos
  • cenário

update()

Executado a cada frame.

Se o jogo roda a 60 FPS:

update() roda 60 vezes por segundo

Serve para:

  • mover personagens
  • detectar colisões
  • atualizar lógica do jogo

10 Criando a Primeira Scene

No arquivo:

src/game.js

Adicione:

function create() {
  this.add.text(400, 300, "Meu Primeiro Jogo", {
    fontSize: "32px",
    color: "#ffffff"
  }).setOrigin(0.5);
}

Explicação desse código

this.add.text()

Cria um texto na tela.

this.add.text(x, y, texto, estilo)

posição

400, 300

Isso coloca o texto no centro da tela.

Porque:

largura = 800
altura = 600

Centro:

800 / 2 = 400
600 / 2 = 300

estilo

{
  fontSize: "32px",
  color: "#ffffff"
}

Define:

  • tamanho da fonte
  • cor

setOrigin(0.5)

Centraliza o texto.

Sem isso, o Phaser posicionaria o texto pelo canto superior esquerdo.

11 Adicionando a Scene no Config

Agora conectamos a função create ao jogo.

Dentro do objeto config:

scene: {
  create
}

12 Criando o Jogo

Depois do config adicionamos:

const game = new Phaser.Game(config);

Isso faz o Phaser:

1️⃣ criar o canvas
2️⃣ iniciar o motor
3️⃣ executar a cena

13 Código Completo de game.js

Arquivo:

src/game.js
import Phaser from "phaser";function create() {
  this.add.text(400, 300, "Meu Primeiro Jogo", {
    fontSize: "32px",
    color: "#ffffff"
  }).setOrigin(0.5);
}const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: "#1e3a8a",
  scene: {
    create
  }
};const game = new Phaser.Game(config);export default game;

14 Arquivo main.js

Agora precisamos executar o jogo quando o site carregar.

Abra:

src/main.js

Apague tudo e deixe apenas:

import "./game";

Isso significa:

execute o arquivo game.js.

15 Executando o Projeto

No terminal rode:

npm run dev

O Vite iniciará o servidor.

Normalmente em:

http://localhost:5173

16 Resultado Esperado

O navegador mostrará:

🟦 fundo azul
📝 texto no centro

Meu Primeiro Jogo

17 Estrutura Final do Projeto

meu-jogo/
│
├─ index.html
├─ package.json
│
└─ src/
   │
   ├─ main.js
   └─ game.js

🧠 Conceitos Fixados

O aluno praticou:

✔ instalação de biblioteca
✔ importação de módulo
✔ configuração de motor de jogo
✔ estrutura de cena
✔ renderização básica

🧪 Exercícios para Fixação

1️⃣ Mudar cor do fundo

Exemplo:

backgroundColor: "#ff0000"

2️⃣ Alterar texto

"Meu Primeiro Jogo"

para

"Phaser funcionando!"

3️⃣ Adicionar outro texto

this.add.text(400, 350, "Aula 1", {
  fontSize: "20px",
  color: "#ffff00"
}).setOrigin(0.5);

4️⃣ Fazer texto piscar usando update()

(Desafio de lógica)

🎮 Conclusão

Esse pequeno projeto é o equivalente a ligar o motor de um carro pela primeira vez.

Ainda não existe:

  • personagem
  • movimento
  • colisão
  • física

Mas agora existe algo fundamental:

🔥 Um motor de jogo funcionando.

Nos próximos passos os alunos aprenderão:

sistemas de jogo

sprites

input do teclado

física

múltiplas cenas

HUD