Criando jogos com Phaser JS

Oficina de criação de jogos utilizando o framework Phaser JS.

Transcript

1. Criação de Jogos Criando meu primeiro jogo com HTML + CSS + JS
2. Guto Xavier • Formado em Análise de Sistemas • Pós graduado em Gerenciamento de Projetos para Internet • Docente no Senac • Desenvolvimento de Sites • Desenvolvimento de Sistemas para Internet
3. gutoffline@gmail.com Guto Xavier linkedin.com/in/gutoxavier github.com/gutoffline
5. http://phaser.io/
6. Configurações phaser.min.js - framework que será utilizado index.html - arquivo onde o jogo será exibido main.js - arquivo com todo o código do nosso jogo assets/ - pasta com todos os recursos necessários
7. Projeto em branco - index.html
8. var game = new Phaser.Game(400, 490, Phaser.AUTO, 'areaJogo'); var principal = { preload: function() { }, create: function() { }, update: function() { }, jump: function() { }, restartGame: function() { }, }; game.state.add('main', principal); game.state.start('main');
9. Configurações iniciais e personagem preload: function() { game.stage.backgroundColor = '#71c5cf'; game.load.image('bird', 'assets/bird.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); this.bird = this.game.add.sprite(100, 245, 'bird'); game.physics.arcade.enable(this.bird); this.bird.body.gravity.y = 1000; var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(this.jump, this); },
10. Configurações iniciais e personagem update: function() { if (this.bird.inWorld == false) this.restartGame(); }, jump: function() { this.bird.body.velocity.y = -350; }, restartGame: function() { game.state.start('main'); },
11. Acrescentando os blocos // na função preload() acrescente game.load.image('pipe', 'assets/pipe.png'); //na função create() acrescente this.pipes = game.add.group(); this.pipes.enableBody = true; this.pipes.createMultiple(20, 'pipe');
12. Acrescentando os blocos // crie essa nova função ao final addRowOfPipes: function() { var hole = Math.floor(Math.random() * 5) + 1; for (var i = 0; i < 8; i++) if (i != hole && i != hole + 1) this.addOnePipe(400, i * 60 + 10); },
13. Acrescentando os blocos // crie essa nova função ao final addRowOfPipes: function() { var hole = Math.floor(Math.random() * 5) + 1; for (var i = 0; i < 8; i++) if (i != hole && i != hole + 1) this.addOnePipe(400, i * 60 + 10); }, // adicione essa linha na função create() para chamar a função dos blocos a cada 1.5 segundos this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);
14. Pontuação e Colisão // adicione essas linhas na função create() mostrar a pontuação acima e a esquerda this.score = 0; this.labelScore = game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" }); // adicione essas linhas na função addRowOfPipes() para incrementar um ponto a cada vez que os blocos forem criados this.score += 1; this.labelScore.text = this.score; // adicione essas linhas na função update() para reiniciar o jogo toda vez que o personagem colidir game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);
15. Animação //adicione na função update() para animar quando ele estiver caindo if (this.bird.angle < 20) this.bird.angle += 1; //adicione na função jump() para animar quando ele estiver pulando game.add.tween(this.bird).to({angle: -20}, 100).start(); //adicione na função create() para mudar o ponto de ancoragem do personagem this.bird.anchor.setTo(-0.2, 0.5);
16. Morte no jogo //atualize a linha abaixo na função update() a crescentando " this.hitPipe " game.physics.arcade.overlap(this.bird, this.pipes, this.hitPipe, null, this); //crie a função hitPipe() hitPipe: function() { if (this.bird.alive == false) return; this.bird.alive = false; game.time.events.remove(this.timer); this.pipes.forEachAlive(function(p){ p.body.velocity.x = 0; }, this); },
17. Morte no jogo //adicione as linhas abaixo na função jump() para verificar se o personagem está morto if (this.bird.alive == false) return;
18. Adicionando Som //adicione a linha abaixo na função preload() game.load.audio('jump', 'assets/jump.wav'); //adicione a linha abaixo na função create() this.jumpSound = game.add.audio('jump'); //adicione a linha abaixo na função jump() this.jumpSound.play();