Você está na página 1de 19

CRIANDO JOGOS COM

PHASER

CRIANDO JOGOS COM PHASER www.number.890m.com

www.number.890m.com

CRIANDO JOGOS COM PHASER www.number.890m.com

˜

INTRODUC¸ AO

O objetivo dessa apostila ´e explicar de forma simples e r´apida os conceitos mais b´asicos do uso do framework Phaser para a cria¸c˜ao 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 COMEC¸ANDO A USAR O PHASER

 

6

4.1

CRIANDO UM ESTADO

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

6

´

4.2

M ETODOS

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

6

4.3 ADICIONANDO IMAGENS

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

7

4.4 COR DE FUNDO, F ´ ISICA E PLAYER

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

7

 

4.4.1

ANCHOR POINT

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

8

4.5 MOVENDO O PLAYER

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

8

4.6 CRIANDO O N ´ IVEL .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

9

 

˜

4.7 LIDANDO COM COLIS OES

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

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

1 A GAME ENGINE PHASER www.number.890m.com ´ 1.1 O QUE E O PHASER O Phaser ´e

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 m´oveis, o Phaser ´e suportado no iOS5 para cima e no navegador Safari. No Android, ele ´e suportado a partir da vers˜ao

2.2 para cima tanto no navegador padr˜ao quanto no Chrome mobile. O Phaser roda tamb´em em dispositivos que utilizam o sistema Tizen e perfeitamente no Kindle com ajuda do HTML5 Wrapper, o que significa que vocˆe pode utilizar os jogos nestes dispositivos sem problemas.

1.2 BAIXANDO O PHASER

O projeto do Phaser est´a hospedado no GitHub.

paralelas em desenvolvimento) esses branches s˜ao:

