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

Introdução ao desenvolvimento de jogos com PhaserJS

Ian Ramos
September 26, 2015
2
150

Introdução ao desenvolvimento de jogos com PhaserJS

Com a chegada do HTML5(com a tag canvas) e com o flash se tornando obsoleto, vários frameworks surgiram. Usaremos o PhaserJS como ferramenta para desenvolvimento de jogos para navegadores.

Ian Ramos

September 26, 2015
Tweet

Featured

See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Raft: Consensus for Rubyists
vanstee
132
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Facilitating Awesome Meetings
lara
42
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Why Our Code Smells
bkeepers
PRO
331
56k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Atom: Resistance is Futile
akmur
259
25k
Designing Experiences People Love
moore
136
23k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Invisible Side of Design
smashingmag
294
49k

Transcript

  1. Introdução ao desenvolvimento de jogos HTML5 com

  2. Quem sou? • Desenvolvedor fullstack • Não desenvolvedor de jogos

    • Quase físico

  3. Código disponível em: https://github.com/IanRamosC/flashkiller

  4. Jogos para navegadores

  5. Flash • Software proprietário • Suporte fraco para dispositivos móveis

    • Difícil de atualizar • Precisa ser instalado

  6. HTML DOM(Document Object Model) • Performance • Estados • Pode

    ser usado em browsers mais antigos

  7. HTML5 • Multiplataforma • WebGL • Canvas • Comunidade forte

    e ativa

  8. Frameworks/Game Engines

  9. None

  10. E por que PhaserJS? • Photon Storm • Open Source

    • Comunidades(html5gamedevs) • Sintaxe simples e fácil - Javascript básico • Responsivo

  11. PhaserJS • Abril 2013 - Setembro 2013 • Desktop/Mobile •

    Suporte nativo ao CocoonJS • Suporte para Node Webkit • Javascript puro - Fácil, mas nem sempre bom • Typescript (com guia oficial)/Coffeescript

  12. O que precisamos para começar? • Um navegador • Um

    editor de textos (bloco de notas, sublime) • Um servidor web (xampp, http-server) e… • SÓ!

  13. phaser.js/phaser.min.js http://phaser.io/download/stable

  14. Código inicial (HTML básico) <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

    <title>Meu jogo</title> </head> <body> <script src="js/phaser.min.js"></script> <script src="js/game.js"></script> </body> </html>

  15. Phaser.Game(w, h, render, parent, state); var game = new Phaser.Game(800,

    600, Phaser.AUTO, ‘’, {preload: preload, create: create, upload: upload}); Iniciando...

  16. function preload() {} Função responsável por carregar todos os arquivos

    necessários no jogo

  17. Phaser.Loader • Imagens • Sprite Sheets • Texture Atlases (incluindo

    pack de texturas, JSON Hash, JSON Array, Flash CS6/CC, e formato XML Starling) • Arquivos de audio(*.ogg, *.mp3, *.wav, *.m4a ...) • Arquivos de dados (XML, JSON, texto) • Arquivos JavaScript (você pode carregar partes do seu jogo ou recursos baseados em JS) • Tilemaps (CSV e Tiled map) • Fontes Bitmap

  18. Imagens game.load.image(‘nome’, ‘url/da/imagem.jpg’);

  19. Sprite Sheets

  20. Sprite Sheets game.load.spritesheet(‘nome’, ‘url’, w, h, nFrames, margin, spacing); Animações

    var dude = game.add.sprite(x, y, ‘nome’, frame, ‘group’); dude.animations.add(‘jump’, frames, fps, loop); dude.animations.play(‘jump’);

  21. Audio game.load.audio(‘fireFx’, ‘assets/fx/fx.mp3’);

  22. Tilemaps game.add.tilemap(‘nome’, ‘url/do/tile.json’);

  23. Tilemaps Muito utilizado em jogos 2D Tiled

  24. function create() {} Função responsável por criar elementos na tela

    em um primeiro momento. Esta função é chamada após a função preload()

  25. function update() {} Função responsável por lidar com qualquer atualização

    feita, em tempo real. Também conhecida como ‘game loop’.

  26. function update() {}

  27. function shutdown() {} Função chamada quando um estado é ‘desligado’.

    Exemplo: Quando um novo estado é chamado a partir do estado atual.

  28. Finalmente nosso jogo. :D Tendo noção básica a respeito do

    carregamento de arquivos e das funções de estado do Phaser, a próxima etapa é iniciar o desenvolvimento do jogo.

  29. Setando variáveis var background , player , playerSpeed = 200

    , enemies , enemy , bullets , bullet , infoText = {} , shotSpeed = 300 , shotTime = 0 , Keys = {};

  30. Iniciando o jogo Criando o objeto usando o construtor Phaser.Game

    var game = new Phaser.Game(800, 600, Phaser.AUTO, ‘’);
  31. None

  32. Carregando arquivos... function preload() { game.load.image('background', 'assets/img/starfield.png'); game.load.image('spaceship', 'assets/img/spaceship.png'); game.load.image('enemies',

    'assets/img/enemies.png'); game.load.image('bullet', 'assets/img/bullet.png'); }

  33. Phaser.ScaleManager isPortrait, isLandscape, isGamePortrait, isGameLandscape, pageAlignHorizontally, pageAlignVertically, maxHeight, maxWidth...

  34. Criando o cenário... function create() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically

    = true; //…
  35. None

  36. Phaser.GameObjectFactory audio, emitter, image, physicsGroup, sprite, tileSprite, video...

  37. Adicionando um background Um tileSprite é um Sprite que possui

    uma textura que se repete. Nota: Não se deve criar um tileSprite maior que a tela, ao invés disso use a propriedade ‘tilePosition’.

  38. Adicionando um background function create() { //… background = game.add.tileSprite(0,

    0, 800, 600, 'background'); //…
  39. None

  40. Movimento do background function upload() { background.tilePosition.x -= 2; //…

  41. None

  42. Adicionando física 3 tipos de física: • Arcade • Ninja

    • P2

  43. Adicionando física function create() { //… game.physics.startSystem(Phaser.Physics.ARCADE); //…

  44. Adicionando o personagem function create() { //… createPlayer(); //…

  45. Adicionando o personagem function createPlayer() { player = game.add.sprite(10, game.world.height/2,

    'spaceship'); game.physics.arcade.enable(player); player.anchor.setTo(0, 0.5); player.body.collideWorldBounds = true; }

  46. Anchor

  47. None

  48. Adicionando tiros function create() { //… bullets = game.add.group(); bullets.enableBody

    = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'bullet'); bullets.setAll('outOfBoundsKill', true); bullets.setAll('checkWorldBounds', true); createPlayer(); //…

  49. Adicionando tiros function create() { //… Keys.fireUp = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

  50. Adicionando tiros function update() { //… if(Keys.fireUp.isDown) { shot(); }

    //…

  51. Adicionando tiros function shot() { if(game.time.now > shotTime) { bullet

    = bullets.getFirstExists(false); if(bullet) { bullet.reset(player.x + player.width, player.y); bullet.body.velocity.x = shotSpeed; shotTime = game.time.now + 300; } } }
  52. None

  53. Mais movimento ao jogador function create() { //… Keys.cursors =

    game.input.keyboard.createCursorKeys();

  54. Mais movimento ao jogador function update() { //… player.body.velocity.setTo(0, 0);

    if(Keys.cursors.up.isDown) { player.body.velocity.y = -playerSpeed; } if(Keys.cursors.down.isDown) { player.body.velocity.y = playerSpeed; } //…

  55. Mais movimento ao jogador function update() { //… if(Keys.cursors.right.isDown &&

    player.body.x < 210) { player.body.velocity.x = +playerSpeed; } if(Keys.cursors.left.isDown && player.body.x > 10) { player.body.velocity.x = -playerSpeed; } //…
  56. None

  57. Adicionando inimigos function create() { //… enemies = game.add.physicsGroup(Phaser.Physics.ARCADE, game.world,

    'enemies'); game.enemyGenerator = game.time.events.loop(Phaser.Timer.SECOND * 1.25, createEnemies, this); game.enemyGenerator.timer.start();

  58. Adicionando inimigos function createEnemies() { var x = game.world.width ,

    y = game.rnd.integerInRange(50, game.world.height - 50); enemy = enemies.create(x, y, 'enemies'); enemy.anchor.setTo(0, 0.5); enemy.health = 2; enemy.body.velocity.x = game.rnd.integerInRange(-150, -200); ; enemy.outOfBoundsKill; }
  59. None

  60. MAS NÃO FUNCIONA?!?1?!?1

  61. None

  62. Trabalhando com colisões function update() { //… game.physics.arcade.overlap(bullets, enemies, killEnemy,

    null, this); game.physics.arcade.overlap(player, enemies, hitPlayer, null, this); //…

  63. Trabalhando com colisões function killEnemy(bullet, enemy) { bullet.kill(); enemy.damage(1); if

    (enemy.health === 0) { infoText.currentScore += 100; } }

  64. Trabalhando com colisões - Score function create() { //… infoText.currentScore

    = 0; infoText.scoreText = game.add.text(10, 10, 'Score: ' + infoText.currentScore, { font: '34px Arial', fill: '#FFF'} ); //…

  65. Trabalhando com colisões - Score function update() { //… infoText.scoreText.text

    = 'Score: ' + infoText.currentScore; }

  66. Trabalhando com colisões function hitPlayer(player, enemy) { player.destroy(); enemy.kill(); restart();

    }

  67. Reiniciando o jogo function restart() { enemies.removeAll(); createEnemies(); createPlayer(); infoText.currentScore

    = 0; }
  68. None
  69. None

  70. Pausando o jogo function create() { //… Keys.pause = game.input.keyboard.addKey(Phaser.Keyboard.ESC);

    Keys.pause.onDown.add(pauseGame, this); }

  71. Pausando o jogo function pauseGame() { game.paused = !game.paused; }

  72. Dúvidas???

  73. Falem comigo... Twitter: @ianramosc Github: @ianramosc Facebook: https://fb.com/ianrguitar

  74. None