CRIANDO JOGOS COM

PHASER

www.number.890m.com
 INTRODUCAO

O objetivo dessa apostila e explicar de forma simples e rapida os conceitos mais basicos do
uso do framework Phaser para a criacao de jogos para browsers. Para isso partiremos do exemplo
de jogo de plataforma 2d desenvolvido por Thomas Paleff.

Diego Oliveira.
2017 | nibblediego@gmail.com

www.number.890m.com

2
Contents
1 A GAME ENGINE PHASER 4
1.1 O QUE E O PHASER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 BAIXANDO O PHASER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 PREPARANDO O AMBIENTE DE DESENVOLVIMENTO 5

3 UM POUCO DE HTML 5

4 COMECANDO A USAR O PHASER 6

4.1 CRIANDO UM ESTADO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.2 METODOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.3 ADICIONANDO IMAGENS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.4 COR DE FUNDO, FISICA E PLAYER . . . . . . . . . . . . . . . . . . . . . . . 7
4.4.1 ANCHOR POINT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.5 MOVENDO O PLAYER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.6 CRIANDO O NIVEL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.7 LIDANDO COM COLISOES . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.8 RESULTADO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

5 MENU DE JOGO 12
5.1 ADICIONANDO TEXTO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

6 DIMENSIONAMENTO DE IMAGENS 16

3
1 A GAME ENGINE PHASER

www.number.890m.com

1.1 O QUE E O PHASER

O Phaser e uma biblioteca JavaScript open source para desenvolvimento de jogos em HTML5
criado pela Photon Storm. Seu foco e criar jogos que rodam em navegadores como o Internet
Explorer 9 para cima, Firefox, Chrome e Safari. Em dispositivos moveis, o Phaser e suportado
no iOS5 para cima e no navegador Safari. No Android, ele e suportado a partir da versao
2.2 para cima tanto no navegador padrao quanto no Chrome mobile. O Phaser roda tambem
em dispositivos que utilizam o sistema Tizen e perfeitamente no Kindle com ajuda do HTML5
Wrapper, o que significa que voce pode utilizar os jogos nestes dispositivos sem problemas.

1.2 BAIXANDO O PHASER

O projeto do Phaser esta hospedado no GitHub. O projeto possui dois branches (versoes
paralelas em desenvolvimento) esses branches sao:

 Master: que conta com as ultimas atualizacoes estaveis.

 Dev: que conta com recursos ainda em desenvolvimento para a versao final.

A sugestao e que voce use sempre a ultima versao estavel (master). Uma vez que a dev
pode conter alguns bugs. Apos baixar o Phaser, recomenda-se que voce siga o guia oficial para
iniciantes (Getting Started Guide). O guia aborda a configuracao de um servidor web local, do
ambiente de desenvolvimento, e da programacao na nuvem se este for seu interesse. Tambem
mostra como utilizar o Phaser com um exemplo simples. Esse guia esta na pagina oficial do
Phaser escrito em ingles e atualmente nao possui traducao.

4
 2 PREPARANDO O AMBIENTE DE DESENVOLVI-
MENTO

Vamos comecar criando duas pastas chamadas assets e js (embora voce possa colocar o
nome que bem entender) e um arquivo html.

 A pasta assets ira conter as imagens, sons e arquivos visuais usados no jogo.
 A pasta js, ira conter o framework phaser.
 Ja o arquivo html ira conter todo o codigo javascript.

Dentro da pasta js coloque o arquivo phaser.js. E recomendado a utilizacao do arquivo

phaser.js nao-minificado (ao inves do phaser.min.js). O motivo, e que nao e uma boa pratica
tratar o seu motor de jogo como uma caixa preta. E interessante que voce explore o conteudo
do arquivo e o depure corretamente. Nem todas as respostas estarao no Google muitas vezes a
melhor maneira de fazer algo e lendo o codigo original e entendendo-o como funciona, entretanto
por experiencia propria o arquivo minificado tende a dar menos problema.

Dentro da pasta assets coloque as imagens que serao utilizadas. Nesse primeiro exemplo
vamos utilizar 4 imagens png com dimensoes 21 x 21.

Feito isso estamos prontos para comecar.

