Un jeu HTML5 : les particules

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 :

img01

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 :

img02

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 » :

img03

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 :

img04

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 :

img05

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.

Laisser un commentaire