Introdução ao desenvolvimento de jogos com PhaserJS

Introdução ao desenvolvimento de jogos HTML5 com

Quem sou? • Desenvolvedor fullstack • Não desenvolvedor de jogos
• Quase físico

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

Jogos para navegadores

Flash • Software proprietário • Suporte fraco para dispositivos móveis
• Difícil de atualizar • Precisa ser instalado

HTML DOM(Document Object Model) • Performance • Estados • Pode
ser usado em browsers mais antigos

HTML5 • Multiplataforma • WebGL • Canvas • Comunidade forte
e ativa

Frameworks/Game Engines

E por que PhaserJS? • Photon Storm • Open Source
• Comunidades(html5gamedevs) • Sintaxe simples e fácil - Javascript básico • Responsivo

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

O que precisamos para começar? • Um navegador • Um
editor de textos (bloco de notas, sublime) • Um servidor web (xampp, http-server) e… • SÓ!

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

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>

Phaser.Game(w, h, render, parent, state); var game = new Phaser.Game(800,
600, Phaser.AUTO, ‘’, {preload: preload, create: create, upload: upload}); Iniciando...

function preload() {} Função responsável por carregar todos os arquivos
necessários no jogo

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

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

Sprite Sheets

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’);

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

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

Tilemaps Muito utilizado em jogos 2D Tiled

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()

function update() {} Função responsável por lidar com qualquer atualização
feita, em tempo real. Também conhecida como ‘game loop’.

function update() {}

function shutdown() {} Função chamada quando um estado é ‘desligado’.
Exemplo: Quando um novo estado é chamado a partir do estado atual.

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.

Setando variáveis var background , player , playerSpeed = 200
, enemies , enemy , bullets , bullet , infoText = {} , shotSpeed = 300 , shotTime = 0 , Keys = {};

Iniciando o jogo Criando o objeto usando o construtor Phaser.Game
var game = new Phaser.Game(800, 600, Phaser.AUTO, ‘’);

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'); }

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

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

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

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’.

Adicionando um background function create() { //… background = game.add.tileSprite(0,
0, 800, 600, 'background'); //…

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

Adicionando física 3 tipos de física: • Arcade • Ninja
• P2

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

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

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; }

Anchor

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(); //…

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

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

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; } } }

Mais movimento ao jogador function create() { //… Keys.cursors =
game.input.keyboard.createCursorKeys();

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; } //…

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; } //…

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();

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; }

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

Trabalhando com colisões function update() { //… game.physics.arcade.overlap(bullets, enemies, killEnemy,
null, this); game.physics.arcade.overlap(player, enemies, hitPlayer, null, this); //…

Trabalhando com colisões function killEnemy(bullet, enemy) { bullet.kill(); enemy.damage(1); if
(enemy.health === 0) { infoText.currentScore += 100; } }

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'} ); //…

Trabalhando com colisões - Score function update() { //… infoText.scoreText.text
= 'Score: ' + infoText.currentScore; }

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

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

Pausando o jogo function create() { //… Keys.pause = game.input.keyboard.addKey(Phaser.Keyboard.ESC);
Keys.pause.onDown.add(pauseGame, this); }

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

Dúvidas???

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

Introdução ao desenvolvimento de jogos com Phas...

Introdução ao desenvolvimento de jogos com PhaserJS

Featured

Transcript