3 UM POUCO DE HTML

Dentro do arquivo html escreva o seguinte:

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " ISO -8859 -1 " >
5 < title > Phaser 2d </ title >
6 < script src = " js / phaser . min . js " > </ script >
7 </ head >
8 < body >
9 < script >
10 /* todo o codigo vai ser escrito aqui */
11 </ script >
12 </ body >
13 </ html >

Essa e a estrutura basica e um arquivo html e nao ha nele nenhuma novidade. O mais
importante aqui e a inclusao do arquivo phaser.min.js dentro da pasta js.

5
 4 COMECANDO A USAR O PHASER

Agora estamos prontos para escrever o codigo do nosso jogo. Nesta apostila todo o nosso
javascript sera escrito dentro do body do html, mas convem lembrar que voce pode escreve-lo
num arquivo externo e linca-lo ao html. O que e ate recomendado pelos desenvolvedores web.

4.1 CRIANDO UM ESTADO

O Phaser se baseia basicamente em estados. O codigo a seguir cria um estado nomeado

como jogo.

1 // Objeto que contem o estado

2 var jogoState = {
3

4 };
5

6 // cria a instancia do Phaser

7 var game = new Phaser . Game (500 , 200 , Phaser . AUTO , ) ;
8 game . state . add ( jogo , jogoState ) ;
9 // Inicializa o estado ( jogo ) criado .
10 game . state . start ( jogo ) ;

Como se pode ver um estado no Phaser e basicamente a declaracao de um objeto JavaScript.

4.2 METODOS

Nao nos interessa muito criar estados vazios. Na verdade, desejamos que o estado real-
ize alguma(s) tarefa(s) e assim como todo objeto exploramos essa possibilidade por meio de
metodos.

1 // Objeto que contem o estado

2 var jogoState = {
3 preload : function () {
4 // Aqui carregamos sons e imagens .
5 },
6

7 create : function () {
8 // Aqui criamos o jogo .
9 },
10

11 update : function () {
12 /* Aqui atualizamos os dados do jogo a uma taxa de 60 fps . */
13 },
14 };

Os principais metodos utilizados no Phaser sao chamados de:

 init: Esse metodo carrega variaveis que se iniciam com o jogo tais como contadores e etc.
Como inicialmente nao teremos nada do tipo nao sera necessario declara-lo.

6
  preload: Esse metodo e responsavel por carregar imagens e sons que o jogo ira conter.
 create: Esse metodo ira conter o jogo em si.
 update: Esse metodo sera responsavel pela atualizacao dos dados do jogo. Isso sera feito
60 vezes por segundo (60 fps).

Voce pode modificar esses nomes (init, preload, etc.) desde que modifique de forma correta o
modo como se declara o estado (como se sabe o JavaScript possui mais de uma forma de declarar
um objeto), entretanto essa nomenclatura de tao adotada pela comunidade do phaser se tornou
quase oficial. Por isso voce vera esses nomes em quase todos os tutoriais disponveis na internet
(ou livros) o que facilita muito a leitura de codigos criados por terceiros. Aqui nao sera diferente!

Na linha:

1 var game = new Phaser . Game (500 , 200 , Phaser . AUTO , ) ;

Os valores 500 e 200 e o tamanho da tela que o jogo tera. O parametro Phaser.AUTO
da ao Phaser a liberdade de escolher automaticamente entre usar o WebGL ou Canvas para
renderizacao do jogo. Dando preferencia sempre ao WebGL.
Voce pode trocar o AUTO por CANVAS ou WEBGL, entretanto e recomendavel que voce
nao altere esse parametro.
Finalmente, entre as aspas duplas ( ) deve ficar a id da tag (do html) que ira conter o jogo.
Se voce deixar o espaco entre elas vazio entao o jogo sera exibido no canto superior esquerdo
da janela do browser.

4.3 ADICIONANDO IMAGENS

Cada vez que quisermos usar imagens, sons, e etc., primeiro precisamos carrega-los. No caso
de uma imagem estatica, podemos fazer isso usando o: game.load.image na funcao preload.

