Phaser 3 para Iniciantes: Como Criar Seu Primeiro Jogo

#JavaScript

O que é o Phaser 3

Phaser 3 é uma ferramenta super legal que ajuda você a criar seus próprios jogos utilizando apenas HTML e javascript! Pense nele como uma caixa de brinquedos cheia de peças e ferramentas para montar mundos, personagens e aventuras. É como se fosse um LEGO digital, mas em vez de peças, você usa código. Muitos jogos incríveis foram feitos com Phaser 3 porque ele é fácil de usar, apesar de ser um pouco limitado em relação a game engines como a Unity, é uma ótima alternativa para quem quer desenvolver jogos e treinar sua lógica de programação!

Como instalar o Phaser 3

Para começar a brincar com Phaser 3, primeiro você precisa instalar algumas coisas no seu computador. Primeiro, baixe uma IDE de sua escolha, como o Visual Studio Code por exemplo. Depois, você pode baixar o Phaser 3 no site oficial phaser.io ou usar um gerenciador de pacotes como o npm. É super simples, e em poucos cliques, você estará pronto para começar!

Como desenvolver um projeto pequeno com o Phaser 3

Vamos fazer um joguinho simples! Primeiro, crie um arquivo chamado index.html. Dentro dele, coloque o seguinte código:

<!DOCTYPE html>
<html>
<head>
  <title>Meu Primeiro Jogo Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
  <script src="game.js"></script>
</head>
<body>
</body>
</html>

Depois, crie um arquivo chamado game.js e adicione este código:

Configuração do Jogo;

const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
  preload: preload,
  create: create,
  update: update
}
};


const game = new Phaser.Game(config);

type: Phaser.AUTO: Phaser decide automaticamente se vai usar WebGL ou Canvas para renderizar o jogo, dependendo do que o navegador suporta.

width e height: A largura e altura do jogo em pixels.

scene: Define as três funções principais que Phaser usa: preload, create e update.

Função Preload

function preload() {
this.load.image('sky', 'https://examples.phaser.io/assets/skies/space3.png');
this.load.image('star', 'https://examples.phaser.io/assets/demoscene/star.png');
this.load.image('ground', 'https://examples.phaser.io/assets/sprites/platform.png');
this.load.spritesheet('dude', 'https://examples.phaser.io/assets/sprites/dude.png', { frameWidth: 32, frameHeight: 48 });
}

this.load.image: Carrega imagens que serão usadas no jogo.

'sky', 'star', 'ground', 'dude': Identificadores únicos para cada imagem.
URLs das imagens: Onde as imagens estão armazenadas na internet.

this.load.spritesheet: Carrega uma folha de sprites, que é uma imagem contendo várias frames de animações.

'dude': Identificador do sprite.
{ frameWidth: 32, frameHeight: 48 }: Define o tamanho de cada frame na folha de sprites.

Função Create

function create() {
this.add.image(400, 300, 'sky');

const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

const 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
});

this.physics.add.collider(player, platforms);

this.input.keyboard.on('keydown-LEFT', function(event) {
  player.setVelocityX(-160);
  player.anims.play('left', true);
});

this.input.keyboard.on('keydown-RIGHT', function(event) {
  player.setVelocityX(160);
  player.anims.play('right', true);
});

this.input.keyboard.on('keydown-UP', function(event) {
  if (player.body.touching.down) {
    player.setVelocityY(-330);
  }
});
}

this.add.image: Adiciona uma imagem ao jogo.

400, 300: Posição da imagem no canvas.
'sky': Identificador da imagem.

const platforms = this.physics.add.staticGroup(): Cria um grupo de plataformas estáticas.

staticGroup: As plataformas não se movem.

platforms.create: Adiciona plataformas ao grupo.

setScale(2).refreshBody(): Ajusta o tamanho da plataforma e atualiza seu corpo físico.

const player = this.physics.add.sprite: Cria o jogador com física.

setBounce(0.2): Define a quantidade de quicada do jogador.
setCollideWorldBounds(true): Faz o jogador colidir com as bordas do mundo.

Animações do jogador:

this.anims.create: Cria animações para o jogador.
frames: this.anims.generateFrameNumbers: Define quais frames usar para a animação.

this.physics.add.collider(player, platforms): Faz o jogador colidir com as plataformas.

Eventos de teclado:

this.input.keyboard.on: Configura eventos de teclado para mover o jogador.
keydown-LEFT, keydown-RIGHT, keydown-UP: Eventos de teclas específicas.
setVelocityX, setVelocityY: Define a velocidade do jogador.

Função Update

function update() {
if (this.input.keyboard.checkDown(this.input.keyboard.addKey('LEFT'), 150)) {
  this.input.keyboard.emit('keydown-LEFT');
} else if (this.input.keyboard.checkDown(this.input.keyboard.addKey('RIGHT'), 150)) {
  this.input.keyboard.emit('keydown-RIGHT');
} else {
  this.input.keyboard.emit('keydown-UP');
}
}

this.input.keyboard.checkDown: Verifica se uma tecla está pressionada.

this.input.keyboard.emit: Emite o evento de tecla correspondente.

Usando o Phaser Localmente

Se você preferir usar Phaser localmente, siga estes passos:

Baixe o Phaser: Vá até o site oficial e baixe o Phaser.
Crie uma Estrutura de Pastas:

Crie uma pasta chamada meuJogo.
Dentro dela, crie uma pasta chamada js e coloque o arquivo phaser.js que você baixou.
Crie o arquivo index.html na raiz da pasta meuJogo.

Modifique o index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Meu Primeiro Jogo Phaser</title>
  <script src="js/phaser.js"></script>
  <script src="game.js"></script>
</head>
<body>
</body>
</html>

Crie o game.js com o código do jogo que desenvolvemos acima.

Agora abra o index.html no seu navegador e você verá seu primeiro jogo Phaser com um fundo de céu! Fácil, né?

Resumo do Jogo Criado

Neste projeto com Phaser 3, criamos um jogo simples onde um personagem pode se mover e pular em plataformas. Aqui está um resumo do que o jogo inclui:

Fundo:

Um fundo estático com uma imagem de céu.

Plataformas:

Várias plataformas estáticas colocadas em diferentes posições no jogo.
O personagem pode andar e pular sobre essas plataformas.

Personagem:

Um personagem animado que pode se mover para a esquerda e para a direita e pular.
O personagem tem três animações: mover para a esquerda, mover para a direita, e ficar parado.

Controles:

Teclas de seta (esquerda, direita e para cima) controlam o movimento do personagem.
O personagem pode pular quando está no chão.

Colisões:

O personagem colide com as bordas do mundo e com as plataformas, evitando que ele caia fora da tela ou atravesse as plataformas.

👌Curtiu esse conteúdo ? Ele foi gerado por inteligência artificial, mas foi revisado por alguém 100% Humano, e se quiser se conectar comigo, me siga no Linkedin

⚒️Ferrramentas de produção:

Imagens geradas por: I.A. Microsoft Copilot

Editor de imagem: Google Apresentações

Conteúdo gerado por: ChatGPT

Revisões Humanas: Vitor Lucas

#GameDevelopment #Javascript #Phaser3 #LearnToCode