O projeto possui dois branches (vers˜oes

Master: que conta com as ultimas´

Dev: que conta com recursos ainda em desenvolvimento para a vers˜ao final.

atualiza¸c˜oes est´aveis.

A sugest˜ao ´e que vocˆe use sempre a ultima´ vers˜ao est´avel (master). Uma vez que a dev

pode conter alguns bugs. Ap´os baixar o Phaser, recomenda-se que vocˆe siga o guia oficial para

iniciantes (Getting Started Guide). O guia aborda a configura¸c˜ao de um servidor web local, do ambiente de desenvolvimento, e da programa¸c˜ao na nuvem se este for seu interesse. Tamb´em mostra como utilizar o Phaser com um exemplo simples. Esse guia est´a na p´agina oficial do Phaser escrito em inglˆes e atualmente n˜ao possui tradu¸c˜ao.

4

2 PREPARANDO O AMBIENTE DE DESENVOLVI- MENTO

Vamos come¸car criando duas pastas chamadas assets e js (embora vocˆe possa colocar o nome que bem entender) e um arquivo html.

A pasta assets ir´a conter as imagens, sons e arquivos visuais usados no jogo.

A pasta js, ir´a conter o framework phaser.

J´a o arquivo html ir´a conter todo o c´odigo javascript.

´

E recomendado a utiliza¸c˜ao do arquivo

phaser.js n˜ao-minificado (ao inv´es do phaser.min.js). O motivo, ´e que n˜ao ´e uma boa pr´atica

Dentro da pasta js coloque o arquivo phaser.js.

´

E interessante que vocˆe explore o conte´udo

do arquivo e o depure corretamente. Nem todas as respostas estar˜ao no Google muitas vezes a melhor maneira de fazer algo ´e lendo o c´odigo original e entendendo-o como funciona, entretanto por experiˆencia pr´opria o arquivo minificado tende a dar menos problema.

tratar o seu motor de jogo como uma caixa preta.

Dentro da pasta assets coloque as imagens que ser˜ao utilizadas. Nesse primeiro exemplo vamos utilizar 4 imagens png com dimens˜oes 21 x 21.

vamos utilizar 4 imagens png com dimens˜oes 21 x 21. Feito isso estamos prontos para come¸car.

Feito isso estamos prontos para come¸car.

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 b´asica e um arquivo html e n˜ao h´a nele nenhuma novidade. importante aqui ´e a inclus˜ao do arquivo phaser.min.js dentro da pasta js.

5

O mais

4

COMEC¸ ANDO A USAR O PHASER

Agora estamos prontos para escrever o c´odigo do nosso jogo. Nesta apostila todo o nosso javascript ser´a escrito dentro do body do html, mas conv´em lembrar que vocˆe pode escreve-lo num arquivo externo e linca-lo ao html. O que ´e at´e recomendado pelos desenvolvedores web.

4.1 CRIANDO UM ESTADO

O Phaser se baseia basicamente em estados. como jogo.

O c´odigo a seguir cria um estado nomeado

// Objeto que contem o estado 1 var jogoState = { 2 3 }; 4
//
Objeto
que
contem
o
estado
1
var
jogoState
=
{
2
3
};
4
5
//
cria
a
instancia
do
Phaser
6
var
game
=
new
Phaser . Game (500 ,
200 ,
Phaser . AUTO ,
’ )
;
7
game . state . add ( ’ jogo ’ , jogoState ) ;
8
//
Inicializa
o
estado ( jogo )
criado .
9
game . state . start ( ’ jogo ’ ) ;
10
Como se pode ver um estado no Phaser ´e basicamente a declara¸c˜ao de um objeto JavaScript.
´
4.2
M ETODOS
N˜ao 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
m´etodos.
//
Objeto
que
contem
o
estado
1
var
jogoState
=
{
2
preload :
function ()
{
3
//
Aqui
carregamos
sons
e
imagens .
4
}
,
5
6
create :
function ()
{
7
//
Aqui
criamos
o
jogo .
8
}
,
9
10
update :
function ()
{
11
/*
Aqui
atualizamos
os
dados
do
jogo
a
uma
taxa
de
60
fps . */
12
}
,
13
};
14

Os principais m´etodos utilizados no Phaser s˜ao chamados de:

init: Esse m´etodo carrega vari´aveis que se iniciam com o jogo tais como contadores e etc. Como inicialmente n˜ao teremos nada do tipo n˜ao ser´a necess´ario declara-lo.

6

preload: Esse m´etodo ´e respons´avel por carregar imagens e sons que o jogo ir´a conter.

create: Esse m´etodo ir´a conter o jogo em si.

update: Esse m´etodo ser´a respons´avel pela atualiza¸c˜ao dos dados do jogo. Isso ser´a feito 60 vezes por segundo (60 fps).

Vocˆe 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 t˜ao adotada pela comunidade do phaser se tornou quase oficial. Por isso vocˆe ver´a esses nomes em quase todos os tutoriais dispon´ıveis na internet (ou livros) o que facilita muito a leitura de c´odigos criados por terceiros. Aqui n˜ao ser´a 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 ter´a. O parˆametro Phaser.AUTO d´a ao Phaser a liberdade de escolher automaticamente entre usar o WebGL ou Canvas para renderiza¸c˜ao do jogo. Dando preferˆencia sempre ao WebGL. Vocˆe pode trocar o AUTO por CANVAS ou WEBGL, entretanto ´e recomend´avel que vocˆe n˜ao altere esse parˆametro. Finalmente, entre as aspas duplas (’ ’) deve ficar a id da tag (do html) que ir´a conter o jogo. Se vocˆe deixar o espa¸co entre elas vazio ent˜ao o jogo ser´a 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 est´atica, podemos fazer isso usando o: game.load.image na fun¸c˜ao preload.

1

preload :

 

function ()

{

2

3

4

5

6

} ,

game . load . image ( ’ player ’ ,

game . load . image ( ’ wall ’ ,

game . load . image ( ’ coin ’ ,

game . load . image ( ’ enemy ’ ,

’ assets / ’ assets / ’ assets / ’ assets /

player . png ’ ) ; wall . png ’ ) ; coin . png ’ ) ; enemy . png ’ ) ;

 

Onde o primeiro valor entre aspas simples (’ e ’) ´e o novo nome que ser´a utilizado para fazer referˆencia a imagem. E o segundo o caminho para a imagem.

 

Note que o nosso jogo ir´a conter 4 imagens e todas elas est˜ao no interior da pasta assets.

 

´

 

4.4

COR DE FUNDO, F ISICA E PLAYER

 

Agora vamos adicionar algumas configura¸c˜oes no jogo, para isso, adicione o seguinte dentro da fun¸c˜ao create().

1

2

//

game . stage . backgroundColor

Muda

a

cor

de

fundo

para

=

um ’ #3598 db ’ ;

tom

de

azul

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 f´ısica no jogo.

O

Phaser cont´em outras trˆes bibliotecas sendo a ARCADE a mais simples, a que menos exige

 

do hardware e por experiˆencia pr´opria a que menos d´a problema.

 

Vamos agora adicionar o jogador que podemos controlar com as teclas direcionais. Para isso adicione o seguinte tamb´em dentro da fun¸c˜ao 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) . ’ player ’ ) ;

   