1 preload : function () {
2 game . load . image ( player , assets / player . png ) ;
3 game . load . image ( wall , assets / wall . png ) ;
4 game . load . image ( coin , assets / coin . png ) ;
5 game . load . image ( enemy , assets / enemy . png ) ;
6 },

Onde o primeiro valor entre aspas simples ( e ) e o novo nome que sera utilizado para fazer
referencia a imagem. E o segundo o caminho para a imagem.

Note que o nosso jogo ira conter 4 imagens e todas elas estao no interior da pasta assets.

4.4 COR DE FUNDO, FISICA E PLAYER

Agora vamos adicionar algumas configuracoes no jogo, para isso, adicione o seguinte dentro
da funcao create().

1 // Muda a cor de fundo para um tom de azul

2 game . stage . backgroundColor = #3598 db ;
3

7
4 // Adiciona o motor ARCADE
5 game . physics . startSystem ( Phaser . Physics . ARCADE ) ;
6

7 // Adiciona a fisica a todos os objetos do jogo

8 game . world . enableBody = true ;

A ARCADE e um motor de jogo que nos permite simular um sistema de fsica no jogo.
O Phaser contem outras tres bibliotecas sendo a ARCADE a mais simples, a que menos exige
do hardware e por experiencia propria a que menos da problema.

Vamos agora adicionar o jogador que podemos controlar com as teclas direcionais. Para isso
adicione o seguinte tambem dentro da funcao create() .

1 // Captura as teclas up , down , left e right .

2 this . cursor = game . input . keyboard . createCursorKeys () ;
3

4 // Cria o jogador nas coordenadas (70 , 100) .

5 this . player = game . add . sprite (70 , 100 , player ) ;
6

7 // Adiciona gravidade ao jogo .

8 this . player . body . gravity . y = 600;

A linha 02 cria um ouvinte (listener) para as teclas up, down, left e right retornando um valor
de true para cada uma delas sempre que forem pressionadas.

A linha 05 cria o player nas coordenadas (70, 100) da tela do jogo usando a imagem que
nomeamos como player (veja item 4.3) na funcao preload.

A linha 08 adiciona uma gravidade ao jogo no valor de 600.

4.4.1 ANCHOR POINT

Se voce testar o codigo agora podera notar que o sprite do player nao esta exatamente
centrado. Isso porque o x e o y que estabelecemos em game.add.sprite e a posicao do canto
superior esquerdo do sprite, tambem chamado de ponto de ancoragem. Portanto, e o canto
superior esquerdo do jogador que esta realmente centrado, como voce pode ver aqui:

Voce pode corrigir isso, embora neste caso nao venha a ser de muita utilidade, alterando a
posicao do ponto de ancoragem. Aqui estao alguns exemplos de como podemos fazer isso:

1 // Definindo o ponto de ancoragem para o canto superior esquerdo da

Sprite ( valor padrao )
2 this . player . anchor . setTo (0 ,0) ;
3

4 // Definir o ponto de ancoragem para a parte superior direita

5 this . player . anchor . setTo (1 , 0) ;
6

7 // Definir o ponto de ancoragem na parte inferior esquerda

8
8 this . player . anchor . setTo (0 , 1) ;
9

10 // Definir o ponto de ancoragem na parte inferior direita

11 this . player . anchor . setTo (1 , 1) ;

0,0 1,0

0,1 1,1

Para centralizar o sprite voce pode definir o ponto de ancoragem para o meio do sprite.
Assim, adicione na funcao create:
1 this . player . anchor . setTo (0.5 , 0.5) ;

4.5 MOVENDO O PLAYER

Adicionamos o player, gravidade, ouvintes para o teclado e toda uma fsica ao mundo. Agora
esta na hora de fazer o jogador andar e saltar. Para isso adicione o seguinte na funcao update()
.

1 // Move o player de acordo com a tecla pressionada

2 if ( this . cursor . left . isDown )
3 this . player . body . velocity . x = -200;
4 else if ( this . cursor . right . isDown )
5 this . player . body . velocity . x = 200;
6 else
7 this . player . body . velocity . x = 0;
8

9 /* Se o player esta no chao e se a tecla up for pressionada o player

realiza um salto */
10 if ( this . cursor . up . isDown && this . player . body . touching . down )
11 this . player . body . velocity . y = -250;

