19

Criando jogos com Phaser

Embed Size (px)

Citation preview

Page 1: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 1/19

Page 2: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 2/19

INTRODUC AO

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

Diego Oliveira.2017 |  [email protected]

www.number.890m.com

2

Page 3: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 3/19

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

Page 4: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 4/19

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 HTML5criado pela Photon Storm. Seu foco e criar jogos que rodam em navegadores como o InternetExplorer 9 para cima, Firefox, Chrome e Safari. Em dispositivos moveis, o Phaser e suportadono iOS5 para cima e no navegador Safari. No Android, ele e suportado a partir da versao2.2 para cima tanto no navegador padrao quanto no Chrome mobile. O Phaser roda tambemem dispositivos que utilizam o sistema Tizen e perfeitamente no Kindle com ajuda do HTML5Wrapper, 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 (versoesparalelas 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 devpode 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, doambiente de desenvolvimento, e da programacao na nuvem se este for seu interesse. Tambemmostra como utilizar o Phaser com um exemplo simples. Esse guia esta na pagina oficial doPhaser escrito em ingles e atualmente nao possui traducao.

4

Page 5: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 5/19

2 PREPARANDO O AMBIENTE DE DESENVOLVI-

MENTO

Vamos comecar criando duas pastas chamadas  assets   e   js   (embora voce possa colocar onome 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 arquivophaser.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 conteudodo 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, entretantopor experiencia propria o arquivo minificado tende a dar menos problema.

Dentro da pasta   assets   coloque as imagens que serao utilizadas. Nesse primeiro exemplovamos 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   < ! D O C T Y P E h t ml >

2   < h t m l >

3   < h e a d >

4   < m e ta c h ar s et = " I S O - 8 8 5 9 - 1 ">

5   < t i tl e > P h a s er 2 d < / t i tl e >

6   < s c ri p t s rc = " j s / p h a s e r . m i n . j s "></script >

7   </head>

8   < b o d y >

9   <script >

10   / * to do o co di go v ai s er e s cr it o a qu i */

11   </script >

12   </body>

13   </html>

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

5

Page 6: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 6/19

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 b ody do html, mas convem lembrar que voce pode escreve-lonum arquivo externo e l inca-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 nomeadocomo   jogo.

1

  / / O b je to q ue c on te m o e st ad o2   v ar j og oS ta te = {

3

4   };

5

6   / / c r ia a i ns ta nc ia d o P ha se r

7   v ar g am e =   ne w   P h as e r . G a m e ( 5 00 , 2 0 0 , P h a s er . A U T O ,   ’ ’) ;

8   g a m e . s t a t e . a d d ( ’ j o g o ’, j o go S ta t e ) ;

9   / / I n i c i al i za o e s ta d o ( j o g o ) c r i a do .

10   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

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

1   / / O b je to q ue c on te m o e st ad o

2   v ar j og oS ta te = {

3   p r el o ad : f u nc t io n ( ) {

4   / / A qu i c a rr eg am o s s on s e i ma ge ns .

5   } ,6

7   c r ea t e : f u nc t io n ( ) {

8   / / A qu i c ri am os o j og o .

9   } ,

10

11   u p da t e : f u nc t io n ( ) {

12   / * A qu i a t ua li z am o s o s d ad os do jo go a u ma ta xa de 60 fp s . */

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

Page 7: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 7/19

  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 feito60 vezes por segundo (60 fps).

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

Na linha:

1   v ar g am e =   ne w   P h as e r . G a m e ( 5 00 , 2 0 0 , P h a s er . A U T O ,   ’ ’) ;

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 pararenderizacao do jogo. Dando preferencia sempre ao WebGL.

Voce pode trocar o  AUTO por CANVAS ou  WEBGL, entretanto e recomendavel que vocenao 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 esquerdoda janela do browser.

4.3 ADICIONANDO IMAGENS

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

1   p r el o ad : f u nc t io n ( ) {

2   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ a s se t s / p l a y er . p n g ’ );

3   g a m e . l o a d . i m a g e ( ’ w a l l ’,   ’ a s s e ts / w a ll . p n g ’) ;

4   g a m e . l o a d . i m a g e ( ’ c o i n ’,   ’ a s s e ts / c o in . p n g ’) ;

5   g a m e . l o a d . i m a g e ( ’ e n e m y ’,   ’ a s se t s / e n e m y . p n g ’) ;

6   } ,

Onde o primeiro valor entre aspas simples (’ e ’) e o novo nome que sera utilizado para fazerreferencia 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 dentroda funcao create().

1   // M ud a a co r d e f un do p ar a u m t om de a zu l

2   g a m e . s t a ge . b a c k g r o un d C o l o r =   ’ # 3 5 9 8 d b ’;

3

7

Page 8: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 8/19

4   / / A di ci on a o m ot or A RC AD E

5   g a m e . p h y s i c s . s t a r t S y s t e m ( P h a s e r . P h y s i c s . A R C A D E ) ;

6

7   / / A di ci on a a f is ic a a t od os o s o bj et os d o j o go

8   g a m e . w o r ld . e n a b l e B o d y =   true ;

A  ARCADE  e um motor de jogo que nos permite simular um sistema de fısica 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 issoadicione o seguinte tambem dentro da funcao create() .

1   / / C ap tu ra a s t e c la s u p , d ow n , l ef t e r ig ht .

2   this . c u r s o r = g a m e . i n p ut . k e y b o a r d . c r e a t e C u r s o r K ey s ( ) ;3

4   / / C ri a o j og ad or n as c o or de n ad as ( 70 , 1 00 ) .

5   this . p l a ye r = g a me . a d d . s pr i te ( 7 0 , 1 00 ,   ’ p l a y e r ’) ;

6

7   / / A d i c i on a g r av i d ad e a o j o g o .

8   this . p l a ye r . b o dy . g r a vi t y . y = 6 0 0;

A linha 02 cria um ouvinte (listener) para as teclas up, down, left e right retornando um valorde 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 exatamentecentrado. Isso porque o x e o y que estabelecemos em game.add.sprite e a posicao do cantosuperior esquerdo do sprite, tambem chamado de  ponto de ancoragem. Portanto, e o cantosuperior 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 aposicao do ponto de ancoragem. Aqui estao alguns exemplos de como podemos fazer isso:

1   / / D ef in i nd o o p on to d e a nc or ag em p ar a o c an to s up er io r e sq ue rd o d a

S p ri t e ( v a lo r p a dr a o )

2   this . p l a y e r . a n c h o r . s e t T o ( 0 , 0 ) ;

3

4   / / D ef in ir o p on to d e a nc or a ge m p ar a a p ar te s up er io r d ir ei ta

5   this . p l a y e r . a n c h o r . s e t To ( 1 , 0 ) ;

6

7   / / D ef in ir o p on to d e a nc or a ge m n a p ar te i nf er io r e sq ue rd a

8

Page 9: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 9/19

8   this . p l a ye r . a n ch o r . s et T o ( 0 , 1 ) ;

9

10   / / D ef in ir o p on to d e a nc or a ge m n a p ar te i nf er io r d ir ei ta

11   this . p l a ye r . a n ch o r . s et T o ( 1 , 1 ) ;

0,0

0,1

1,0

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 . p l a y e r . a n c h o r . s e t To ( 0 .5 , 0 . 5 ) ;

4.5 MOVENDO O PLAYER

Adicionamos o player, gravidade, ouvintes para o teclado e toda uma fısica ao mundo. Agora

esta na hora de fazer o jogador andar e saltar. Para isso adicione o seguinte na funcao update().

1   / / M o ve o p la ye r d e a co rd o c om a t ec la p re s si on a da

2   if   ( this . c u r s o r . l e f t . i s D o w n )

3   this . p l a ye r . b od y . v e lo c it y . x = - 20 0;

4   e l se i f   ( this . c u r s o r . r i g h t . i s D o w n )

5   this . p l a ye r . b od y . v e lo c it y . x = 2 0 0;

6   else

7   this . p l a ye r . b od y . v e lo c it y . x = 0 ;

8

9   /* S e o p la ye r e st a no c ha o e se a t ec la up f or p re ss io na da o p la ye r

r ea li za u m s al to * /

10   if   ( this . c u r s o r . u p . i s D o wn & &   this . p l a y e r . b o d y . t o u c h i n g . d o w n )11   this . p l a ye r . b od y . v e lo c it y . y = - 25 0;

4.6 CRIANDO O NIVEL

O proximo passo e ter um nıvel para o nosso jogador. Podemos configura-lo assim, na funcaocreate() .

1   / / C ri a 3 g ru po s q ue i ra o c on te r a lg un s o bj et os

2

  this . w a ll s = g a me . a d d . g ro u p () ;3   this . c o in s = g a me . a d d . g ro u p () ;

4   this . e n e mi e s = g a me . a d d . g ro u p () ;

5

6   // D es ig n d e n iv el . x = wa ll , o = co in , ! = l av a.

9

Page 10: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 10/19

7   v ar l ev el = [

8   ’ x x x x x x x x x x x x x x x x x x x x x x ’ ,

9   ’! ! x ’ ,

10   ’! o x ’ ,

11   ’! o x ’ ,

12   ’! x ’ ,

13   ’! o ! x x ’ ,

14   ’ x x x x x x x x x x x x x x x x ! ! ! ! ! x ’ ,

15   ];

E para realmente ter o nıvel exibido, adicione isso logo abaixo do codigo anterior.

1   / / C r ia u m n i v el a tr av ez d e u m a rr ay

2   fo r   ( var i = 0 ; i < l ev el . le ng th ; i ++ ) {

3

  fo r   ( v ar j = 0 ; j < l ev el [ i]. l en gt h ; j + +) {4

5   / / C ri am mu ro s e o s a di ci on a m ( c ad a u m d el es ) n o g ru po ’ wa ll s ’

6   if   ( l e v e l [ i ][ j ] = =   ’x ’) {

7   v ar w al l = g a me . a d d . s pr i te ( 3 0 + 20 * j , 3 0 +2 0 * i ,   ’ w a l l ’) ;

8   this . w a l l s . a d d ( w a l l ) ;

9   w a l l . b o d y . i m m o v ab l e =   true ;

10   }

11

12   / / C ri am m oe da s e a s a di ci on am ( ca da um a d el as ) n o g ru po ’

c o i n s ’

13   e l se i f   ( l e v e l [ i ][ j ] = =   ’o ’) {

14   v ar c oi n = g a me . a d d . s pr i te ( 3 0 + 20 * j , 3 0 +2 0 * i ,   ’ c o i n ’) ;

15   this . c o i n s . a d d ( c o i n ) ;

16   }17

18   / / C ri am in im ig os e o s a di c io na m a o g ru po ’ e ne mi es ’

19   e l se i f   ( l e v e l [ i ][ j ] = =   ’! ’) {

20   v ar e n em y = g a me . a d d . s pr i te ( 3 0 + 20 * j , 3 0 +2 0 * i ,   ’ e n e m y ’);

21   this . e n e m i e s . a d d ( e n e m y ) ;

22   }

23   }

24   }

25   / * P ar a c er ti fi ca r - se d e q ue a s p ar ed es n ao c om ec ar ao a c ai r q ua nd o o

j o ga d or e n tr a r n e la s . * /

26   w a l l . b o d y . i m m o v a b l e =   true ;

Observe que esta nao e uma maneira muito eficiente de criar o cenario. Atualmente, temoscerca de 50 pequenas paredes, mas podemos reduzir esse numero para 4 se esticassemos asparedes 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 acrescenteo codigo a seguir, logo no inıcio, da funcao update() .

1   / / i mp l em en ta a c ol is ao e nt re o p la ye r e o s e le me nt os d o g ru po w al ls

2   g a m e . p h y s i c s . a r c a d e . c o l l i d e ( this .player ,   this . w a l l s ) ;

3

4   / / s e o p la ye r e a lg um e le me nt o d o g ru po c oi ns c ol id e c ha ma a f un ca o

tekeCoin

10

Page 11: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 11/19

5   g a m e . p h y s i c s . a r c a d e . o v e r l a p ( this .player ,   this . c o i n s ,   this .take Coin ,

null ,   this );

6

7   / / s e o p la ye r e a lg um e le me nt o d o g ru po e ne mi es c ol id e c ha ma a f un ca o

restart

8   g a m e . p h y s i c s . a r c a d e . o v e r l a p ( this .player ,   this .enemies ,   this .restart ,

null ,   this );

E devemos adicionar estas 2 novas funcoes ao nosso estado.

1   / / r e t ir a o o bj et o c oi n d o j og o

2   t a k e C oi n : f u n c t i on ( p l a y e r , c o i n ) {

3   c o i n . k i l l ( ) ;

4   } ,

5

6   / / r e i ni ci a o g am e

7   r e st a rt : f u nc t io n ( ) {

8   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

9   }

4.8 RESULTADO

Aqui esta uma imagem do nosso pequeno jogo de plataformas 2D que construımos juntos.

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

11

Page 12: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 12/19

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   < ! D O C T Y P E h t ml >

2   < h t m l >

3   < h e a d >

4   < m e ta c h ar s et = " I S O - 8 8 5 9 - 1 ">

5   < t i tl e > P h a s er 2 d < / t i tl e >

6   < s c ri p t s rc = " j s / p h a s e r . m i n . j s "></script >

7   </head>

8   < b o d y >

9   <script >

10   v ar j og oS ta t e = {

11   p r el o ad : f u nc t io n ( ) {

12   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ a s s e t s / i m a g e / p l a y e r . p n g ’) ;13   g a m e . l o a d . i m a g e ( ’ w a l l ’,   ’ a s s e t s / i m a g e / w a l l . p n g ’) ;

14   g a m e . l o a d . i m a g e ( ’ c o i n ’,   ’ a s s e t s / i m a g e / c o i n . p n g ’) ;

15   g a m e . l o a d . i m a g e ( ’ e n e m y ’,   ’ a s s e t s / i m a g e / e n e m y . p n g ’) ;

16   } ,

17   c r ea t e : f u nc t io n ( ) {

18   g a m e . s t a ge . b a c k g r o u n d C o l o r =   ’ # 3 5 9 8 d b ’;

19   g a m e . p h y s i c s . s t a r t S y s t e m ( P h a s e r . P h y s i c s . A R C A D E ) ;

20   g a m e . w o r ld . e n a b l e B o d y =   true ;

21   this . c u r s o r = g a m e . i n p ut . k e y b o a r d . c r e a t e C u r s o r K e ys ( ) ;

22   this . p l ay e r = g am e . a dd . s p r it e ( 70 , 1 00 ,   ’ p l a y e r ’) ;

23   this . p l ay e r . b od y . g r av i ty . y = 6 00 ;

24

25   this . w a ll s = g a me . a d d . g ro u p () ;

26   this . c o in s = g a me . a d d . g ro u p () ;

27   this . e n e mi e s = g a me . a d d . gr o up ( ) ;

28   v ar l ev el = [

29   ’ x x x x x x x x x x x x x x x x x x x x x x ’ ,

30   ’! ! x ’ ,

31   ’! o x ’ ,

32   ’! o x ’ ,

33   ’! x ’ ,

34   ’! o ! x x ’ ,

35   ’ x x x x x x x x x x x x x x x x ! ! ! ! ! x ’ ,

36   ];

37

38   / / C ri a u m n iv el a tr av ez d e u m a rr ay

39   fo r   ( va r i = 0; i < l ev el . le ng th ; i ++ ) {40   fo r   ( v ar j = 0; j < l ev el [ i] . le ng th ; j ++ ) {

41

42   /* C ri a o s b lo co s q ue s er ao o s m ur os e os

a d i ci o na m ( c a da b l oc o ) n o g r up o ’ w a ll s ’ * /

43   if   ( l e v e l [ i ][ j ] = =   ’x ’) {

44   v ar w a ll = g am e . a dd . s p r it e ( 3 0 +2 0 * j , 3 0 +2 0 * i ,   ’

w a l l ’) ;

45   this . w a l l s . a d d ( w a l l ) ;

46   w a l l . b o dy . i m m o v a b l e =   true ;

47   }

48

49   / * C ri a a s m oe da s e a s a di ci on a m n o g ru po ’ c oi ns ’

*/

50   e l se i f   ( l e v e l [ i ][ j ] = =   ’o ’) {51   v ar c o in = g am e . a dd . s p r it e ( 3 0 +2 0 * j , 3 0 +2 0 * i ,   ’

c o i n ’) ;

52   this . c o i n s . a d d ( c o i n ) ;

12

Page 13: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 13/19

53   }

54

55   / / C ri a o s i ni mi go s e o s a d ic io na m n o g ru po ’

e n em i es ’ * /

56   e l se i f   ( l e v e l [ i ][ j ] = =   ’! ’) {

57   v ar e n em y = g am e . a dd . s p r it e ( 3 0 +2 0 * j , 3 0 +2 0 * i ,

’ e n e m y ’) ;

58   this . e n e m i e s . a d d ( e n e m y ) ;

59   }

60   }

61   }

62   } ,

