Phaser

Biblioteca para programação de jogos 2D para a web.

Links importantes:

Site: http://phaser.io/
Configuração: https://phaser.io/tutorials/getting-started
Tutorial inicial: https://phaser.io/tutorials/making-your-first-phaser-game
Vários exemplos: https://phaser.io/examples
Referências:
- API navegável: http://phaser.io/docs/2.6.2/index
- Busca de API: http://phaser.io/learn/chains

Exemplo básico

Crie um arquivo .html com o seguinte conteúdo.

<!DOCTYPE html>
<html>
<head>
  <title>Indigente</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
</head>
<body>

<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
}

function create() {
}

function update() {
}
</script>

</body>
</html>

Servidor web

Abra um terminal no diretório do arquivo .html e digite o seguinte:

python -m SimpleHTTPServer 8000

Então acesse o endereço http://localhost:8000/

preload, create e update

Você vai escrever seu programa dentro das funções preload, create e update:

Na função preload, fica o código de carregamento de arquivos (imagens, sons, mapas etc.)
Na função create, fica o código de preparação do jogo (criar e posicionar objetos do jogo)
Na função update fica a lógica executada a cada quadro, dezenas de vezes por segundo.

Imagem estática

function preload() {
  game.load.image('einstein', 'assets/pics/ra_einstein.png');
}

function create() {
  game.add.sprite(0, 0, 'einstein');
}

https://phaser.io/examples/v2/basics/01-load-an-image

Movimentação

function preload() {
  game.load.image('einstein', 'assets/pics/ra_einstein.png');
}

function create() {
  player = game.add.sprite(0, 0, 'einstein');
}

function update() {
  player.x = player.x + 1;
}

Um sprite possui atributos como x, y, centerX, centerY, width, height e rotation.

Teclas + update

function create() {
  btnFire = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}

function update() {
  if (btnFire.justDown) {
    // executado uma vez, logo que pressiona
  }
  if (btnFire.isDown) {
    // executando enquanto botão estiver pressionado
  }
}

Cursores

function create() {
  cursors = game.input.keyboard.createCursorKeys();
  /*
    Equivalente a
    cursors = {
      left: game.input.keyboard.addKey(Phaser.Keyboard.LEFT),
      right: game.input..........
    }
  */
}

Outra forma de lidar com teclas

function create() {
  btnFire = game.input.keyboard.addKey(Phaser.Keyboard.SPACE);
  btnFire.onDown.add(fire)
}

function fire() {
  // ...
}

Texto na tela

var speed = 1.0 / 3.0;
text = game.add.text(0, 0, "Velocidade: ", {fill: '#ffffff'});
text.setText("Velocidade: " + speed.toFixed(2));

Rotação do jogador

player = game.add.sprite(400, 300, 'ship');
player.pivot.set(player.width / 2, player.height / 2);
player.rotation = Math.PI / 4;

rodrigorgs/phaser.md