El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els grups de sprites són una eina fonamental a Phaser per organitzar, gestionar i manipular múltiples sprites de manera eficient. Aquesta funcionalitat és especialment útil quan treballem amb molts objectes similars, com enemics, projectils o col·leccionables.

Conceptes clau

Sprite: Un objecte gràfic que es pot moure, animar i interactuar dins del joc.
Grup de sprites: Una col·lecció de sprites que es poden gestionar conjuntament.
Gestió col·lectiva: Permet aplicar accions, propietats o comportaments a tots els membres del grup d’una sola vegada.
Optimització: Facilita la gestió de memòria i rendiment quan es treballa amb molts objectes.

Per què utilitzar grups de sprites?

Situació	Avantatge d’usar grups
Molts enemics o objectes similars	Creació i gestió eficient
Aplicar comportaments comuns	Codi més net i mantenible
Col·lisions entre molts objectes	Detecció i gestió més fàcil
Afegir o eliminar objectes dinàmicament	Simplifica la gestió de la memòria

Creació d’un grup de sprites

A Phaser, pots crear un grup de sprites de diverses maneres. El més habitual és utilitzar this.physics.add.group() si vols que els membres tinguin física, o this.add.group() si no la necessiten.

Exemple bàsic: Crear un grup buit

// Crear un grup buit amb física
const enemics = this.physics.add.group();

Explicació:
Aquesta línia crea un grup anomenat enemics que pot contenir sprites amb física. Inicialment, el grup està buit.

Exemple: Afegir sprites al grup

// Afegir un sprite individualment
const enemic = enemics.create(100, 200, 'enemicSprite');

Explicació:
El mètode create(x, y, clau) afegeix un nou sprite al grup a la posició (100, 200) utilitzant la imatge amb la clau 'enemicSprite'.

Exemple: Crear múltiples sprites automàticament

// Crear 10 enemics alineats horitzontalment
enemics.createMultiple({
    key: 'enemicSprite',
    repeat: 9, // 1 + 9 = 10 enemics
    setXY: { x: 100, y: 200, stepX: 70 }
});

Explicació:

key: clau de la imatge del sprite.
repeat: nombre d’elements addicionals (9 + 1 inicial = 10).
setXY: posició inicial i increment per a cada sprite (cada enemic estarà separat per 70 píxels en l’eix X).

Iterar i gestionar els membres d’un grup

Pots aplicar accions a tots els membres d’un grup fàcilment.

Exemple: Iterar sobre tots els membres

enemics.children.iterate(function(enemic) {
    enemic.setVelocityX(Phaser.Math.Between(-100, 100));
});

Explicació:
Aquesta funció recorre tots els enemics i els assigna una velocitat horitzontal aleatòria.

Exemple: Eliminar un sprite del grup

enemics.remove(enemic, true, true);

Explicació:
El primer paràmetre és el sprite a eliminar. El segon (true) elimina el sprite del grup, i el tercer (true) el destrueix completament de la memòria.

Col·lisions i grups

Els grups són molt útils per gestionar col·lisions massives.

this.physics.add.collider(jugador, enemics, colisioJugadorEnemic, null, this);

Explicació:
Aquesta línia detecta col·lisions entre el jugador i qualsevol membre del grup enemics. Quan es produeix una col·lisió, es crida la funció colisioJugadorEnemic.

Exercicis pràctics

Exercici 1: Crear i gestionar un grup d’estrelles

Enunciat:
Crea un grup de 5 estrelles alineades verticalment. Fes que, quan el jugador toqui una estrella, aquesta desaparegui.

Pista:
Utilitza this.physics.add.group() i la detecció de superposició (overlap).

Solució

// Crear el grup d'estrelles
const estrelles = this.physics.add.group({
    key: 'estrella',
    repeat: 4,
    setXY: { x: 400, y: 100, stepY: 60 }
});

// Funció per recollir una estrella
function recollirEstrella(jugador, estrella) {
    estrella.disableBody(true, true);
}

// Detecció de superposició
this.physics.add.overlap(jugador, estrelles, recollirEstrella, null, this);

Explicació:

Es creen 5 estrelles (1 + 4 repeats) alineades verticalment.
Quan el jugador toca una estrella, la funció recollirEstrella la desactiva i la fa invisible.

Exercici 2: Aplicar una acció a tots els membres d’un grup

Enunciat:
Fes que tots els enemics d’un grup saltin (velocitat Y negativa) quan el jugador prem la tecla espaiadora.

Solució

// Dins del mètode update
if (this.input.keyboard.checkDown(this.input.keyboard.addKey('SPACE'), 250)) {
    enemics.children.iterate(function(enemic) {
        enemic.setVelocityY(-300);
    });
}

Explicació:

Quan es prem la barra espaiadora, tots els enemics reben una velocitat vertical cap amunt.

Error comú:
Oblidar afegir física als sprites del grup farà que setVelocityY no tingui efecte.

Consells addicionals

Utilitza grups per a qualsevol col·lecció d’objectes similars que necessitin comportaments o gestió col·lectiva.
Recorda eliminar o desactivar els membres del grup quan ja no siguin necessaris per optimitzar el rendiment.
Pots crear subgrups o utilitzar etiquetes per diferenciar tipus d’objectes dins d’un mateix grup.

Resum

En aquesta secció has après:

Què són els grups de sprites i per què són útils.
Com crear, afegir i eliminar membres d’un grup.
Com aplicar accions col·lectives i gestionar col·lisions.
Exercicis pràctics per consolidar els coneixements.

Els grups de sprites són una eina potent per mantenir el teu codi organitzat i eficient, especialment en jocs amb molts objectes similars. Ara ja estàs preparat per aprofundir en la física i la interactivitat del teu joc!

Grups de sprites i gestió

Conceptes clau

Per què utilitzar grups de sprites?

Creació d’un grup de sprites

Exemple bàsic: Crear un grup buit

Exemple: Afegir sprites al grup

Exemple: Crear múltiples sprites automàticament

Iterar i gestionar els membres d’un grup

Exemple: Iterar sobre tots els membres

Exemple: Eliminar un sprite del grup

Col·lisions i grups

Exercicis pràctics

Exercici 1: Crear i gestionar un grup d’estrelles

Solució

Exercici 2: Aplicar una acció a tots els membres d’un grup

Solució

Consells addicionals

Resum

Phaser - Desenvolupament de jocs amb JavaScript

Mòdul 1: Introducció al desenvolupament de jocs i Phaser

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

Mòdul 5: Món del joc i càmera

Mòdul 6: Àudio i interfície d’usuari

Mòdul 7: Arquitectura del joc i gestió d’estats

Mòdul 8: Funcionalitats avançades de joc

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final