4.6 CRIANDO O NIVEL

O proximo passo e ter um nvel para o nosso jogador. Podemos configura-lo assim, na funcao
create() .

1 // Cria 3 grupos que irao conter alguns objetos

2 this . walls = game . add . group () ;
3 this . coins = game . add . group () ;
4 this . enemies = game . add . group () ;
5

6 // Design de nivel . x = wall , o = coin , ! = lava .

9
7 var level = [
8 x xx xx xx xxx xx xx xxx xx xx x ,
9 ! ! x,
10 ! o x,
11 ! o x,
12 ! x,
13 ! o ! x x,
14 xxxxxxxxxxxxxxxx !!!!! x ,
15 ];

E para realmente ter o nvel exibido, adicione isso logo abaixo do codigo anterior.

1 // Cria um nivel atravez de um array

2 for ( var i = 0; i < level . length ; i ++) {
3 for ( var j = 0; j < level [ i ]. length ; j ++) {
4

5 // Criam muros e os adicionam ( cada um deles ) no grupo walls

6 if ( level [ i ][ j ] == x ) {
7 var wall = game . add . sprite (30+20* j , 30+20* i , wall ) ;
8 this . walls . add ( wall ) ;
9 wall . body . immovable = true ;
10 }
11

12 // Criam moedas e as adicionam ( cada uma delas ) no grupo

coins
13 else if ( level [ i ][ j ] == o ) {
14 var coin = game . add . sprite (30+20* j , 30+20* i , coin ) ;
15 this . coins . add ( coin ) ;
16 }
17

18 // Criam inimigos e os adicionam ao grupo enemies

19 else if ( level [ i ][ j ] == ! ) {
20 var enemy = game . add . sprite (30+20* j , 30+20* i , enemy ) ;
21 this . enemies . add ( enemy ) ;
22 }
23 }
24 }
25 /* Para certificar - se de que as paredes nao comecarao a cair quando o
jogador entrar nelas . */
26 wall . body . immovable = true ;

Observe que esta nao e uma maneira muito eficiente de criar o cenario. Atualmente, temos
cerca de 50 pequenas paredes, mas podemos reduzir esse numero para 4 se esticassemos as
paredes horizontalmente ou verticalmente. Essa otimizacao sera explicada mais a frente.

4.7 LIDANDO COM COLISOES

Finalmente, precisamos lidar com todas as colisoes da nossa plataforma. Para isso acrescente
o codigo a seguir, logo no incio, da funcao update() .

1 // implementa a colisao entre o player e os elementos do grupo walls

2 game . physics . arcade . collide ( this . player , this . walls ) ;
3

4 // se o player e algum elemento do grupo coins colide chama a funcao

tekeCoin

10
5 game . physics . arcade . overlap ( this . player , this . coins , this . takeCoin ,
null , this ) ;
6

7 // se o player e algum elemento do grupo enemies colide chama a funcao

restart
8 game . physics . arcade . overlap ( this . player , this . enemies , this . restart ,
null , this ) ;

E devemos adicionar estas 2 novas funcoes ao nosso estado.

1 // retira o objeto coin do jogo

2 takeCoin : function ( player , coin ) {
3 coin . kill () ;
4 },
5

6 // reinicia o game
7 restart : function () {
8 game . state . start ( jogo ) ;
9 }

4.8 RESULTADO

Aqui esta uma imagem do nosso pequeno jogo de plataformas 2D que construmos juntos.

No proximo tutorial partiremos deste ponto para aprendermos mais sobre o Phaser.

11
 Codigo completo do jogo.