63   u p da t e : f u nc t io n ( ) {

64   g a m e . p h y s i c s . a r c a d e . c o l l i d e ( this .player ,   this . w a l l s ) ;

65   g a m e . p h y s i c s . a r c a d e . o v e r l a p ( this .player ,   this . c o i n s ,   this .

takeCoin ,   null ,   this ) ;

66   g a m e . p h y s i c s . a r c a d e . o v e r l a p ( this .player ,   this .enemies ,this .restar t ,   null ,   this ) ;

67

68   if   ( this . c u r s o r . l e f t . i s D o w n )

69   this . p l a y e r . b o d y . v e l o c it y . x = - 2 00 ;

70   e l se i f   ( this . c u r s o r . r i g h t . i s D o w n )

71   this . p l ay e r . b od y . v e lo c it y . x = 2 00 ;

72   else

73   this . p l ay e r . b od y . v e lo c it y . x = 0 ;

74

75   if   ( this . c u r s o r . u p . i s D o wn & &   this . p l a y e r . b o d y . t o u c h i n g .

down)

76   this . p l a y e r . b o d y . v e l o c it y . y = - 2 50 ;

77   } ,

78

79   t a k e C oi n : f u n c t io n ( p l a y er , c o i n ) {

80   c o i n . k i l l ( ) ;

81   } ,

