Phaser - RibaFS Portal

Phaser Dicas

2017-08-28T17:25:42-03:00

Phaser Dicas

BasicGame.Game = function (game) {
// When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:
this.game; // a reference to the currently running game (Phaser.Game)
this.add; // used to add sprites, text, groups, etc (Phaser.GameObjectFactory)
this.camera; // a reference to the game camera (Phaser.Camera)
this.cache; // the game cache (Phaser.Cache)
this.input; // the global input manager. You can access this.input.keyboard, this.input.mouse, as well from it. (Phaser.Input)
this.load; // for preloading assets (Phaser.Loader)
this.math; // lots of useful common math operations (Phaser.Math)
this.sound; // the sound manager - add a sound, play one, set-up markers, etc (Phaser.SoundManager)
this.stage; // the game stage (Phaser.Stage)
this.time; // the clock (Phaser.Time)
this.tweens; // the tween manager (Phaser.TweenManager)
this.state; // the state manager (Phaser.StateManager)
this.world; // the game world (Phaser.World)
this.particles; // the particle manager (Phaser.Particles)
this.physics; // the physics manager (Phaser.Physics)
this.rnd; // the repeatable random number generator (Phaser.RandomDataGenerator)

// You can use any of these from any function within this State.
// But do consider them as being 'reserved words', i.e. don't create a property for your own game called "world" or you'll over-write the world reference.
};

Com esta função podemos chamar

this.add ao invés de this.game.add

Usar
this.add.sprite(0, 0, 'einstein');

no lugar de:
this.game.add.sprite(0, 0, 'einstein');

A função update() atualiza a tela em torno de 60 vezes por segundo.

Implementar entradas pelo teclado no Phaser é algo simples. A função retorna as 4 teclas de setas:

this.cursors = this.input.keyboard.createCursorKeys();

Exemplo de uso:

this.player.body.velocity.x = 0;
this.player.body.velocity.y = 0;

if (this.cursors.left.isDown) {
this.player.body.velocity.x = -this.player.speed;
} else if (this.cursors.right.isDown) {
this.player.body.velocity.x = this.player.speed;
}

if (this.cursors.up.isDown) {
this.player.body.velocity.y = -this.player.speed;
} else if (this.cursors.down.isDown) {
this.player.body.velocity.y = this.player.speed;
}

Caso permitamos ao jogador apertar ao mesmo tempo as teclas para movimentos horizontais e verticais então poderemos ter movimentos em 8 sentidos ao invés de apenas 4. Teremos também movimentos nas diagonais e não somente na vertical e horizontal.

Alguns objetos funcionam melhor quando contidos em grupo, como é o caso de balas. Assim reduz o consumo de memória.

Outro bom uso de grupo é nas explosões.

Refatorar o código com os objetivos:
- Recomendação: Refactorar sempre que o código for duplicado 3 ou mais vezes.
- Tornar a manutenção mais simples
- Reduzir o consumo de memória
- Deixar o jogo mais rápido
- Quebrar trechos de código grandes em pequenas funções
- Reduzir hard-coded trechos e constantes numéricas fixas para isso criando constanes em um state que fica mais fácil de alterar.
- Usar também valores relativos às dimensões, como this.game.width, ao inves de 800 fica mais flexível

O Phaser assume que seus sprites são orientados para a direita.

Coordenadas do Canvas

O ponto (0, 0) fica no canto superior esquerdo, portanto
O X aumenta da esquerda para a direita
O Y aumenta de cima para baixo

Formatos de áudio suportados pelo Phaser:

- Ogg e MP4 dão a maior cobertura de navegadores
- Wav deve ser evitado por ser grande
- MP3 deve ser evitado por problemas de licensa

Publicação do Jogo

Um jogo com o Phaser pode ser hospedado em qualquer servidor com suporte ao HTML 5 com um servidor web.

Uma boa alternativa free é o GitHub, mas requer conhecimento do Git.

Hospedagem free no Neocities

Ele aceita drag and drop em sua administração.
http://neocities.org
Desvantagem: não suporta criação de pastas. Todos os arquivos devem ficar no raiz do seu site. Não aceita upload de .wav.

Jogo do Phaser em Mobile

2017-07-29T16:32:00-03:00

Phaser em Mobile

Configurando um jogo para web criado com o Phaser para que se adapte automaticamente em dispositivo móvel.

Adicionar estas 3 linhas de escala ao início do método preload():