Embora seja tentador recomendo que o leitor nao copie e cole o codigo a seguir, mas que va
escrevendo enquanto tenta se lembrar a funcao de cada linha.

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " ISO -8859 -1 " >
5 < title > Phaser 2d </ title >
6 < script src = " js / phaser . min . js " > </ script >
7 </ head >
8 < body >
9 < script >
10 var jogoState = {
11 preload : function () {
12 game . load . image ( player , assets / image / player . png ) ;
13 game . load . image ( wall , assets / image / wall . png ) ;
14 game . load . image ( coin , assets / image / coin . png ) ;
15 game . load . image ( enemy , assets / image / enemy . png ) ;
16 },
17 create : function () {
18 game . stage . backgroundColor = #3598 db ;
19 game . physics . startSystem ( Phaser . Physics . ARCADE ) ;
20 game . world . enableBody = true ;
21 this . cursor = game . input . keyboard . createCursorKeys () ;
22 this . player = game . add . sprite (70 , 100 , player ) ;
23 this . player . body . gravity . y = 600;
24

25 this . walls = game . add . group () ;

26 this . coins = game . add . group () ;
27 this . enemies = game . add . group () ;
28 var level = [
29 x xx xx xxx xx xx xxx xx xx xx x ,
30 ! ! x,
31 ! o x,
32 ! o x,
33 ! x,
34 ! o ! x x,
35 xxxxxxxxxxxxxxxx !!!!! x ,
36 ];
37

38 // Cria um nivel atravez de um array

39 for ( var i = 0; i < level . length ; i ++) {
40 for ( var j = 0; j < level [ i ]. length ; j ++) {
41

42 /* Cria os blocos que serao os muros e os

adicionam ( cada bloco ) no grupo walls */
43 if ( level [ i ][ j ] == x ) {
44 var wall = game . add . sprite (30+20* j , 30+20* i ,
wall ) ;
45 this . walls . add ( wall ) ;
46 wall . body . immovable = true ;
47 }
48

49 /* Cria as moedas e as adicionam no grupo coins

*/
50 else if ( level [ i ][ j ] == o ) {
51 var coin = game . add . sprite (30+20* j , 30+20* i ,
coin ) ;
52 this . coins . add ( coin ) ;

12
53 }
54

55 // Cria os inimigos e os adicionam no grupo

enemies */
56 else if ( level [ i ][ j ] == ! ) {
57 var enemy = game . add . sprite (30+20* j , 30+20* i ,
enemy ) ;
58 this . enemies . add ( enemy ) ;
59 }
60 }
61 }
62 },
63 update : function () {
64 game . physics . arcade . collide ( this . player , this . walls ) ;
65 game . physics . arcade . overlap ( this . player , this . coins , this .
takeCoin , null , this ) ;
66 game . physics . arcade . overlap ( this . player , this . enemies ,
this . restart , null , this ) ;
67

68 if ( this . cursor . left . isDown )

69 this . player . body . velocity . x = -200;
70 else if ( this . cursor . right . isDown )
71 this . player . body . velocity . x = 200;
72 else
73 this . player . body . velocity . x = 0;
74

75 if ( this . cursor . up . isDown && this . player . body . touching .

down )
76 this . player . body . velocity . y = -250;
77 },
78

79 takeCoin : function ( player , coin ) {

80 coin . kill () ;
81 },
82

83 restart : function () {
84 game . state . start ( jogo ) ;
85 }
86 };
87

88 var game = new Phaser . Game (500 , 200) ;

89 game . state . add ( jogo , jogoState ) ;
90 game . state . start ( jogo ) ;
91 </ script >
92 </ body >
93 </ html >

5 MENU DE JOGO

Normalmente os jogos possuem uma tela inicial antes de tudo. Vamos fazer uma.

Primeiro criamos um novo estado chamado mainState com os metodos preload, e create
e update.

1 var mainState = {
2 preload : function () {
3 game . load . image ( player , assets / image / player . png ) ;

13
4 game . load . image ( wall , assets / image / wall . png ) ;
5 game . load . image ( coin , assets / image / coin . png ) ;
6 game . load . image ( enemy , assets / image / enemy . png ) ;
7 game . load . image ( logo , assets / image / logo . png ) ;
8 },
9 create : function () {
10 game . stage . backgroundColor = #3598 db ;
11 this . cursor = game . input . keyboard . createCursorKeys () ;
12 this . logo = game . add . sprite (70 , 100 , logo ) ;
13 },
14 update : function () {
15 if ( this . game . input . mousePointer . isDown ) {
16 // Chama o estado game
17 game . state . start ( game ) ;
18 }
19 }
20 };

