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

HOME

Els efectes de partícules són una eina fonamental per afegir espectacularitat i dinamisme als teus jocs. S’utilitzen per simular fenòmens com explosions, foc, fum, espurnes, neu, pluja i molts altres efectes visuals. Phaser proporciona un sistema de partícules potent i flexible que et permet crear aquests efectes de manera senzilla i eficient.

Conceptes clau dels sistemes de partícules

Emissor de partícules (Emitter): Objecte encarregat de generar i controlar les partícules.
Partícula: Element visual individual (pot ser una imatge, sprite o forma) que es mou i canvia amb el temps.
Configuració de l’emissor: Paràmetres que defineixen com, quan i on es generen les partícules (velocitat, angle, gravetat, vida útil, etc.).
Textura de la partícula: Imatge o sprite utilitzat per representar cada partícula.
Efectes comuns: Explosions, pluja, foc, fum, màgia, etc.

Com crear un efecte de partícules a Phaser

Carregar la textura de la partícula

Abans de crear l’emissor, cal carregar la imatge que s’utilitzarà com a partícula.

// Al mètode preload de la teva escena
this.load.image('spark', 'assets/particles/spark.png');

Explicació:
Aquesta línia carrega una imatge anomenada spark.png que servirà com a textura de les partícules.

Crear l’emissor de partícules

Un cop carregada la textura, pots crear un emissor de partícules a la teva escena.

// Al mètode create de la teva escena
const particles = this.add.particles('spark');

const emitter = particles.createEmitter({
    x: 400,
    y: 300,
    speed: { min: -200, max: 200 },
    angle: { min: 0, max: 360 },
    scale: { start: 0.5, end: 0 },
    alpha: { start: 1, end: 0 },
    lifespan: 1000,
    quantity: 5,
    blendMode: 'ADD'
});

Explicació detallada:

Paràmetre	Descripció
`x`, `y`	Posició inicial de l’emissor.
`speed`	Velocitat de les partícules (pot ser un valor o un rang).
`angle`	Direcció de les partícules (en graus, pot ser un rang).
`scale`	Escala de la partícula (de `start` a `end` durant la seva vida).
`alpha`	Transparència de la partícula (de `start` a `end`).
`lifespan`	Vida útil de cada partícula (en mil·lisegons).
`quantity`	Nombre de partícules generades per emissió.
`blendMode`	Mode de mescla per a efectes visuals (ex: 'ADD' per a efectes brillants).

Modificar l’emissor en temps real

Pots canviar les propietats de l’emissor durant el joc per crear efectes dinàmics.

// Exemple: moure l’emissor amb el ratolí
this.input.on('pointermove', function (pointer) {
    emitter.setPosition(pointer.x, pointer.y);
});

Explicació:
Això fa que l’emissor segueixi la posició del ratolí, creant un efecte de rastre.

Exercicis pràctics

Exercici 1: Crear una explosió de partícules

Enunciat:
Crea un efecte d’explosió que es generi quan l’usuari fa clic a qualsevol lloc de la pantalla. Utilitza una imatge de partícula i fes que les partícules s’expandeixin des del punt de clic i desapareguin.

Pista:
Utilitza l’esdeveniment pointerdown i la funció explode de l’emissor.

Solució

// Al mètode create
const particles = this.add.particles('spark');
const emitter = particles.createEmitter({
    speed: { min: 100, max: 300 },
    scale: { start: 0.5, end: 0 },
    lifespan: 800,
    quantity: 20,
    on: false // L’emissor no emet contínuament
});

this.input.on('pointerdown', function (pointer) {
    emitter.explode(20, pointer.x, pointer.y);
});

Explicació:

L’emissor està desactivat (on: false) i només genera partícules quan es crida explode.
Cada clic genera 20 partícules des del punt de clic.

Exercici 2: Pluja de partícules

Enunciat:
Crea un efecte de pluja on les partícules cauen des de la part superior de la pantalla de manera contínua.

Solució

// Al mètode create
const particles = this.add.particles('spark');
const emitter = particles.createEmitter({
    x: { min: 0, max: 800 },
    y: 0,
    speedY: { min: 200, max: 400 },
    lifespan: 1200,
    scale: { start: 0.2, end: 0.1 },
    quantity: 2,
    blendMode: 'NORMAL'
});

Explicació:

Les partícules es generen a l’atzar al llarg de la part superior (x: { min: 0, max: 800 }).
Cauen cap avall amb una velocitat vertical (speedY).
L’efecte simula una pluja suau.

Errors comuns i consells

Error comú	Solució/Consell
No es veuen les partícules	Comprova que la imatge s’ha carregat correctament i que l’emissor està actiu.
Massa partícules alhora (rendiment baix)	Redueix la quantitat o la vida útil de les partícules.
Les partícules no desapareixen	Assegura’t que el `lifespan` sigui adequat i que l’`alpha` o `scale` acabi a 0.
Efecte massa suau o massa brusc	Ajusta els paràmetres de `speed`, `scale`, `alpha` i `lifespan` per afinar-lo.

Resum

Els sistemes de partícules permeten crear efectes visuals dinàmics i atractius.
Un emissor controla la generació i comportament de les partícules.
Pots personalitzar la textura, la velocitat, la direcció, la vida útil i molts altres paràmetres.
Phaser facilita la creació i gestió d’aquests efectes amb una API senzilla.
Practica creant diferents efectes per dominar el sistema de partícules.

Pròxim pas:
A la següent secció aprendràs a utilitzar tweens i animacions per donar encara més vida als teus jocs!

Efectes de partícules

Conceptes clau dels sistemes de partícules

Com crear un efecte de partícules a Phaser

Carregar la textura de la partícula

Crear l’emissor de partícules

Modificar l’emissor en temps real

Exercicis pràctics

Exercici 1: Crear una explosió de partícules

Solució

Exercici 2: Pluja de partícules

Solució

Errors comuns i consells

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