preload: function(){
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

Com isso a visualização pelo navegador já muda. Ele enche a tela se adaptando ao seu tamanho.

Como verificar com facilidade, se realmente se adapta aos dispositivos móveis?
Uma forma simples é instalar a extensão Ripple, que é emulador mobile.

Baixar o emulador Ripper para o Chrome

Acesse com o Chrome
https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

Instale a extensão

Agora abra o endereço do jogo pelo navegador Chrome, mas somente com o servidor web:
http://localhost/labirinto

Clique no pequeno ícone azul acima e à esquerda
E Habilite para Phonegap

Finalmente, podemos pensar em instalar nosso jogo em celulares.
Para isso conheço dois serviços simples:
http://build.phonegap.com
http://monaca.io

Precisamos criar um projeto em um destes e adaptar o projeto criado para o código do nosso jogo.
Veja na seção sobre PhoneGap ou Monaca sobre como efetuar o build e publicar seu jogo.

Phaser - Ferramentas

2017-07-29T16:32:00-03:00

Phaser - Ferramentas

Algumas das melhores ferramentas que encontrei para a criação de Jogos com o frfamework Phaser. A maioria eu encontrei na seção de News do site do Phaser.

cordova-phaser
Template do cordova para phaser, que cria um projeto cordova com uma estrutura adequada para um projeto Phaser
https://github.com/amex4152/cordova-phaser

Usando:
cordova create hello com.example.hello HelloWorld --template cordova-phaser
cd hello
cordova prepare

phaser-cli
https://github.com/nerdenough/phaser-cli

Cliente de phaser para node.js

Instalação
sudo npm install -g phaser-cli

Usando:

phaser init <template-name> <project-name>

Exemplo:
phaser init webpack meu-projeto
cd meu-projeto
npm install (instala os módulos do node)
npm run dev (inicia o servidor web e já abre o meu-projeto/index.html no navegador default em http://localhost:8080)

webpack - template em https://github.com/phaser-templates/webpack

Repositório de templates - https://github.com/phaser-templates

Templates atualmente:

Usando um template customizado:

phaser init username/repo my-project

username/repo é o username do github e o repositório. Ex: ribafs/repositorio1

Instalar com tempalte local:
phaser init ~/fs/path/to-custom-template my-project

Mais detalhes em:
https://github.com/nerdenough/phaser-cli

phaser-component-library
https://github.com/SaFrMo/phaser-component-library

phaser-mario - npm install phaser-mario - https://github.com/SaFrMo/phaser-mario

phaser-link - npm install phaser-link - https://github.com/SaFrMo/phaser-link

phaser-percent-bar - npm install phaser-percent-bar - https://github.com/SaFrMo/phaser-percent-bar

data-uri-snippets - npm install data-uri-snippets - https://github.com/SaFrMo/data-uri-snippets

gui component for phaser
https://github.com/redsheep/RSGUI

https://redsheep.github.io/RSGUI-Examples/

Editor para Phaser e outras ferramentas HTML5
http://mightyeditor.mightyfingers.com/

Phaser Sprite GUI
https://samme.github.io/phaser-sprite-gui/

Phaser Plugin Game GUI
https://samme.github.io/phaser-plugin-game-gui/

Phaser Debug
Plugin simples de debug para Phaser
https://github.com/englercj/phaser-debug/

Faça o download do projeto acima
Descompacte
Copie o arquivo phaser-debug.js que se encontra na pasta dist para seu projeto
Faça o include do mesmo no index.html
<script src="http://backup/portal/phaser.js"></script>
<script src="http://backup/portal/phaser-debug.js"></script>

Habilitando o plugin:
game.add.plugin(Phaser.Plugin.Debug);

Agora ele agirá sempre que for solicitado.

Como o debug é algo muito importante, este plugin pode ser útil usado paralelamente com o Inspetor do navegador.

Phaser Multiscreen Example
Uso de escala. Opção para lidar com várias dimensões de dispositivos no seu game
https://github.com/vinod8990/Phaser_Multiscreen_Example
https://github.com/photonstorm/phaser/blob/master/v2/resources/Project%20Templates/Full%20Screen%20Mobile/index.html

Phaser starter
Projeto inicial de game com Phaser para ter o ambiente funcionando com facilidade.
Com Webpack, ES6 transpiling, page reloading and Github page publishing.
https://github.com/oliverbenns/phaser-starter/releases

Faça o download do site acima e execute:
Descompacte
cd phaser-starter
nvm install
npm install

Final Android Resizer
Algo chato é criar todas as imagens para um projeto android, para efetuar o build, criando uma mesma imagem em várias dimensões.
Esta ferramenta nos ajuda nisso: Redimensionar todas as imagens de um projeto mobile para android
https://github.com/asystat/Final-Android-Resizer

Faça o download e Descompacte
Execute o arquivo Executable Jar/Final Android Resizer.jar

No linux clique com o botão direito sobre o arquivo - Abrir Com - Oracle Java 8 Runtime

Phaser Editor
IDE para criação de jogos HTML 5
http://phasereditor.boniatillo.com/blog/downloads
https://github.com/boniatillo-com/PhaserEditor

grunt-phaser-assetpack-generator
https://github.com/hilts-vaughan/grunt-phaser-assetpack-generator

Phaser Node Kit
https://develephant.github.io/phaser-node-kit/

Spriter-Player-for-Phaser
https://github.com/SBCGames/Spriter-Player-for-Phaser

Plugin Responsive para Phaser
Phaser-Responsive plugin adds images/sprites/buttons/groups that can be pinned to corners/sides/center!
https://github.com/orange-games/phaser-responsive

Bons Jogos com Phaser

2017-07-29T16:32:00-03:00

Alguns bons Jogos com o Framework Phaser

Jogão - Strick TacTics
http://striketactics.net/
http://striketactics.net/play - jogar online

Mario Phaser
https://github.com/agar3s/marioPhaser

Labirinto Adventure
http://cdn2.kidmons.com/games/labyrinth/index.php

http://gamepyong.com/skylegend/skylegend.php

Sword
http://m.addictinggames.com/content-items/html5-games/moa/index.html

Operações aritméticas (não é um jogo mas achei interessante)
http://gamepyong.com/ints/ints.php

9 jogos criados com Phaser
https://www.joshmorony.com/9-fun-html5-games-built-with-phaser/

http://www.andy-howard.com/top-games-built-in-phaser/index.html

https://itch.io/games/tag-phaser

Funny Games
http://twisted-city.fbrq.io/twisted-city/index.html

http://www.gunfight.io/

Piano
https://wasi0013.github.io/Phaser-Piano/
Download - https://github.com/wasi0013/Phaser-Piano

http://output.jsbin.com/humivu/27/
Download - https://github.com/jschomay/phaser-demo-game/

Prince of Persia
Download - https://github.com/ultrabolido/PrinceJS

Muitos Outros
https://phaser.io/games

Uma grande lista de jogos com Phaser no forum do Phaser
http://pgl.ilinov.eu/

Se quizer indicar algum que não esteja na lista acima, favor deixar no form de comentário abaixo.

Onde publicar jogos online

2017-07-29T16:32:00-03:00

Onde publicar jogos online

Click Jogos
http://www.clickjogos.com.br/cadastro/

IRCH
https://itch.io/docs/creators/html5

Google Drive
https://drive.google.com

Dropbox
https://www.dropbox.com/

Criando uma conta e um site em
http://www.000webhost.com/

Criar conta em e um site em
https://pages.github.com/

Publicando jogos do Phaser (ou qualquer jogo em HTML 5) na Steam

Getting a Phaser Game on Steam 1 - Greenlight - http://blog.bravebunny.co/phaser-game-on-steam-1-greenlight/
Getting a Phaser Game on Steam 2 - Making it Look and Feel Like a PC Game - http://blog.bravebunny.co/getting-a-phaser-game-on-steam-2-look-and-feel/
Getting a Phaser Game on Steam 3 - Making an Executable - http://blog.bravebunny.co/getting-a-phaser-game-on-steam-3-executable/

Servidor Web Simples

2017-07-29T16:32:00-03:00

Servidor Web Simples

Para criar ou testar jogos web criados com Phaser ou outro framework em HTML 5, geralmente basta abrir a pasta e efetuar um duplo clique no index.html. Mas tem jogo que somente funciona com Chrome ou outro navegador. Neste caso precisamos que o jogo rode sob um servidor web.

Mas aí basta ter apenas o Apache instalado ou qualquer outro servidor web. Não precisa ter suporte a PHP, Java, MySQL, etc.

Servidores web bem simples de instalar e sem qualquer configuração são alguns módulos do Node.js, instaláveis com o npm.

Atualmente boa parte dos programadores têm o node.js instalado e os que não têm ganharão ao instalar.

O node.js tem alguns módulos de servidor web. São servidores simples, apenas para sites estáticos, ou seja, apenas HTML, CSS e JavaScript.
Mas são muito simples de instalar e de usar. Caso precise da URL do node.js veja ao final deste artigo.

Um exemplo de código que não funciona no Firefox é quando o jogo/aplicativo usa o WebSQL/SQLite, nem mesmo que esteja no dirtório web. Precisa do Chrome.

Para instalar em máquina sem servidor web fica mais simples que a instalação de um servidor web convencional, especialmente se for no Windows.

Light-server
https://github.com/johnpapa/lite-server

Instalação no Ubuntu e derivados
sudo npm install -g light-server

No Windows - abrir o prompt e executar:
npm install -g light-server

Usando
light-server -s c:\xampp\htdocs\labirinto
Agora abra o navegador e digite:
http://localhost:4000

Para receber ajuda sobre mais comandos e opções

light-server -h

Live Server - Outro ainda mais simples e prático
https://github.com/tapio/live-server

Instalação
No Ubuntu
sudo npm install live-server -g

Windows
npm install live-server -g

Usando
cd c:\xampp\htdocs\labirinto
live-server

E ele já abre o index.html no navegador default

Para abrir no navegador Chrome (quando ele não é o default):
live-server --browser=google-chrome

Para abrir no chrome e numa pasta
live-server --browser=google-chrome --open=/var/www/html/labirinto

Simpleficando
Para tornar isso mais prático e não precisar memorizar o comando, podemos criar um script para linux ou batch para windows.

No Linux
sudo nano /usr/local/bin/live
live-server --browser=google-chrome --open=$1

sudo chmod +x /usr/local/bin/live

Usando
live /var/www/html/labirinto

No windows
Iniciar - executar
notepad c:\windows\live.bat
live-server --browser=google-chrome --open=%1

Usando
live c:\xampp\htdocs\labirinto

Ajuda sobre o live-server
live-server -h

Instalação do Node.js
Faça o download e instale daqui
https://nodejs.org/

Debugando
Uma vantagem deste tipo de servidor é que ele mostra no terminal os logs e já podemos ver os erros, caso existam. Um exemplo é quando ele não encontra um arquivo e mostra o erro 404.

Atualizar o Node.JS

2017-07-29T16:32:00-03:00

Atualizar o Node.JS

No Linux Ubuntu

sudo apt-get update
sudo apt-get install build-essential checkinstall libssl-dev

node -v
sudo npm cache clean -f
sudo npm install -g n

Instalar último node.js
sudo n stable

Anote a versão instalada acima e use abaixo no lugar de 8.2.1:
sudo ln -sf /usr/local/n/versions/node/8.2.1/bin/node /usr/bin/nodejs
node -v

Para desinstalar:
sudo apt-get install --reinstall nodejs-legacy # corrige /usr/bin/node
sudo n rm 8.2.1 # troque pela versão que você instalou
sudo npm uninstall -g n

No Windows

node -v
npm cache clean -f
npm install -g n

Instalar último node.js
n stable

node -v

Para desinstalar:
n rm 8.2.1 # troque pela versão que você instalou
npm uninstall -g n

Firebase - Hospedagem de aplicativos mobile

2017-07-29T16:32:00-03:00

Firebase - Hospedagem de aplicativos mobile e web - Com recursos profissionais

https://firebase.google.com/

Tutorial
https://www.tudocelular.com/android/noticias/n72091/google-lanca-nova-versao-do-firebase.html

O Firebase é uma ferramenta do Google e ao mesmo tempo uma infraestrutura para você desenvolver aplicativos com maior rapidez e flexibilidade.

O Firebase é uma plataforma móvel que ajuda você a desenvolver rapidamente aplicativos de alta qualidade, crescer sua base de usuários, e ganhar mais dinheiro. Composto de características complementares que você pode misturar e combinar para atender às suas necessidades.

No survey de 2017 do Ionic, o Firebase aparece como o ambiente preferido de tecnologia backend
http://ionicframework.com/survey/2017#big-picture

A ferramenta possui um Analytics propondo ser uma solução de análise livre e ilimitada, construída dentro do próprio base. Obtenha insights sobre seus usuários a partir de cliques em seu aplicativo. O Firebase Analytics trabalha em conjunto com outras funcionalidades, para que possa agir de acordo as taxas de click indesejados e falhas em seus aplicativos.

Entregue aplicativos em várias plataformas com uma API em um único SDK, seja para iOS, Android, JavaScript e C++. Ele permite que você trabalhe ao mesmo tempo em plataformas diferentes sem mudar sua estrutura.

Comece gratuitamente e pague em escala somente pelo que usar.
Plano gratuito com limites generosos para amadores. Veja: https://firebase.google.com/pricing/?hl=pt-br

A maioria dos seus recursos serão sempre gratuitos, para qualquer nível de desenvolvimento. As quatro principais características principais tem um generoso tempo de trial gratuito e logo dois planos pagos caso deseje crescer mais.

Quando seu aplicativo for um sucesso de crescimento, você não precisa se preocupar em escalar o seu código ou mudar de servidor com capacidade extra – o Firebase cuida de tudo para você, basta adquirir os planos.

O Firebase oferece apoio por e-mail gratuito para todos os desenvolvedores, e a equipe Firebase e Especialistas do Google Developer estão ativos em comunidades online como o GitHub.

Firebase possui um SDK e um console para criar e gerenciar aplicações.

A plataforma oferece as seguintes funcionalidades:

AdMob - integração com o Google AdMob;
AdWords - integração com o Google AdWords;
Analytics - um painel para monitorar o comportamento dos usuários da aplicação, segmentação demográfica e desempenho de campanha;
Autenticação - suporte para autenticação de usuários via e-mail, Facebook, GitHub, Google Sign-In e Twitter;
Relatório de Erros - monitora os erros da aplicação em todos os dispositivos e é integrado com o Analytics para analisar o comportamento dos usuários após falhas;
Database - um banco de dados NoSQL utilizado para armazenar dados JSON;
Dynamic Links - deep links para possibilitar que o usuário acesse páginas internas da aplicação;
Hosting - uma CDN (Content Delivery Network) distribuída globalmente para servir aplicações web;
Indexing - utilizado para indexar as aplicações na busca do Google (Google Search);
Invites - possibilita a troca de informações sobre uma aplicação entre usuários;
Messaging - o antigo Google Cloud Messaging (GCM) é o novo Firebase Cloud Messaging (FCM);
Notifications - gerenciamento de notificações enviadas para o seu usuário;
Offline - possibilita a armazenagem de dados na memória cache local, permitindo assim o funcionamento da aplicação em estado offline;
Real time - os dados são armazenados em tempo real no banco de dados;
Remote Config - permite aos desenvolvedores modificar o comportamento e a aparência da aplicação sem requerer que os usuários realizem o download de uma nova versão. Está funcionalidade é utilizada para testes A/B, alterar o tema visual da aplicação ou até mesmo se comunicar com usuários de regiões especificas, etc;
Storage - armazena as mídias do usuário, como áudio, imagens e vídeos;
Synchronization - quando os dados são alterados em um dispositivo eles são enviados para o Firebase e então para todos os dispositivos conectados. Caso existam dispositivos offline neste momento os mesmos serão atualizados com a última versão dos dados logo após a conexão com a internet;
Test Lab - teste a aplicação em dispositivos reais.

O kit de desenvolvimento de software (SDK) do Firebase atualmente suporta o desenvolvimento nas seguintes linguagens de programação: C++, Java, Javascript, Node.js, Objective-C e Swift.

Ela oferece um plano gratuito para aqueles que estejam interessados em conhecer seu funcionamento, como também um plano de pagamentos flexíveis, baseado em seu consumo, que oferece integração total com a plataforma Google Cloud.

Explorar projeto de demonstração
https://console.firebase.google.com/project/fir-demo-project/overview

Compilação do JavaScript

2017-07-29T16:32:00-03:00

Compilação do Javascript

Uma ferramenta interessante do NWJS SDK é o NWJC, que cria um binário a partir de um fonte .js:

https://nwjs.io/

Efetuar o downloa do site acima e descompactar.

Acessar a pasta do nw-sdk

Criar uma pasta compjs dentro da pasta do nw-sdk e acessá-la

Crie o arquivo meu.js contendo:

// Detectar o SO em uso
var os = require('os');
document.write('Você está rodando em ', os.platform());

Estando na pasta do nw-sdk execute:
../nwjc meu.js meu.bin

Agora crie o index.html contendo:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>NWJC - exemplo</title>
</head>
<body style="width: 100%; height: 100%;">

<script>
require('nw.gui').Window.get().evalNWBin(null, 'meu.bin');
</script>
</body>
</html>

Criar o package.json básico no raiz do nw-sdk ou adapte o existente

{
"name": "nwjc_exemplo",
"main": "index.html"
}

Rode com

./nw compjs

Alerta: o binário gerado não é multiplataforma e devemos executar o nwjc em cada plataforma usada.

Criando executável para Jogo web

2017-07-29T16:32:00-03:00

Criando executável para Jogo web usando o NWJS

Ou para qualquer aplicativo/site html.
Talvez não seja algo tão necessário mas, pode ser útil em alguma situação.

Para criar um executável para um jogo web, para que rode independente de navegador, uma boa alternativa é o
NWJS ( http://nwjs.io ).

Ele é basicamente uma versão simplificada do navegador Google Crome que abre um arquivo html.

Ele é baseado no Chromium e no Node JS. A versão do node para rodar o NWJS 0.24 indicada é a 8.21. Se precisar atualizar o node veja o artigo
http://ribafs.org/portal/mobile/phaser/atualizar-o-node-js

Download
http://nwjs.io

Podemos usar a versão normal ou a SDK (o SDK tem mais recursos).
Faça o download da normal, que é menor e tem tudo o que precisaremos para criar o standalone do jogo

Empacotando o jogo/aplicativo juntamente com o nw

- Criar um diretório no seu diretório home:
/meus_desktops
- Dentro deste diretório crie um diretório para um jogo e outro para o NW
/meus_desktops
/meu_jogo (todo o código do jogo)
/nw (aqui descompacte o NWJS)
- Acessar pelo terminal/prompt o /meus_desktops/meu_jogo
- Executar:
npm init (criará interativamente o package.json). O nome do pacote deve ser tudo em minúsculas e o arquivo inicial o index.html.
Para rodar a aplicação com o NW são requeridos apenas main e name.
O main deve chamar o index.html do jogo.
- Compactar todos os arquivos da pasta meu_jogo, sem a pasta: meu_jogo.zip
- Renomear meu_jogo.zip para meu_jogo.nw
- Concatenar o executável nw com o meu_jogo.nw:

No Linux
cat nw ../meu_jogo.nw > meu_jogo && chmod +x meu_jogo

No Windows
copy /b nw.exe+meu_jogo.nw meu_jogo.exe

Com isso criamos o arquivo meu_jogo no diretório do nw.

Agora para executar o jogo, ainda no diretório nw, basta executar:
./meu_jogo

Ou
meu_jogo.exe

Precisamos ficar no diretório do nw para rodar o executável, pois ele precisa de acesso aos seus arquivos/libs.

Dica: se na pasta do jogo tiver um package.json, remova o package.json da pasta do nw.

Referências

http://koobazaur.com/gamedev/streamlining-standalone-web-game-development-environment-phaser-nwjs/
https://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit--net-36296
https://www.sitepoint.com/cross-platform-desktop-app-nw-js/
https://github.com/nwjs/nw.js/wiki/how-to-package-and-distribute-your-apps
http://thejackalofjavascript.com/getting-started-with-node-webkit-apps/

Exercícios sobre Canvas

2017-07-29T16:32:00-03:00

Exercícios sobre HTML 5 Canvas

Do livro livro HTML 5 Canvas Cookbook da editora PacktPub

http://www.html5canvastutorials.com/cookbook/#ch1

Phaser - Referências

2017-07-25T16:32:00-03:00

Phaser - Referências

Site Oficialhttp://phaser.io

Forum Oficial do Phaser
http://www.html5gamedevs.com/forum/14-phaser/

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 (Introdução ao Phaser)
https://gamedevelopment.tutsplus.com/pt/articles/how-to-learn-the-phaser-html5-game-engine--gamedev-13643

Bom tutorial
https://www.sitepoint.com/javascript-game-programming-using-phaser/

Jogo Grátis de Phaser (em espanhol)
https://quizzpot.com/members/#/courses/videojuegos-en-html5

Curso de Phaser Grátis (em inglês)
https://www.udemy.com/making-games-with-phaser/

Phaser CheatSheets
https://gist.github.com/woubuc/6ef002051aeef453a95b

Vídeo Aulas no Youtube

Curso Básico - Intermediário (espalhol) - 23 vídeos
https://www.youtube.com/watch?v=KuUZnxCvPxk&list=PLdGlusD_3WpF9TUyLRcMOnU9jdZIi3y9a

Introdução ao Desenvolvimento de Games com Phaser - 12 aulas
https://www.youtube.com/watch?v=8SwYzPrqaD0&list=PLclUTiUoLCbDach_zDnhtyFvz2sIVyuJt

Criando um Jogo de Labirinto com Phaser - 10 aulas
https://www.youtube.com/watch?v=SSlIJOD-JMU&list=PLclUTiUoLCbDog-vStY7VFHpFXJVML6EY

Jogão criado com o Phaser - Twisted City
http://twisted-city.fbrq.io/twisted-city/index.html
http://www.gunfight.io/

Dicas de uso do timer no Phaser
https://phasergames.com/phaser-timer-basics-tutorial/

Jogo tipo Siga-me/Simon
https://phasergames.com/phaser/simon/index.html

Como adicionar um jogo do Phaser (ou qualquer jogo HTML) na Steam
http://www.andy-howard.com/phaser-to-steam/

Street Fighter
https://github.com/vicboma1/streetFighter1

Dicas sobre Escala
https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/
http://codetuto.com/2014/04/multi-screen-game-development-in-phaser/
http://mightyfingers.com/tutorials/advanced/simple-scaling-and-fullscreen/

Criação de Sprites, mapas e outros recursos para Phaser
http://mightyeditor.mightyfingers.com/
Exemplo de uso - https://gamedevacademy.org/make-a-quick-phaser-compatible-game-using-mightyeditor/

Phaser Sprite GUI Online
https://samme.github.io/phaser-sprite-gui/
Download - https://github.com/samme/phaser-sprite-gui

Phaser Game GUI Plugin Online
https://samme.github.io/phaser-plugin-game-gui/
Download - https://github.com/samme/phaser-plugin-game-gui

How to publish your HTML5 game on Facebook
http://www.emanueleferonato.com/2016/03/10/how-to-publish-your-html5-game-on-facebook-using-facebook-login-share-and-cpmstar-ads/

The Complete Guide to Debugging Phaser Games
https://gamedevacademy.org/how-to-debug-phaser-games/?a=13

20 Lugares para Você Publicar seu Jogo
http://producaodejogos.com/20-lugares-para-voce-publicar-seu-jogo/

Como decidir qual jogo desenvolver – As 4 ferramentas de um desenvolvedor indie veterano
http://producaodejogos.com/como-decidir-qual-jogo-desenvolver-as-4-ferramentas-de-um-desenvolvedor-indie-veterano/

Introdução ao JavaScript Orientado a Objeto
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Desenvolvimento de Jogos
https://developer.mozilla.org/pt-BR/docs/Games

Vários Exemplos de Jogos Web na Mozilla
https://developer.mozilla.org/en-US/docs/Games/Examples

Tutorial de criação de Jogos em Português em 12 partes (do Paulo Marcos Trentin):
Com o código fonte e bem comentado.
https://www.paulotrentin.com.br/category/programacao/criando-jogos-com-html5-e-phaser/page/2/
https://www.paulotrentin.com.br/category/programacao/criando-jogos-com-html5-e-phaser/

Livros sobre Phaser
https://phaser.io/shop/books/discover-phaser
https://phaser.io/shop/books/procedural-endless-runner
https://phaser.io/interphase/1
https://phaser.io/shop/books/vertical-endless-runner
https://phaser.io/shop/books/from-null-to-full
https://phaser.io/shop/books/mobile-development-for-web-developers
https://leanpub.com/html5shootemupinanafternoon

Teoria Juegos
Muita coisa sobre Phaser. Vários exemplos:
https://github.com/hpneo/teoria-juegos

Muitas informações úteis sobre mobile no Survey do Ionic de 2017
http://ionicframework.com/survey/2017

Curiosidade: Muitas informações e números sobre projetos do GitHub
https://octoverse.github.com/

Phaser - Editores

2017-07-25T16:32:00-03:00

Phaser - Editores

VSCode Resumo

Procurando um bom editor para programar com o framework Phaser, encotnrei 3:

http://atom.io
http://brackets.io
https://code.visualstudio.com/

Me parece que todos os 3 foram criados com o Electrom ( https://electron.atom.io/ ).

Os 3 autocompletam o código HTML e CSS, mas não o JavaScript. Como o Phaser tem uma biblioteca que podemos indicar para o editor, então vejamos.

Com as dicas sugeridas aqui todos os 3 autocompletam o código do JavaScript do Phaser, mas me senti mais confortável com o VSCode.
Experimente os 3 e escolha o seu.

Em um documento HTML em branco digite:
!
e tecle TAB

Verá:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

Com foco em device-width

Existe uma grande quantidade de extensões que ajudam na codificação. Veja abaixo.

Editor Para o Phaser
https://phasereditor2d.com/blog/downloads

Para que o VSCode auto-complete o código do Pahser e dê algumas dicas siga estes passos:

- Faça o download do phaser no formato zip.
https://github.com/photonstorm/phaser

- Descompacte

- Crie uma pasta em seu projeto
js/vendor ou lib/vendor ou apenas js/

- Copie os arquivos de phaser-master
v2/build (todos, exceto custom e config.php)
para a pasta js/vendor do projeto

- Crie uma pasta js/defs em seu projeto

Para programar com Typescript:
Copie estes arquivos
box2d.d.ts
p2.d.ts
phaser.comments.d.ts
phaser_box2d.d.ts
pixi.comments.d.ts
tslint.json
typings.json
da pasta v2/typescript para a pasta js/defs

- Caso ainda tenha algum problema crie na pasta js do projeto o arquivo jsconfig.json, contendo apenas
{ }

Com isso o VSCode ficará autocompletando bem o código do phaser e dando dicas sobre o código.

Configurações do editor
File - Preferences - Settings

Dicas
https://github.com/Microsoft/vscode-tips-and-tricks
https://code.visualstudio.com/docs/getstarted/userinterface

Instalar extensões

Clique no ícone à esquerda
ou
View - Extensions
Ou Ctrl+Shift+X

Ou no VSCode Market
https://marketplace.visualstudio.com/VSCode

Ou ainda
Ctrl+P e digite o comando. Exemplo:
ext install html-snippets
ext install vscode-color - https://github.com/anseki/vscode-color
Exibir Terminal Integrado
View - Integrated Terminal ou Ctrl+Shift+'

ou
Faça o download da extensão
Descompacte
Copie seu diretório para
$HOME/.vscode/extensions

Dica de CSS:
Crie um arquivo css
Digite:
background-color:

Tecle Ctrl+Barra de espaços que aparece a relação de cores

Quando digitar
.teste{
background-color: #f00;
}

Verá um pequeno quadrado na cor vermelha ao lado do código

Teclas de Atalho:

Ctrl+P - mostra os arquivos do diretório atual. Digite ? e receberá uma lista de comandos disponíveis
Ctrl+Shift+P - mostra os comandos do editor
Ctrl+G - ir para uma específica linha do arquivo aberto
Ctrl+PgDown - navegar entre as abas/arquivos abertas (para a direita)
Ctrl+PgUp - navegar entre as abas/arquivos abertas (para a esquerda)
Ctrl+W - fechar arquivo atual aberto
Ctrl+Shift+E - Abrir painel do Explorer (explorador de arquivos)
Ctrl+Shift+F - buscar um termo em todos os arquivos da pasta atual e sub pastas
Ctrl+Shift+X - mostrar extensões instaladas
Ctrl+Shift+' - exibir terminal integrado

Busca por todos os arquivos do projeto
Um recurso bem útil que vem com o VSCode.
Para o VSCode um projeto é uma pasta. Quando abrimos uma pasta podemos efetuar uma busca de uma string por todos os arquivos da pasta aberta.
Para isso basta clicar na lupa acima e à esquerda.

Dica:
Adding the <script>-tags at the bottom of the <body>-tags, ensures that the document's markup (also known as DOM), is fully loaded before our scripts are. This way we can assume it loaded when working with it in Javascript.

Agora veja o VSCode autocompletando o código do Phaser (4 níveis)

Quero digitar
game.physics.arcade.enable
Digito "g" e ele sugere game. Apenas teclo enter e digito um ponto colado
Digito "ph" e ele sugere physics. Teclo Enter e digito um ponto colado
Ele já traz "arcade" como primeira opção e teclo Enter e digito um ponto colado
Digito "e" e ele me sugere "enable". Teclo enter. Agora digito "(" e ele fecha.

Me ajuda muito. Veja abaixo as 4 fases:

Dica:
O autocompletar só funciona num contexto requerido, ou seja, somente dentro de um dos métodos do jogo e não fora. Dentro de:
preload(), create(), update() ou render().

Framework Phaser

2017-07-11T16:32:44-03:00

Ferramentas offline

Notepad++
gedit
Sublime Text
Intel XDK
WebStorm
VisualStudio para TypeScript
Brackets

Download
http://phaser.io/download/stable

Instalar servidor web local
E usar no servidor

HelloWorld
https://github.com/photonstorm/phaser/raw/master/resources/tutorials/01%20Getting%20Started/hellophaser.zip

Exemplos online
http://phaser.io/examples

Para download
https://github.com/photonstorm/phaser-examples

Criando Primeiro Jogo
http://phaser.io/tutorials/making-your-first-phaser-game

Tutoriais e Documentação
http://phaser.io/learn
http://phaser.io/tutorials/getting-started
http://phaser.io/learn/official-tutorials
http://phaser.io/learn/community-tutorials

Editor de Código Online
http://phaser.io/sandbox

Forum
https://groups.google.com/d/forum/phaser3-dev

Gerando Build dos Jogos do Phaser

Existem algumas alternativas simples para gerar o build, ou seja, criar um APK, por exemplo, dos exemplos do Phaser. As duas melhores que conheço são o Phonegap e o Monaca.

Basta criar um projeto com um deles e adaptar o fonte do Phaser para o projeto e depois efetuar o build.

Veja aqui na seção de exemplos do Phaser. Foi assim que usei o Breakout do Phaser e gerei o build com o Phonegap.

Livro de Phaser para ler Online
Phaser.js Game Design Workbook - https://leanpub.com/phaserjsgamedesignworkbook/read

Multi-platform Games with PhaserJS
http://createdineden.com/blog/post/multi-platform-games-with-phaserjs/

Intro To Phaser Part 1: Setting Up Your Dev Environment and Phaser - Em 3 partes
https://developer.amazon.com/blogs/post/Tx1NQ9QEA4MWGTY/Intro-To-Phaser-Part-1-Setting-Up-Your-Dev-Environment-and-Phaser

Phaser - Exemplos

2017-07-11T16:32:44-03:00

Exemplos testados do Phaser

Estes exemplos foram encontrados na internet. Apenas para o breakout, traduzi alguns termos e frases.

Bom exemplo de Piano criado com o Phaser
Toque com mouse ou teclado
https://github.com/wasi0013/Phaser-Piano

Bom Jogo de Nave Espacial/spaceship

Tutorial bem comentado, passo-a-passo e com código fonte em 5 partes:
http://codeperfectionist.com/articles/phaser-js-tutorial-building-a-polished-space-shooter-game-part-1/
Dica: apenas edite o game.js e remova a URL dos assets no preload(), deixando somente assim: game.load.image('starfield', 'assets/starfield.png');

Prince of Persia com Phaser

https://github.com/ultrabolido/PrinceJS

Breakout

Fontes - BreakoutPhaser.zip

Binários para Android - Breakout-release.apk

Original com tutorial passo-a-passo - https://github.com/end3r/Gamedev-Phaser-Content-Kit

Eu traduzi o tutorial acima de forma livre e compartilho o PDF aqui. Mas recomendo apenas para quem tiver grande dificuldade com inglês, pois como é um texto grande pode conter error. Sempre confira com o original, especialmente o código.

Invader

InvaderPhaser.zip - fontes

PixelWar

PixelWar.zip - fontes

Executáveis do Android - PixelWar-release.apk (criado com o PhoneGap)

StarstrunckPhaser.zip

Phaser Squares

Pequeno e didático exemplo de game com Phaser

Tutorial - https://loonride.com/learn/phaser/getting-started
Fontes - https://github.com/Loonride/phaser-squares

Phaser - Tutorial

2017-07-11T16:32:44-03:00

Phaser - Tutorial

Algo que agrada quando começamos a estudar o framework Phaser é a quantidade de material encontrada em seu site e na internet em geral. Tem muito material e xemplos disponível e isso facilita o aprendizado.

Detalhando separadamente cada recurso

A maior parte foi adaptada de
https://end3r.github.io/Gamedev-Phaser-Content-Kit/tutorial
e de https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/

Site oficial
http://phaser.io

Download
http://phaser.io/download/stable

Servidor Web
Para que os nossos exemplos/testes funcionem localmente, precisamos ter um servidor web local funcionando.

Inicialização - include do js e criação do objeto game

<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Workshop - lesson 02: Scaling</title>
<style>* { padding: 0; margin: 0; }</style>
<script src="http://backup/portal/js/phaser282.min.js"></script>
</head>
<body>
<script>
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

Ou assim:
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
preload: preload, create: create, update: update
});

A linha acima cria uma região/canvas na tela com 480x320

function preload() {}
function create() {}
function update() {}

preload - carrega na memória inicialmente todo o seu conteúdo (imagens, sons, vídeos, etc) para a memória RAM
create - quando o preload() finaliza seu trabalho então o create será executado, mas somente uma única vez
update - após o create finalizar sua execução então o update executa seu código a cada frame (em loop) durante toda a fase/state do jogo

state - no fase, cada parte do jogo é um state. Quando o jogo tem mais de um state, ao final de cada state ele chama o próximo state com:
this.state.start('nomeProxState');

CDN
<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
<script src="//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>
<script src="//cdn.jsdelivr.net/phaser/latest/phaser.min.js"></script>

Cor de fundo do canvas
game.stage.backgroundColor = '#eee';

Mudando a Escala do Canvas
function preload() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
}

Tipos de escala:

NO_SCALE
EXACT_FIT
SHOW_ALL
RESIZE
USER_SCALE
Detalhes sobre cada um- https://end3r.github.io/Gamedev-Phaser-Content-Kit/tutorial/article02.html

Mostrar um sprite na tela

Criar a variável/objeto

var ball;// Acima do método preload()

Adicionar o sprite no método preload():
game.load.image('ball', 'img/ball.png');

ball - nome dado ao sprite, que será a referência para o mesmo no código
img/ball.png - caminho do sprite

Adicionar ao método create()
image = game.add.sprite(50, 50, 'ball');

50, 50 - coordenadas do sprite no canvas
ball - nome do sprite

Mover objeto usando a física

function create() {
// Habilitar física ao canvas
game.physics.startSystem(Phaser.Physics.ARCADE);
// Posicionar o sprite 'ball' no ponto 50, 50
ball = game.add.sprite(50, 50, 'ball');
// Habilitar física para o objeto 'ball'
game.physics.enable(ball, Phaser.Physics.ARCADE);
// Setar a velocidade para o objeto
ball.body.velocity.set(150, 150);
}

Movimento simples, sem física

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

Adiciona 1 para as coordenadas x e y da ball

Bola rebatendo nas bordas com física

function create() {
// Habilitar física ao canvas
game.physics.startSystem(Phaser.Physics.ARCADE);

// Posicionar o sprite 'ball' no ponto 50, 50
ball = game.add.sprite(50, 50, 'ball');

// Habilitar física para o objeto 'ball'
game.physics.enable(ball, Phaser.Physics.ARCADE);

// Setar a velocidade para o objeto
ball.body.velocity.set(150, 150);

// Rebater nas bordas
ball.body.collideWorldBounds = true;

// Fazer a bola parar ao bater
ball.body.bounce.set(1);
}

Adicionar jogador/paddle (raquete)
Que será movida ao mover o mouse

var paddle;

function preload() {
game.load.image('paddle', 'img/paddle.png');
}

function create(){
// Posicionando a raquete/paddle
paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
}

Centralizar paddle e outros recursos

No create()
paddle.anchor.set(0.5,1);

Colidir com a ball, habilitar a física
game.physics.enable(paddle, Phaser.Physics.ARCADE);

Checar a detecção de colisão no update()
game.physics.arcade.collide(ball, paddle);

Tornar o paddle fixo:
paddle.body.immovable = true;

Adicionar ao update para poder mover o paddle ao mover o mouse:
paddle.x = game.input.x || game.world.width*0.5;

Código completo:
<script>
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;
var paddle;

function preload() {
// Escala
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

// Cor de fundo
game.stage.backgroundColor = '#eee';

// Carregar Sprites
game.load.image('ball', 'img/ball.png');
game.load.image('paddle', 'img/paddle.png');
}
function create() {
//Física
game.physics.startSystem(Phaser.Physics.ARCADE);
ball = game.add.sprite(game.world.width*0.5, game.world.height-25, 'ball');
ball.anchor.set(0.5);
game.physics.enable(ball, Phaser.Physics.ARCADE);

// Velocidade
ball.body.velocity.set(150, -150);

// Colisão
ball.body.collideWorldBounds = true;

// Para quando bater
ball.body.bounce.set(1);

paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
paddle.anchor.set(0.5,1);

// Habilitar física ao paddle
game.physics.enable(paddle, Phaser.Physics.ARCADE);

// Deixá-lo imobilizado
paddle.body.immovable = true;
}
function update() {
game.physics.arcade.collide(ball, paddle);
paddle.x = game.input.x || game.world.width*0.5;
}
</script>

Posicionando os tijolos/bricks

Criar as variáveis
var bricks;
var newBrick;
var brickInfo;

Adicionar ao preload():
game.load.image('brick', 'img/brick.png');

Adicionar ao create():
initBricks();

Criar uma nova função nno final do script:

function initBricks() {
    brickInfo = {
    width: 50,
    height: 20,
    count: {
    row: 3,
    col: 7
    },
    offset: {
        top: 50,
        left: 60
    },
    padding: 10
    }
    bricks = game.add.group();
    for(c=0; c<brickInfo.count.col; c++) {
        for(r=0; r<brickInfo.count.row; r++) {
            var brickX = (c*(brickInfo.width+brickInfo.padding))+brickInfo.offset.left;
            var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top;
            newBrick = game.add.sprite(brickX, brickY, 'brick');
            game.physics.enable(newBrick, Phaser.Physics.ARCADE);
            newBrick.body.immovable = true;
            newBrick.anchor.set(0.5);
            bricks.add(newBrick);
        }
    }
}

Os dois for acima são os responsáveis principais pelo posicionamento de cada tijolo.
Ao final teremos 3 linhas por 7 colunas de tijolos na tela.

Detectando a colisão entre a bola e os tijolos e eliminar tijolos

Adicionar ao update():
game.physics.arcade.collide(ball, bricks, ballHitBrick);
paddle.x = game.input.x || game.world.width*0.5;

Criar esta função no final do script:
function ballHitBrick(ball, brick) {
brick.kill();
}

Veja mais detalhes em:
https://end3r.github.io/Gamedev-Phaser-Content-Kit/tutorial/
http://phaser.io/examples

Podemos baixar todos os exemplos do Phaser:
https://github.com/photonstorm/phaser-examples

Para testes offline. Basta criar um arquivo html na pasta examples, apontando para o respectivo exemplo e para um phaser.js local.

States
Um state representa uma parte do jogo, um menu, o jogo, o game-over, etc.
Cada state no Phaser tem os métodos preload, create, update e o render.

Dica: quando criar o jogo e se referir aos assets, o faça de forma relativa (sem a barra inicial), mas apenas relativa, para que funcione em quanquer servidor, inclusive localmente.
/assets/teste.png - absoluto
assets/teste.png - relativo

Controlar jogador pelas setas/teclado

Criar a variável
var cursors;

Adicionar ao preload():
cursors = game.input.keyboard.createCursorKeys();

Isto popula o objeto cursors com 4 propriedades: up, down, left, right, que são todas elas instências do objeto Phaser.Key. Então tudo que precisamos fazer é adicionar isso ao loop update():

 // Reset the players velocity (movement)
player.body.velocity.x = 0;

if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;

player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;

player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();

player.frame = 4;
}