Na funcao preload foi colocado todas as imagens usadas anteriormente mais uma (logo.png)
que sera o logotipo do jogo. Com isso tambem eliminamos a necessidade da funcao no estado
jogoState uma vez que as imagens ja estao sendo carregadas aqui.

Na create mudamos a cor de fundo e colocamos na tela a logomarca escolhida.

Na funcao update foi utilizada um novo metodo o mousePointer. Ele basicamente retorna
um valor de true quando o ponteiro do mouse e pressionado sobre a tela do jogo. Quando isso
ocorrer sera chamado o estado jogo (que e o estado atual do jogo).

Finalmente altere as linhas:

1 game . state . add ( main , mainState ) ;

2 game . state . start ( main ) ;

para

1 // cria o estado menu

2 game . state . add ( menu , mainState ) ;
3 game . state . add ( jogo , jogoState ) ;
4 // chama o estado criado
5 game . state . start ( menu ) ;

Agora criamos um menu bonitinho onde ao clicar na area do jogo o iniciamos.

14
 5.1 ADICIONANDO TEXTO

Voce pode colocar alguma informacao na tela de menu como por exemplo um aviso de que
e necessario clicar na tela para iniciar. O metodo utilizado para tal fim e o text ele deve ser
acrescentado dentro da funcao create.

