Oficina: Games com Javascript

Phaser.io

O Phaser é um framework para criar games 2D em HTML5 e Javascript que suporta renderização de Canvas e WebGL.

O que vamos construir

https://daliannyvieira.github.io/hello-phaser/

Baixe os arquivos iniciais

git clone https://github.com/daliannyvieira/hello-phaser.git

cd hello-phaser

Crie um package.json

npm init

Instale as dependências

npm install --save phaser

npm install --save-dev httpserver

Modifique o package.json

  "scripts": {
    "dev": "httpserver --port 8000"
  }

Crie o index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Games com JS</title>
</head>
<body>
    <script 
        type="text/javascript"
        src="assets/js/phaser.min.js">
    </script>
    <script
        type="text/javascript"
        src="assets/js/main.js">
    </script>
</body>
</html>

Hora de rodar!

npm run dev

var config = {
    type: Phaser.AUTO,
    width: null,
    height: null
};

var game = new Phaser.Game(config);

Criando um jogo

var config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight
};

var game = new Phaser.Game(config);

Criando um jogo

var config = {
  ...
  backgroundColor: '#b3e6ff',
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 }
    }
  }
  ...
};

var game = new Phaser.Game(config);

Criando um jogo

var config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    scene: {
        preload: null,
        create: null,
        update: null
    }
};

var game = new Phaser.Game(config);

A cena

var config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

A cena

function preload () {
 
}

Preload

Carrega todos os recursos visuais e sonoros que podem ser implementados no jogo.

function create () {
 
}

Create

Os elementos do jogo são configurados. Aqui é onde colocamos toda a lógica do jogo.

function update () {
 
}

Update

Aqui podemos sempre atualizar o estado do jogo, como por exemplo a movimentação dos personagens.

function preload () {
  this.load.image('sky', 'assets/sprites/sky.png');
  this.load.image('ground', 'assets/sprites/platform.png');
  this.load.image('star', 'assets/sprites/star.png');
}

Adicionando imagens

function preload () {
  ...
  this.load.atlas(
    'hamtaro',
    'assets/sprites/hamham.png',
    'assets/sprites/hamtaro.json'
  )
}

Adicionando imagens

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

Adicionando imagens

function create () {
  ...
  piso = this.physics.add.staticGroup();
  piso.create(0, 968, 'ground').setScale(3).refreshBody();
  piso.create(700, 400, 'ground');
}

Adicionando o piso

function create () {
  ...
  personagem = this.physics.add.sprite(400, 400, 'hamtaro')
  personagem.setBounce(0.2);
  personagem.setCollideWorldBounds(true);
}

Adicionando o personagem

function create () {
  ...
  estrelas = this.physics.add.group({
    key: 'star',
    repeat: 20,
    setXY: { x: 30, y: 0, stepX: 75 }
  });
}

Adicionando um grupo de itens

function create () {
  ...
  titulo = this.add.text(100, 50, 'Hamtarooo!', { 
    fontFamily: 'Arial',
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white'
  })
}

Adicionando textos

function create () {
  cursors = this.input.keyboard.createCursorKeys();
}

Adicionando cursores

function update () {
  if (cursors.left.isDown) {
    personagem.setVelocityX(-160);
  }
  else if (cursors.right.isDown) {
    personagem.setVelocityX(160);
  }
  else if (cursors.up.isDown && personagem.body.touching.down) {
    personagem.setVelocityY(-460);
  }
  else {
    personagem.setVelocityX(0);
  }
}

Adicionando cursores

function create () {
  ...
  this.physics.add.collider(personagem, piso);
  this.physics.add.collider(estrelas, piso);
}

Criando colisões

function create () {
  ...
  this.anims.create({ 
    key: 'esquerda', 
    frames: this.anims.generateFrameNames('hamtaro', { 
        prefix: 'hamtaro_', 
        start: 4,
        end: 6            
    }),
    repeat: -1,
    duration: 300
  });

  this.anims.create({ 
    key: 'direita', 
    frames: this.anims.generateFrameNames('hamtaro', { 
        prefix: 'hamtaro_', 
        start: 1,
        end: 3            
    }),
    repeat: -1,
    duration: 300
  });

  this.anims.create({ 
    key: 'parado', 
    frames: this.anims.generateFrameNames('hamtaro', { 
      prefix: 'hamtaro_', 
      start: 11,
      end: 12
    }),
    repeat: -1,
    duration: 300
  });
}

Adicionando animações

function update () {
  if (cursors.left.isDown) {
    personagem.setVelocityX(-160);
    personagem.anims.play('esquerda', true);
  }
  else if (cursors.right.isDown) {
    personagem.setVelocityX(160);
    personagem.anims.play('direita', true);
  }
  else if (cursors.up.isDown && personagem.body.touching.down) {
    personagem.setVelocityY(-460);
  }
  else {
    personagem.setVelocityX(0);
    personagem.anims.play('parado');
  }
}

Adicionando animações

function create () {
  ...
  this.physics.add.overlap(
      personagem,
      estrelas,
      pegarEstrela,
      null,
      this
  );
}

Coletando itens

function pegarEstrela (personagem, star) {
  star.disableBody(true, true);
}

Coletando itens

Como podemos melhorar esse game?

Referências

http://phaser.io/tutorials

https://github.com/JsLadiesBR/tutorial

https://gamedevelopment.tutsplus.com/pt/articles/how-to-learn-the-phaser-html5-game-engine--gamedev-13643