// Allow the player to jump if they are touching the ground. Permitir que o jogador salte caso esteja tocando o solo
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}

Sistema de Pontos/Score

Criar as variáveis
var scoreText;
var score = 0;

Adicionar para o create():
scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });

Adicionar ao update():
game.physics.arcade.collide(ball, bricks, ballHitBrick);

Adicionar ao final do script:
function ballHitBrick(ball, brick) {
brick.kill();// Destroi tijolo que a bola toca
score += 10;
scoreText.setText('Points: '+score);
}

Sistema de Vidas/Lives

Adicionar as variáveis na área de variáveis globais:

var lives = 3;
var livesText;
var lifeLostText;

Adicionar ao create():
textStyle = { font: '18px Arial', fill: '#0095DD' };
scoreText = game.add.text(5, 5, 'Pontos: 0', textStyle);
livesText = game.add.text(game.world.width-5, 5, 'Vidas: '+lives, textStyle);
livesText.anchor.set(1,0);
lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Você perdeu uma vida. Clique para continuar', textStyle);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;
ball.events.onOutOfBounds.add(ballLeaveScreen, this);

Adicionar ao final do script:
function ballLeaveScreen() {
lives--;
if(lives) {
livesText.setText('Vidas: '+lives);
lifeLostText.visible = true;
ball.reset(game.world.width*0.5, game.world.height-25);
paddle.reset(game.world.width*0.5, game.world.height-5);
game.input.onDown.addOnce(function(){
lifeLostText.visible = false;
ball.body.velocity.set(150, -150);
}, this);
}
else {
alert('Você perdeu, game over!');
location.reload();
}
}

Game Over

Adicionar ao create():
game.physics.arcade.checkCollision.down = false;
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(function(){
alert('Game over!');
location.reload();
}, this);

Jogo Finalizado/Win the Game

Adicionar ao update():
game.physics.arcade.collide(ball, bricks, ballHitBrick);

adicionar ao final do script:

function ballHitBrick(ball, brick) {
brick.kill();
score += 10;
scoreText.setText('Points: '+score);
if(score === brickInfo.count.row*brickInfo.count.col*10) {
alert('You won the game, congratulations!');
location.reload();
}
}

Mais dicas e recursos:
https://end3r.github.io/Gamedev-Phaser-Content-Kit/tutorial/

Se quizer consultar a API com detalhes:
http://phaser.io/docs/2.6.2/index

Exemplos com rotinas simples para testes deste tutorial
phaser_exs
phaser_exs2