1 this . game . add . text (180 , 120 , Clique para iniciar ,

2 { font : bold 10 px , fill : #000000 , fontSize : 18 , align : center }
3 );

Os dois primeiros valores sao as coordenadas x e y respectivamente em que o texto sera

colocado. O terceiro valor e o texto propriamente e os demais e a formatacao. E possvel alterar
o estilo da fonte com CSS.

15
 Codigo completo do jogo.

Novamente e apresentado o codigo escrito ate agora, entretanto dessa vez vai ser escrito
apenas o que foi modificado.

1 < script >

2 var mainState = {
3 preload : function () {
4 game . load . image ( player , assets / image / player . png ) ;
5 game . load . image ( wall , assets / image / wall . png ) ;
6 game . load . image ( coin , assets / image / coin . png ) ;
7 game . load . image ( enemy , assets / image / enemy . png ) ;
8 game . load . image ( logo , assets / image / logo . png ) ;
9 },
10 create : function () {
11 game . stage . backgroundColor = #3598 db ;
12 this . logo = game . add . sprite (240 , 90 , logo ) ;
13 this . game . add . text (180 , 120 , Clique para iniciar ,
14 { font : bold 10 px , fill : # fff , fontSize : 18 , align : center }
15 );
16 },
17 update : function () {
18 if ( this . game . input . mousePointer . isDown ) {
19 game . state . start ( jogo ) ;
20 }
21 }
22 };
23

24 var jogoState = {
25 create : function () {
26 /* o codigo que estava aqui */
27

28 },
29 update : function () {
30 /* o codigo que estava aqui */
31 },
32

33 /* o codigo que estava aqui */

34 };
35

36 var game = new Phaser . Game (500 , 200) ;

37 game . state . add ( menu , mainState ) ;
38 game . state . add ( jogo , jogoState ) ;
39 game . state . start ( menu ) ;
40 </ script >

16
 6 DIMENSIONAMENTO DE IMAGENS

Anteriormente foi dito que existe uma forma mais eficiente de criar o cenario. No momento
temos 50 pequenas paredes quando poderamos ter apenas 4 se esticassemos as imagens.

A vantagem de termos poucas paredes e que ao inves de termos de verificar a colisao do

player com cada uma das 50 paredes (ou seja, realizar 50 verificacoes) realizaremos somente 4.
O que exigira menor capacidade de processamento da sua maquina.

No Phaser e possvel modificar as dimensoes das imagens programaticamente. Isso e feito

atraves do metodo scale.

1 preload : function () {
2 game . load . image ( player , player . png ) ;
3 },
4 create : function () {
5 var player = game . add . sprite (20 , 20 , player ) ;
6

7 /* Reduz uma imagem em 50%. Pode ser usado para ampliar imagens
tambem . */
8 player . scale . set (0.5) ;
9 },

Esse mesmo metodo pode ser usado para gerar um escalamento vertical ou horizontal de
forma independente uma da outra.

1 preload : function () {
2 game . load . image ( player , assets / image / player . png ) ;
3 },
4 create : function () {
5 var player = game . add . sprite (20 , 20 , player ) ;
6

7 /* Escala x somente */
8 player . scale . x = 0.3;
9

10 /* Escala y somente */
11 player . scale . y = 0.8;
12 },

Vamos aproveitar o momento e dar uma melhorada no nosso cenario.

Primeiro criamos mais tres funcoes. Vamos escreve-las abaixo da funcao restart.

1 restart : function () {
2 game . state . start ( jogo ) ;
3 },
4

5 writeCoin : function () {
6

7 },
8

9 writeWall : function () {
10

11 },
12

17
13 writeEnemie : function () {
14

15 }

A writeCoin devera colocar as moedas na tela recebendo como parametros a posicao de

cada uma.

1 writeCoin : function (x , y ) {
2 var coin = game . add . sprite (x , y , coin ) ;
3 this . coins . add ( coin ) ;
4 },

As funcoes writeWall e writeEnemie serao responsaveis por colocar os inimigos e paredes

na tela. Ambas recebem um terceiro parametro (w = width) que e o valor do redimensionamento
que a imagem sofrera horizontalmente e um quarto (h = height) que sera o redimensionamento
vertical.

1 writeWall : function (x , y , w , h ) {
2 var wall = game . add . sprite (x , y , wall ) ;
3 wall . scale . x = w ;
4 wall . scale . y = h ;
5 this . walls . add ( wall ) ;
6 wall . body . immovable = true ;
7 },
8

9 writeEnemie : function (x , y , w , h ) {
10 var enemy = game . add . sprite (x , y , enemy ) ;
11 enemy . scale . x = w ;
12 enemy . scale . y = h ;
13 this . enemies . add ( enemy ) ;
14 }

Agora podemos alterar o nosso codigo chamando essas funcoes sempre que necessario. O
codigo completo (com os valores que voce ira precisar passar como parametro) se encontra na
pagina a seguir.

Lembre-se que quanto menos hardware um jogo consome, melhor sera o seu desempenho em
termos de processamento. Cinquenta verificacoes a 60fps para o browser de um PC nao e muito,
mas para um tablet ou smartphone e crtico.

Existe ainda a possibilidade de criar o cenario por meio de um programa especfico (recomenda-
se o Tiled) e salva-lo como um arquivo json.

18
 Codigo completo.

1 var jogoState = {
2 create : function () {
3 // Codigo que estava aqui
4

5 this . enemies = game . add . group () ;

6

7 // inimigos
8 this . writeEnemie (42 , 50 , 1 , 5) ;
9 this . writeEnemie (336 , 155 , 5 , 1) ;
10 this . writeEnemie (200 , 51 , 1 , 1) ;
11 this . writeEnemie (200 , 135 , 1 , 1) ;
12

13 // paredes
14 this . writeWall (42 , 30 , 20 , 1) ;
15 this . writeWall (42 , 155 , 14 , 1) ;
16 this . writeWall (315 , 135 , 1 , 1) ;
17 this . writeWall (441 , 50 , 1 , 6) ;
18

19 // moedas
20 this . writeCoin (200 , 93) ;
21 this . writeCoin (375 , 70) ;
22 this . writeCoin (150 , 134) ;
23 },
24

25 // Codigo que estava aqui

26

27 restart : function () {
28 game . state . start ( jogo ) ;
29 },
30

31 writeCoin : function (x , y ) {
32 var coin = game . add . sprite (x , y , coin ) ;
33 this . coins . add ( coin ) ;
34 },
35

36 writeWall : function (x , y , w , h ) {
37 var wall = game . add . sprite (x , y , wall ) ;
38 wall . scale . x = w ;
39 wall . scale . y = h ;
40 this . walls . add ( wall ) ;
41 wall . body . immovable = true ;
42 },
43

44 writeEnemie : function (x , y , w , h ) {
45 var enemy = game . add . sprite (x , y , enemy ) ;
46 enemy . scale . x = w ;
47 enemy . scale . y = h ;
48 this . enemies . add ( enemy ) ;
49 }
50 };

19