82

83   r e st a rt : f u nc t io n ( ) {

84   g a m e . s t a t e . s t a r t ( ’ j o g o ’);

85   }

86   };

87

88   v ar g am e =   new   P h a se r . G a m e ( 5 00 , 2 0 0 ) ;

89   g a m e . s t a t e . a d d ( ’ j o g o ’, j o go S t at e ) ;

90   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

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   v ar m ai nS ta te = {

2   p r el o ad : f u nc t io n ( ) {

3   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ a s s e t s / i m a g e / p l a y e r . p n g ’) ;

13

Page 14: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 14/19

4   g a m e . l o a d . i m a g e ( ’ w a l l ’,   ’ a s s e t s / i m a g e / w a l l . p n g ’);

5   g a m e . l o a d . i m a g e ( ’ c o i n ’,   ’ a s s e t s / i m a g e / c o i n . p n g ’);

6   g a m e . l o a d . i m a g e ( ’ e n e m y ’,   ’ a s s e t s / i m a g e / e n e m y . p n g ’) ;

7   g a m e . l o a d . i m a g e ( ’ l o g o ’,   ’ a s s e t s / i m a g e / l o g o . p n g ’);

8   } ,

9   c r ea t e : f u nc t io n ( ) {

10   g a m e . s t a ge . b a c k g r o u n d C o l o r =   ’ # 3 5 9 8 d b ’;

11   this . c u r s o r = g a m e . i n p ut . k e y b o a r d . c r e a t e C u r s o r K e ys ( ) ;

12   this . l o go = g a me . a d d . s pr i te ( 7 0 , 1 00 ,   ’ l o g o ’) ;

13   } ,