5

this . player

=

game . add . sprite (70 ,

100 ,

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 fun¸c˜ao preload.

 
 

A

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

 

4.4.1

ANCHOR POINT

 

Se vocˆe testar o c´odigo agora poder´a notar que o sprite do player n˜ao est´a exatamente centrado. Isso porque o x e o y que estabelecemos em game.add.sprite ´e a posi¸c˜ao do canto superior esquerdo do sprite, tamb´em chamado de ponto de ancoragem. Portanto, ´e o canto superior esquerdo do jogador que est´a realmente centrado, como vocˆe pode ver aqui:

Vocˆe pode corrigir isso, embora neste caso n˜ao venha a ser de muita utilidade, alterando a posi¸c˜ao do ponto de ancoragem. Aqui est˜ao 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

 
(1 , 1) ;       0,0 1,0   0,1 1,1   Para centralizar o
(1 , 1) ;       0,0 1,0   0,1 1,1   Para centralizar o
(1 , 1) ;       0,0 1,0   0,1 1,1   Para centralizar o
(1 , 1) ;       0,0 1,0   0,1 1,1   Para centralizar o

0,1

1,1

 

Para centralizar o sprite vocˆe pode definir o ponto de ancoragem para o meio do sprite. Assim, adicione na fun¸c˜ao 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 f´ısica ao mundo. Agora

 

est´a na hora de fazer o jogador andar e saltar. Para isso adicione o seguinte na fun¸c˜ao 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

11

if

( this . cursor . up . isDown

&&

this . player . body . touching . down ) =

-250;

this . player . body . velocity . y

 
 

´

 

4.6

CRIANDO O N IVEL

 

O pr´oximo passo ´e ter um n´ıvel para o nosso jogador. Podemos configur´a-lo assim, na fun¸c˜ao 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

’ xxxxxxxxxxxxxxxxxxxxxx ’ ,

 

9

!

!

x ’ ,

10

!

o

x ’ ,

11

!

o

x ’ ,

12

!

x ’ ,

13

!

o

!

x

x ’ ,

14

’ xxxxxxxxxxxxxxxx !!!!! x ’ ,

15

];

 

