Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Criando jogos com Phaser JS

Guto Xavier
August 21, 2018
150

Criando jogos com Phaser JS

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

Guto Xavier

August 21, 2018
Tweet

Transcript

  1. 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
  2. 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
  3. 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');
  4. 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); },
  5. 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'); },
  6. 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');
  7. 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); },
  8. 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);
  9. 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);
  10. 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);
  11. 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); },
  12. Morte no jogo //adicione as linhas abaixo na função jump()

    para verificar se o personagem está morto if (this.bird.alive == false) return;
  13. 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();