Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

02 - Phaser (II)

No description
by

Alex Rios

on 13 February 2018

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 02 - Phaser (II)

Llenguatges de Marques
Videojocs i Oci Digital
Phaser (II):
Index
Grups
TextureAtlas
Animacions
Sons

Grups
Phaser pot mantenir els objectes del joc agrupats.
L'array d'objectes es gestiona internament.
És possible accedir a l'array i als sprites que hi afegim.
Les operacions es poden aplicar a un grup i, per tant, a tots els sprites de dins. Ex: rotar un grup rota tots els sprites de dins
Serveixen també per a simular les físiques: gravetat, col·lisions...
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Phaser
Grups
Grups
Exemple: volem detectar si els trets del personatge col·lisionen amb els enemics.
Els trets i els enemics es poden agrupar i demanar fer la comprovació de tot el grup amb el grup dels enemics.
Per a generar el grup i assignar a cada element un objecte físic:
shotsList = game.add.group();
shotsList.enableBody = true;
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Grups
Quan generem l'sprite l'afegim al grup amb

shot=shotsList.create(player.x+player.width, player.y,'shot');

Per recórrer els sprites del grup i actualitzar la seva posició fem

for (i=0;i<shotsList.children.length;i++)
shotsList.children[i].x+=10;
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Col·lisions
Per a què les col·lisions funcionin cal activar el sistema de física a la funció
create()

game.physics.startSystem(Phaser.Physics.ARCADE);

Les col·lisions només es poden detectar si els sprites i els grups tenen activat un objecte físic

per sprite: game.physics.arcade.enable(enemy);
per grup: shotsList.enableBody = true;
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Col·lisions
La comprovació de les col·lisions es fa a la funció
update()
Cal fer-la a cada frame

game.physics.arcade.overlap(enemy, shotsList, destroyEnemy, null, this);

Aquesta funció comprova la col·lisió entre Sprite-Sprite, Sprite-Grup, Grup-Grup
Quan es produeix la col·lisió s'executa la funció especificada al tercer paràmetre.
En el nostre cas, una col·lisió entre un enemis i qualsevol sprite del grup shotsList provoca l'execució de "destroyEnemy", que podria ser

function destroyEnemy (enemy, shot) {
enemy.kill();
}
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Exercici 6

Fer que els trets i els enemics es guardin en un grup i actualitzar la seva posició recorrent els fills.

Detectar la col·lisió entre els trets usant la funció overlap (Grup-Grup). Cal eliminar l'sprite del grup amb

function destroyEnemy (enemy, shot) {
enemygroup.remove(enemy);
}
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
TextureAtlas

Una manera eficient de guardar les imatges que s'utilitzen en un joc és utilitzar un TextureAtlas





És una imatge que conté moltes textures.
Avantatge: només es carrega una imatge en memòria
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
TextureAtlas

Per a poder accedir a cada subimatge (també anomenat TextureRegion) cal un índex que ens doni informació de la mida, posició, nom... de cadascuna d'elles.





Aquest índex s'anomena atlas i se sol emmagatzemar en un fitxer XML o jason.