E para realmente ter o n´ıvel exibido, adicione isso logo abaixo do c´odigo 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 n˜ao ´e uma maneira muito eficiente de criar o cen´ario. Atualmente, temos cerca de 50 pequenas paredes, mas podemos reduzir esse n´umero para 4 se estic´assemos as paredes horizontalmente ou verticalmente. Essa otimiza¸c˜ao ser´a explicada mais `a frente.

 

˜

 

4.7

LIDANDO COM COLIS OES

 

Finalmente, precisamos lidar com todas as colis˜oes da nossa plataforma. Para isso acrescente o c´odigo a seguir, logo no in´ıcio, da fun¸c˜ao update() .

1

//

implementa

a

colisao

entre

o

player

e

os this . walls ) ;

elementos

do

grupo

walls

 

2

game . physics . arcade . collide ( this . player ,

 

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 fun¸c˜oes 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 est´a uma imagem do nosso pequeno jogo de plataformas 2D que constru´ımos juntos.

pequeno jogo de plataformas 2D que constru´ımos juntos. No pr´oximo tutorial partiremos deste ponto para

No pr´oximo tutorial partiremos deste ponto para aprendermos mais sobre o Phaser.

11

C´odigo completo do jogo. Embora seja tentador recomendo que o leitor n˜ao copie e cole o c´odigo a seguir, mas que v´a escrevendo enquanto tenta se lembrar a fun¸c˜ao 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 ’ ,

game . load . image ( ’ wall ’ ,

game . load . image ( ’ coin ’ ,

game . load . image ( ’ enemy ’ ,

’ assets / image / player . png ’ ) ; ’ assets / image / wall . png ’ ) ; ’ assets / image / coin . png ’ ) ; ’ assets / image / enemy . png ’ ) ;

 

13

14

15

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

=

100 ,

’ player ’ ) ;

 

23

24

game . add . sprite (70 , =

600;

this . player . body . gravity . y

 

25

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

26

this . coins = game . add . group () ;

27

this . enemies

=

game . add . group () ;

28

var

level

=

[

29

 

’ xxxxxxxxxxxxxxxxxxxxxx ’ ,

 

30

!

!

o

!

x

o

x ’ , x ’ , x ’ , x ’ , x ’ ,

31

!

32

!

33

!

34

!

o

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

( cada

==

que bloco ) ’ x ’ )

serao

os

{

no

adicionam

muros

grupo

e ’ walls ’

os

*/

43

if

   

44

 

( level [ i ][ j ] =

var

wall

wall ’ ) ;

game . add . sprite (30+20* j ,

30+20* i ,

45

 

46

 

this . walls . add ( wall ) ; =

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 // Cria os inimigos e os adicionam no grupo ’ 55 enemies
}
53
54
//
Cria
os
inimigos
e
os
adicionam
no
grupo
55
enemies ’
*/
else
if
( level [ i ][ j ]
==
!
’ )
{
56
var
enemy
=
game . add . sprite (30+20* j ,
30+20* i ,
57
’ enemy ’ ) ;
this . enemies . add ( enemy ) ;
58
}
59
}
60
}
61
}
,
62
update :
function
() {
63
game . physics . arcade . collide ( this . player ,
64
game . physics . arcade . overlap ( this . player ,
this . walls ) ;
this . coins ,
this .
65
takeCoin ,
null ,
this ) ;
game . physics . arcade . overlap ( this . player ,
this . enemies ,
66
this . restart ,
null ,
this ) ;
67
if
( this . cursor . left . isDown )
68
this . player . body . velocity . x
=
-200;
69
else
if
70
this . player . body . velocity . x
( this . cursor . right . isDown )
=
200;
71
else
72
this . player . body . velocity . x
=
0;
73
74
if
( this . cursor . up . isDown
&&
this . player . body . touching .
75
down )
this . player . body . velocity . y
=
-250;
76
}
,
77
78
takeCoin :
function ( player ,
coin )
{
79
coin . kill () ;
80
}
,
81
82
restart :
function ()
{
83
game . state . start ( ’ jogo ’ ) ;
84
}
85
};
86
87
var
game
=
new
Phaser . Game (500 ,
200) ;
88
game . state . add ( ’ jogo ’ ,
jogoState ) ;
89
game . state . start ( ’ jogo ’ ) ;
90
</ script >
91
</ body >
92
</ html >
93
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 m´etodos preload, e create
e update.
var
mainState
=
{
1
preload :
function
() {
2
game . load . image ( ’ player ’ ,
’ assets / image / player . png ’ ) ;
3

13

4

 

game . load . image ( ’ wall ’ ,

game . load . image ( ’ coin ’ ,

game . load . image ( ’ enemy ’ ,

game . load . image ( ’ logo ’ ,

’ assets / image / wall . png ’ ) ; ’ assets / image / coin . png ’ ) ; ’ assets / image / enemy . png ’ ) ; ’ assets / image / logo . png ’ ) ;

5

6

7

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 fun¸c˜ao preload foi colocado todas as imagens usadas anteriormente mais uma (logo.png) que ser´a o logotipo do jogo. Com isso tamb´em eliminamos a necessidade da fun¸c˜ao no estado jogoState uma vez que as imagens j´a est˜ao sendo carregadas aqui.

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

Na fun¸c˜ao update foi utilizada um novo m´etodo o mousePointer. Ele basicamente retorna um valor de true quando o ponteiro do mouse ´e pressionado sobre a tela do jogo. Quando isso ocorrer ser´a 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.

. start ( ’ menu ’ ) ;   Agora criamos um menu bonitinho onde ao

14

5.1

ADICIONANDO TEXTO

Vocˆe pode colocar alguma informa¸c˜ao na tela de menu como por exemplo um aviso de que

´e necess´ario clicar na tela para iniciar. O m´etodo utilizado para tal fim ´e o text ele deve ser acrescentado dentro da fun¸c˜ao 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 s˜ao as coordenadas x e y respectivamente em que o texto ser´a

 

´

colocado. O terceiro valor ´e o texto propriamente e os demais ´e a formata¸c˜ao.

E poss´ıvel alterar

o

estilo da fonte com CSS.

´e o texto propriamente e os demais ´e a formata¸c˜ao. E poss´ıvel alterar o estilo da

15

C´odigo completo do jogo.

Novamente ´e apresentado o c´odigo escrito at´e agora, entretanto dessa vez vai ser escrito apenas o que foi modificado.

< script > 1 var mainState = { 2 preload : function () { 3
< script >
1
var
mainState
=
{
2
preload :
function
() {
3
game . load . image ( ’ player ’ ,
4
game . load . image ( ’ wall ’ ,
5
game . load . image ( ’ coin ’ ,
6
game . load . image ( ’ enemy ’ ,
7
game . load . image ( ’ logo ’ ,
’ assets / image / player . png ’ ) ;
’ assets / image / wall . png ’ ) ;
’ assets / image / coin . png ’ ) ;
’ assets / image / enemy . png ’ ) ;
’ assets / image / logo . png ’ ) ;
8
}
,
9
create :
function
() {
10
game . stage . backgroundColor
=
’ #3598 db ’ ;
11
this . logo
=
game . add . sprite (240 ,
90 ,
’ logo ’ ) ;
12
this . game . add . text (180 ,
120 ,
’ Clique
para
iniciar ’ ,
13
{
font :
’ bold
10 px ’ ,
fill :
’ # fff ’ ,
fontSize :
18 ,
align :
’ center ’
}
14
)
;
15
} ,
16
update :
function
() {
17
if
( this . game . input . mousePointer . isDown )
{
18
game . state . start ( ’ jogo ’ ) ;
19
}
20
}
21
};
22
23
var
jogoState
=
{
24
create :
function
() {
25
/*
o
codigo
que
estava
aqui
*/
26
27
}
,
28
update :
function
() {
29
/*
o
codigo
que
estava
aqui
*/
30
}
,
31
32
/*
o
codigo
que
estava
aqui
*/
33
};
34
35
var
game
=
new
Phaser . Game (500 ,
200) ;
36
game . state . add ( ’ menu ’ ,
mainState ) ;
37
game . state . add ( ’ jogo ’ ,
jogoState ) ;
38
game . state . start ( ’ menu ’ ) ;
39
</ script >
40

16

6

DIMENSIONAMENTO DE IMAGENS

Anteriormente foi dito que existe uma forma mais eficiente de criar o cen´ario. No momento temos 50 pequenas paredes quando poder´ıamos ter apenas 4 se estic´assemos as imagens.

A vantagem de termos poucas paredes ´e que ao inv´es de termos de verificar a colis˜ao do player com cada uma das 50 paredes (ou seja, realizar 50 verifica¸c˜oes) realizaremos somente 4. O que exigir´a menor capacidade de processamento da sua m´aquina.

No Phaser ´e poss´ıvel modificar as dimens˜oes das imagens programaticamente. Isso ´e feito atrav´es do m´etodo 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 m´etodo 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 cen´ario.

 

Primeiro criamos mais trˆes fun¸c˜oes. Vamos escreve-las abaixo da fun¸c˜ao 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 dever´a colocar as moedas na tela recebendo como parˆametros a posi¸c˜ao de cada uma.

1

writeCoin :

function (x ,

y )

{

 

2

 

var

coin

=

game . add . sprite (x ,

y ,

’ coin ’ ) ;

3

this . coins . add ( coin ) ;

 

4

}

,

As fun¸c˜oes writeWall e writeEnemie ser˜ao respons´aveis por colocar os inimigos e paredes na tela. Ambas recebem um terceiro parˆametro (w = width) que ´e o valor do redimensionamento que a imagem sofrer´a horizontalmente e um quarto (h = height) que ser´a 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 ) ; =

wall . body . immovable