14   u p da t e : f u nc t io n ( ) {

15   if   ( this . g a m e . i n p u t . m o u s e P o i nt e r . i s D o w n ) {

16   / / C ha ma o e st ad o g am e

17   g a m e . s t a t e . s t a r t ( ’ g a m e ’);

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 retornaum valor de true quando o ponteiro do mouse e pressionado sobre a tela do jogo. Quando issoocorrer sera chamado o estado   jogo (que e o estado atual do jogo).

Finalmente altere as linhas:

1   g a m e . s t a t e . a d d ( ’ m a i n ’, m a in S ta t e ) ;

2   g a m e . s t a t e . s t a r t ( ’ m a i n ’) ;

para

1   / / c r ia o e st ad o m en u

2   g a m e . s t a t e . a d d ( ’ m e n u ’, m a in S ta t e ) ;

3   g a m e . s t a t e . a d d ( ’ j o g o ’, j o go S ta t e ) ;

4   / / c ha ma o e st ad o c ri ad o

5   g a m e . s t a t e . s t a r t ( ’ m e n u ’) ;

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

14

Page 15: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 15/19

5.1 ADICIONANDO TEXTO

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

1   this . g a m e . a d d . t e x t ( 18 0 , 1 2 0 ,   ’ C l iq u e p a ra i n ic i ar ’ ,

2   { f o nt :   ’ b o ld 1 0 px ’ , f il l :   ’ # 0 0 0 0 0 0 ’ , f o nt S iz e : 1 8 , a l ig n :   ’ c e n t e r ’   }

3   ) ;

Os dois primeiros valores sao as coordenadas x e y respectivamente em que o texto seracolocado. O terceiro valor e o texto propriamente e os demais e a formatacao.   E possıvel alteraro estilo da fonte com CSS.

15

Page 16: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 16/19

Codigo completo do jogo.

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

1   <script >

2   v ar m ai nS ta t e = {

3   p r el o ad : f u nc t io n ( ) {

4   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ a s s e t s / i m a g e / p l a y e r . p n g ’) ;

5   g a m e . l o a d . i m a g e ( ’ w a l l ’,   ’ a s s e t s / i m a g e / w a l l . p n g ’) ;

6   g a m e . l o a d . i m a g e ( ’ c o i n ’,   ’ a s s e t s / i m a g e / c o i n . p n g ’) ;

7   g a m e . l o a d . i m a g e ( ’ e n e m y ’,   ’ a s s e t s / i m a g e / e n e m y . p n g ’) ;

8   g a m e . l o a d . i m a g e ( ’ l o g o ’,   ’ a s s e t s / i m a g e / l o g o . p n g ’) ;

9   } ,

10   c r ea t e : f u nc t io n ( ) {

11   g a m e . s t a ge . b a c k g r o u n d C o l o r =   ’ # 3 5 9 8 d b ’;12   this . l o go = g a me . a d d . s pr i te ( 2 40 , 9 0 ,   ’ l o g o ’);

13   this . g a m e . a d d . t e x t ( 18 0 , 1 20 ,   ’ C l iq u e p a ra i n ic i ar ’ ,

14   { f o nt :   ’ b o ld 1 0 px ’ , f il l :   ’ # f f f ’ , f on tS iz e : 1 8, a li gn :   ’ c e n t e r ’   }

15   ) ;

16   } ,

17   u p da t e : f u nc t io n ( ) {

18   if   ( this . g a m e . i n p u t . m o u s e P o in t e r . i s D o w n ) {

19   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

20   }

21   }

22   };

23

24   v ar j og oS ta t e = {

25   c r ea t e : f u nc t io n ( ) {

26   / * o c od ig o q ue e st av a a qu i * /

27

28   } ,

29   u p da t e : f u nc t io n ( ) {

30   / * o c od ig o q ue e st av a a qu i * /

31   } ,

32

33   / * o c od ig o q ue e st av a a qu i * /

34   };

35

36   v ar g am e =   new   P h a se r . G a m e ( 5 00 , 2 0 0 ) ;

37   g a m e . s t a t e . a d d ( ’ m e n u ’, m a in S t at e ) ;

38   g a m e . s t a t e . a d d ( ’ j o g o ’, j o go S t at e ) ;39   g a m e . s t a t e . s t a r t ( ’ m e n u ’) ;

40   </script >

16

Page 17: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 17/19

6 DIMENSIONAMENTO DE IMAGENS

Anteriormente foi dito que existe uma forma mais eficiente de criar o cenario. No momentotemos 50 pequenas paredes quando poderıamos ter apenas 4 se esticassemos as imagens.

A vantagem de termos poucas paredes e que ao inves de termos de verificar a colisao doplayer 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 possıvel modificar as dimensoes das imagens programaticamente. Isso e feitoatraves do metodo  scale.

1   p r el o ad : f u nc t io n ( ) {

2   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ p l a y e r . p n g ’) ;

3   } ,

4   c r ea t e : f u n c t io n ( ) {

5   v ar p l ay e r = g a me . a d d . s pr i te ( 2 0 , 2 0 ,   ’ p l a y e r ’) ;

6

7   / * Re du z u ma i m a ge m e m 5 0% . P od e s er u s a do p ar a a m pl ia r i m ag en s

tambem.*/

8   p l a y e r . s c a l e . s e t ( 0 . 5 ) ;

9   } ,

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

1   p r el o ad : f u nc t io n ( ) {

2   g a m e . l o a d . i m a g e ( ’ p l a y e r ’,   ’ a s s e t s / i m a g e / p l a y e r . p n g ’);

3   } ,

4   c r ea t e : f u n c t io n ( ) {

5   v ar p l ay e r = g a me . a d d . s pr i te ( 2 0 , 2 0 ,   ’ p l a y e r ’) ;

6

7   / * E sc al a x s om en te * /

8   p l ay e r . s ca l e . x = 0 .3 ;

9

10   / * E sc al a y s om en te * /

11   p l ay e r . s ca l e . 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   r e st a rt : f u nc t io n ( ) {

2   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

3   } ,

4

5   w r i t e Co i n : f u n c t i o n ( ) {

6

7   } ,

8

9   w r i t e Wa l l : f u n c t i o n ( ) {

10

11   } ,

12

17

Page 18: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 18/19

13   w r i t e E ne m i e : f u n c t i o n ( ) {

14

15   }

A  writeCoin  devera colocar as moedas na tela recebendo como parametros a posicao decada uma.

1   w r it e Co i n : f u nc t io n ( x , y ) {

2   v ar c o in = g a me . a d d . s pr i te ( x , y ,   ’ c o i n ’) ;

3   this . c o i n s . a d d ( c o i n ) ;

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 redimensionamentoque a imagem sofrera horizontalmente e um quarto (h = height) que sera o redimensionamentovertical.

1   w ri te Wa ll : f un ct io n (x , y , w , h ) {

2   v ar w a ll = g a me . a d d . s pr i te ( x , y ,   ’ w a l l ’) ;

3   w a ll . s c al e . x = w ;

4   w a ll . s c al e . y = h ;

5   this . w a l l s . a d d ( w a l l ) ;

6   w a l l . b o d y . i m m o v ab l e =   true ;

7   } ,

8

9   w ri t eE ne m ie : f un ct io n (x , y , w , h ) {

10   v ar e n em y = g am e . a dd . s p r it e ( x , y ,   ’ e n e m y ’);11   e n em y . s c al e . x = w ;

12   e n em y . s c al e . y = h ;

13   this . e n e m i e s . a d d ( e n e m y ) ;

14   }

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

Lembre-se que quanto menos hardware um jogo consome, melhor sera o seu desempenho emtermos de processamento. Cinquenta verificacoes a 60fps para o browser de um PC nao e muito,

mas para um tablet ou smartphone e crıtico.

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

18

Page 19: Criando jogos com Phaser

8/16/2019 Criando jogos com Phaser

http://slidepdf.com/reader/full/criando-jogos-com-phaser 19/19

Codigo completo.

1   v ar j og oS ta te = {

2   c r ea t e : f u nc t io n ( ) {

3   / / C o di g o q ue e s ta v a a q ui

4

5   this . e n e mi e s = g a me . a d d . g ro u p () ;

6

7   / / i n i m i go s

8   this . w r i t eE n e mi e ( 42 , 5 0 , 1 , 5 ) ;

9   this . w r i t eE n e mi e ( 3 36 , 1 55 , 5 , 1 ) ;

10   this . w r i t eE n e mi e ( 2 00 , 5 1 , 1 , 1 ) ;

11   this . w r i t eE n e mi e ( 2 00 , 1 35 , 1 , 1 ) ;

12

13   / / p a re d es14   this . w r i te W a ll ( 4 2 , 3 0 , 2 0 , 1 ) ;

15   this . w r i te W a ll ( 4 2 , 1 55 , 1 4 , 1 ) ;

16   this . w r i te W a ll ( 3 15 , 1 35 , 1 , 1 ) ;

17   this . w r i te W a ll ( 4 41 , 5 0 , 1 , 6 ) ;

18

19   / / m o ed a s

20   this . w r i t e C o i n ( 2 00 , 9 3 ) ;

21   this . w r i t e C o i n ( 3 75 , 7 0 ) ;

22   this . w r i t e C o i n ( 1 50 , 1 3 4 ) ;

23   } ,

24

25   / / C o di g o q ue e s ta v a a q ui

26

27   r e st a rt : f u nc t io n ( ) {28   g a m e . s t a t e . s t a r t ( ’ j o g o ’) ;

29   } ,

30

31   w r it e Co i n : f u nc t i on ( x , y ) {

32   v ar c o in = g a me . a d d . s pr i te ( x , y ,   ’ c o i n ’) ;

33   this . c o i n s . a d d ( c o i n ) ;

34   } ,

35

36   w r it e Wa l l : f u nc t i on ( x , y , w , h ) {

37   v ar w a ll = g a me . a d d . s pr i te ( x , y ,   ’ w a l l ’) ;

38   w a ll . s c a le . x = w ;

39   w a ll . s c a le . y = h ;

40

  this . w a l l s . a d d ( w a l l ) ;41   w a l l . b o dy . i m m o v a b l e =   true ;

42   } ,

43

44   w r i te E ne m i e : f u nc t io n ( x , y , w , h ) {

45   v ar e n em y = g a me . a d d . s pr i te ( x , y ,   ’ e n e m y ’) ;

46   e n em y . s c al e . x = w ;

47   e n em y . s c al e . y = h ;

48   this . e n e m i e s . a d d ( e n e m y ) ;

49   }

50   };