Vous aurez sans doute, un jour ou l'autre, besoin d'afficher plusieurs sprites "identiques" (même comportement d'un point de vue physique, mais n'ayant pas forcement les mêmes coordonnées d'origines). Afin de vous permettre de gérer facilement cette multitude sprites, Phaser propose la notion de groupe.

À faire vous même 8.1

Saisissez, analysez et testez ce code

var game = new Phaser.Game(800,600,Phaser.AUTO,'content',{preload: preload, create: create,update:update});
function preload(){
    game.load.image('smiley','asset/smiley.png');
}
function create(){
    monGroupe=game.add.group();
    for (var i=0;i<10;i++){
    monGroupe.create(750*Math.random(), 550*Math.random(),'smiley');
    }
}
function update(){
}
			

---

Analysons le code du "À faire vous même 8.1"

monGroupe=game.add.group();
			

Permet de créer un nouveau groupe

monGroupe.create(750*Math.random(), 550*Math.random(),'smiley');
			

Ajoute un smiley au groupe. Le premier paramètre de la méthode "create" correspond à la coordonnée x du nouveau sprite, le deuxième à la coordonnée y du sprite nouvellement créé, enfin, le troisième correspond à l'image à associer au sprite.

À faire vous même 8.2

Saisissez, analysez et testez ce code

var game = new Phaser.Game(800,600,Phaser.AUTO,'content',{preload: preload, create: create,update:update});
function preload(){
    game.load.image('smiley','asset/smiley.png');
}
function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
    monGroupe=game.add.group();
    for (var i=0;i<10;i++){
        s=monGroupe.create(750*Math.random(), 550*Math.random(),'smiley');
        game.physics.enable(s,Phaser.Physics.ARCADE);
        s.body.gravity.set(0,100);
        s.body.collideWorldBounds=true;
        s.body.bounce.set(0.5);
    }
}
function update(){
}
			

---

Analysons le code du "À faire vous même 8.2 " :

Nous utilisons, à l'intérieur de la boucle "for", une variable "s". Cette variable nous permet d'activer le moteur physique pour tous les sprites du groupe comme nous l'aurions fait pour un seul sprite.

Il est aussi possible de gérer les collisions entre membres du même groupe en ajoutant :

game.physics.arcade.collide(monGroupe);
			

avec "monGroupe" le nom du groupe concerné. Notez qu'il possible, ici aussi, d'ajouter une fonction qui sera appelée en cas de collision.

À faire vous même 8.3

Saisissez, analysez et testez ce code

var game = new Phaser.Game(800,600,Phaser.AUTO,'content',{preload: preload, create: create,update:update});
function preload(){
    game.load.image('smiley','asset/smiley.png');
}
function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
    monGroupe=game.add.group();
    for (var i=0;i<10;i++){
        s=monGroupe.create(750*Math.random(), 550*Math.random(),'smiley');
        game.physics.enable(s,Phaser.Physics.ARCADE);
        s.body.gravity.set(0,100);
        s.body.collideWorldBounds=true;
        s.body.bounce.set(0.8);
    }
}
function update(){
    game.physics.arcade.collide(monGroupe);
}
			

---

Enfin il est possible de gérer les collisions entre les membres d'un groupe et un sprite :

game.physics.arcade.collide (joueur,groupeEnnemi, maFonction);
			

La fonction "maFonction" sera exécutée à chaque fois qu'une collision entre le sprite "joueur" et un des sprites membres du groupe "groupeEnnemi" aura lieu.

À faire vous même 8.4

Modifier le "jeu" programmer précédemment (À faire vous même 7.5) pour avoir, non plus un ennemi à capturer, mais dix.