Il est difficile d’imaginer un jeu sans effet de particules, par exemple pour des explosions. Comme noue n’avons pas encore abordé ce sujet on va le faire dans ce chapitre en l’appliquant immédiatement pour notre jeu.
Une librairie pour les particules
Pixi n’est pas équipé pour générer des particules, il faut donc faire appel à une autre librairie. Mais comme nous avons de la chance il existe une librairie spécialement conçue pour fonctionner avec Pixi : pixi-particles.js :
On a d’ailleurs déjà prévu de la charger, nous allons maintenant voir son fonctionnement.
Un éditeur interactif
Comme on a encore plus de chance on dispose d’un éditeur interactif pour mettre au point l’effet :
Il suffit de charger la texture qu’on veut utiliser et de jouer avec tous les réglages.
Quand on est satisfait on clique sur le bouton « Download » :
Et on récupère un fichier JSON de ce genre :
{
"alpha": {
"start": 1,
"end": 0.38
},
"scale": {
"start": 1,
"end": 1,
"minimumScaleMultiplier": 2
},
"color": {
"start": "#ffffff",
"end": "#ffffff"
},
"speed": {
"start": 200,
"end": 200
},
"acceleration": {
"x": 8,
"y": 15
},
"startRotation": {
"min": 50,
"max": 360
},
"rotationSpeed": {
"min": 0,
"max": 11
},
"lifetime": {
"min": 0.63,
"max": 0.96
},
"blendMode": "normal",
"frequency": 0.028,
"emitterLifetime": 1,
"maxParticles": 1000,
"pos": {
"x": 0,
"y": 0
},
"addAtBack": false,
"spawnType": "circle",
"spawnCircle": {
"x": 0,
"y": 0,
"r": 40
}
}
La bonne nouvelle c’est qu’on peut utiliser directement tout ça dans notre code.
Le fichier particles
Pour poursuivre avec notre organisation on va mettre tout ce qui concerne les particules dans un fichier distinct :
Et évidemment prévoir son chargement dans index.html :
<!-- Load Crazy Bird --> <script src="js/game.js"></script> <script src="js/boot.js"></script> <script src="js/particles.js"></script>
On aura besoin de particules dans deux cas :
-
explosion d’un avion
-
explosion de l’oiseau
Voilà le code du fichier :
/* global PIXI, C */
C.particles = {
// properties
birdParticles: undefined,
planeParticles: undefined,
setParticles: function () {
this.birdParticles = new cloudkid.Emitter(
C.stage,
[PIXI.Texture.fromFrame('birdParticle.png')],
{
"alpha": {
"start": 1,
"end": 0.38
},
"scale": {
"start": 2.3,
"end": 2.3,
"minimumScaleMultiplier": 1.96
},
"color": {
"start": "#ffffff",
"end": "#ffffff"
},
"speed": {
"start": 200,
"end": 200
},
"acceleration": {
"x": 4,
"y": 8
},
"startRotation": {
"min": 50,
"max": 360
},
"rotationSpeed": {
"min": 0,
"max": 3
},
"lifetime": {
"min": 0.63,
"max": 0.76
},
"blendMode": "normal",
"frequency": 0.023,
"emitterLifetime": 0.7,
"maxParticles": 30,
"pos": {
"x": 0,
"y": 0
},
"addAtBack": false,
"spawnType": "circle",
"spawnCircle": {
"x": 0,
"y": 0,
"r": 40
}
}
);
this.birdParticles.emit = false;
this.planeParticles = new cloudkid.Emitter(
C.stage,
[PIXI.Texture.fromFrame('planeParticle.png')],
{
"alpha": {
"start": 1,
"end": 0.38
},
"scale": {
"start": 1,
"end": 1,
"minimumScaleMultiplier": 2
},
"color": {
"start": "#ffffff",
"end": "#ffffff"
},
"speed": {
"start": 200,
"end": 200
},
"acceleration": {
"x": 8,
"y": 15
},
"startRotation": {
"min": 50,
"max": 360
},
"rotationSpeed": {
"min": 0,
"max": 11
},
"lifetime": {
"min": 0.63,
"max": 0.96
},
"blendMode": "normal",
"frequency": 0.028,
"emitterLifetime": 1,
"maxParticles": 1000,
"pos": {
"x": 0,
"y": 0
},
"addAtBack": false,
"spawnType": "circle",
"spawnCircle": {
"x": 0,
"y": 0,
"r": 40
}
}
);
this.planeParticles.emit = false;
}
};
On prévoit deux propriétés : une pour l’oiseau et une autre pour les avions.
On crée deux objets cloudkid.Emitter en référençant le conteneur (C.stage), la texture (pour le moment on en dispose pas encore mais le code sera prêt) et les paramètres issus de l’éditeur interactif.
On met la propriété emit de chaque objet à false pour ne pas avoir tout de suite une émission de particules.
Fonctionnement
Pour que l’émetteur fonctionne il faut un peu aménager la boucle du jeu, donc modifier un peu le fichier game.js :
var CRAZYBIRD = CRAZYBIRD || {
// Properties
state: undefined,
stage: undefined,
renderer: undefined,
sprites: {
loading: undefined
},
elapsed: Date.now(),
// Game loop
gameLoop: function () {
requestAnimationFrame(C.gameLoop);
if (typeof C.state !== 'undefined') {
C.state();
// For particle emitter
var now = Date.now();
C.particles.birdParticles.update((now - C.elapsed) * 0.001);
C.particles.planeParticles.update((now - C.elapsed) * 0.001);
C.elapsed = now;
}
C.renderer.render(C.stage);
}
};
var C = CRAZYBIRD;
En effet les particules doivent être calculées à chaque passage.
Un fois tout ça en place pour générer les particules il suffit de modifier la valeur de la propriété emit :
C.particles.planeParticles.emit = true;
Et on aura alors une belle gerbe de particules pour une explosion d’avion :
En résumé
Dans ce chapitre on a vu :
-
la librairie pixi-particles.js,
-
l’éditeur interactif en ligne,
-
l’intégration des particules dans notre jeu.