Hi ha dues eines que ens poden ajudar a fer i desfer TextureAtlas: ShoeBox (per a separar imatges) i TexturePacker (per a unir imatges i crear l'atlas). Leshy ofereix una eina online
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
TextureAtlas

És molt important que les imatges tinguin un nom identificatiu ABANS de crear l'atlas.
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
"filename": "settings.png",
"frame": {"x":401,"y":678,"w":90,"h":90},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":90,"h":90},
"sourceSize": {"w":90,"h":90}
TextureAtlas

Amb TexturePacker es pot crear l'atlas i el fitxer amb la descripció de cada subimatge
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
TextureAtlas

Amb TexturePacker es pot crear l'atlas i el fitxer amb la descripció de cada subimatge
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
{"frames": [

{
"filename": "arch.png",
"frame": {"x":1,"y":1,"w":403,"h":401},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":403,"h":401},
"sourceSize": {"w":403,"h":401}
},
{
"filename": "bluesquare.png",
"frame": {"x":326,"y":404,"w":120,"h":116},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":120,"h":116},
"sourceSize": {"w":120,"h":116}
},
{
"filename": "cancel.png",
"frame": {"x":406,"y":83,"w":77,"h":78},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":77,"h":78},
"sourceSize": {"w":77,"h":78}
},
TextureAtlas

Des de Phaser podem llegir l'atlas i accedir a les subimatges amb el nom del fitxer que es va assignar.



Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
game.load.atlas('candy', 'assets/candy.png', 'assets/candy.json', Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);


game.add.sprite(100,100,'candy', 'bluesquare.png'); // afegeix l'sprite al joc directament
{"frames": [

{
"filename": "arch.png",
"frame": {"x":1,"y":1,"w":403,"h":401},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":403,"h":401},
"sourceSize": {"w":403,"h":401}
},
{
"filename": "bluesquare.png",
"frame": {"x":326,"y":404,"w":120,"h":116},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":120,"h":116},
"sourceSize": {"w":120,"h":116}
},
{
"filename": "cancel.png",
"frame": {"x":406,"y":83,"w":77,"h":78},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":77,"h":78},
"sourceSize": {"w":77,"h":78}
},
També pot ser JSONHash
Animacions

Per a crear sprites animats es fa servir un TextureAtlas que conté tots els frames de totes les animacions del personatge animat.

Tots els frames d'una animació han de tenir el mateix prefix



Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Exercici 7

Crear un atlas per a tots els sprites del joc
La nau principal
Els enemics
Els trets
Les vides
Els power ups
...



Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Animacions

Un cop carregat l'atlas amb la funció load.atlas cal crear un sprite i afegir-li totes les seves animacions





La funció add demana el noms de tots els frames que formen l'animació.
La funció generateFrameNames genera un array de noms que corresponen als frames de l'animació.



Això genera


Per últim només queda executar l'animació


la funció play té dos paràmetres més (útils per a explosions, per exemple



15 és el número de frames per segon
el false per a indicar que l'animació NO fa loop
el true per a indicar que l'animació es destrueix automàticament quan acaba
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
game.load.atlas('bug', 'assets/bug.png', 'assets/bug.json', Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);

bicho=game.add.sprite(200,200,'bug');
bicho.animations.add('left', Phaser.Animation.generateFrameNames('left',1,4,'.png',2),10,true);
bicho.animations.add('right', Phaser.Animation.generateFrameNames('right',1,4,'.png',2),10,true);
Phaser.Animation.generateFrameNames('left', 1, 4, '.png', 2)
Prefix dels noms
Numero inicial
Número final
Sufix
Quantitat de xifres de la numeració
left01.png, left02.png, left03.png, left04.png
bicho.animations.play('left');
Nom de l'animació
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Exercici 8: Animar la nau principal

Exercici 9: Fer que un enemic tingui 2 animacions per moure's a dreta i esquerra i que es mogui en pantalla canviant de direcció cada cert temps.

Exercici 10: Afegir l'animació d'explosió tant per la nau principal com pels enemics.

Exercici 11: Afegir sons
Quan es dispara
Quan es produeix l'explosió
Música de fons
Música de Game Over
Phaser(II)
Autor: Alejandro Ríos
alex.rios.jerez@gmail.com
Grups
Sons

De la mateixa manera que qualsevol altre asset, cal carregar els fitxers de sons en memòria a preload
mp3 i ogg són els formats més aconsellables


Despres cal afegir el so al joc a create


i per últim, reproduir-lo a la funció que pertoqui



Abans de reproduir el so es pot decidir si es vol en loop i el volum amb la funció
game.load.audio('shotsound', 'assets/sounds/shot.ogg');
shotsound=game.add.audio('shotsound');
shotsound.play();
music.loopFull(0.2);
Nom de l'atlas
Per afegir l'sprite a un grup cal fer servir la funció add.

blue=game.add.sprite(100,100,'candy', 'bluesquare.png'); // afegeix l'sprite al joc directament
bluegroup.add(blue); //bluegroup és la variable que representa un grup
https://www.leshylabs.com/apps/sstool/
explosion.animations.play('explosion', 15, false, true);
Full transcript