O Phaser.js é um framework robusto para o desenvolvimento de jogos 2D utilizando JavaScript. Ele oferece uma ampla variedade de recursos, desde a criação de cenários até a manipulação de física e animações. Neste guia, exploraremos os conceitos fundamentais do desenvolvimento de jogos 2D com Phaser.js.
1. Instalação do Phaser.js:
Para começar, você pode baixar o Phaser.js diretamente do site oficial do Phaser ou incluí-lo em seu projeto através de gerenciadores de pacotes como npm ou yarn:
npm install phaser
2. Configuração do Projeto:
Crie um arquivo HTML básico e inclua o script do Phaser.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Jogo Phaser</title>
</head>
<body>
<script src="caminho-para/phaser.js"></script>
<script src="caminho-para/main.js"></script>
</body>
</html>
3. Estrutura Básica do Jogo:
Crie um arquivo main.js para configurar o jogo:
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload() {
// Carregue recursos como imagens, áudio, etc.
}
function create() {
// Configure elementos do jogo
}
function update() {
// Atualize a lógica do jogo
}
4. Sprites e Animações:
4.1. Carregando Sprites:
function preload() {
this.load.image('background', 'caminho-para/background.png');
this.load.spritesheet('player', 'caminho-para/player.png', { frameWidth: 32, frameHeight: 48 });
}
4.2. Criando Sprites:
let player;
function create() {
this.add.image(400, 300, 'background');
player = this.physics.add.sprite(100, 450, 'player');
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
}
5. Controles do Jogador:
function update() {
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);
} else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);
} else {
player.setVelocityX(0);
player.anims.stop();
player.setFrame(4);
}
}
6. Adicionando Colisões e Elementos Interativos:
function create() {
// ...
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
this.physics.add.collider(player, platforms);
}
7. Física e Grupos:
function create() {
// ...
const stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, collectStar, null, this);
}
8. Lógica do Jogo:
let score = 0;
let scoreText;
function create() {
// ...
scoreText = this.add.text(16, 16, 'Pontuação: 0', { fontSize: '32px', fill: '#fff' });
}
function collectStar(player, star) {
star.disableBody(true, true);
score += 10;
scoreText.setText('Pontuação: ' + score);
}
Conclusão:
O Phaser.js oferece uma base sólida para o desenvolvimento de jogos 2D em JavaScript. Este guia abrange conceitos básicos, mas há muito mais recursos e funcionalidades para explorar. Referencie a documentação oficial do Phaser para aprofundar seu conhecimento e desenvolver jogos mais complexos e envolventes. Experimente e divirta-se criando seus próprios jogos 2D interativos!