P5.play propose une gestion des collisions et des "rebonds" simple et efficace.
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite_1;
var smiley_sprite_2;
function preload() {
img=loadImage("asset/smiley.png");
}
function setup() {
createCanvas(800,300);
smiley_sprite_1=createSprite(100,150);
smiley_sprite_1.addImage(img);
smiley_sprite_1.setVelocity(3,0);
smiley_sprite_2=createSprite(600,150);
smiley_sprite_2.addImage(img);
}
function draw() {
background(240,240,240);
smiley_sprite_1.bounce(smiley_sprite_2);
drawSprites();
}
Analysons le code ci-dessus :
Nous avons deux sprites :
La méthode bounce permet de gérer les collisions (et les rebonds éventuels) entre les sprites.
Dans la fonction draw nous avons ajouté la ligne smiley_sprite_1.bounce(smiley_sprite_2) qui permet de gérer la collision entre smiley_sprite_1 et smiley_sprite_2
Si vous lancez une balle de ping-pong sur une boule de pétanque, au moment de la collision la boule de pétanque ne bougera (quasiment) pas alors que la balle de ping-pong repartira dans l'autre sens.
p5.play permet de gérer ce genre de situation en attribuant des "masses" aux sprites.
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite_1;
var smiley_sprite_2;
function preload() {
img=loadImage("asset/smiley.png");
}
function setup() {
createCanvas(800,300);
smiley_sprite_1=createSprite(100,150);
smiley_sprite_1.addImage(img);
smiley_sprite_1.setVelocity(3,0);
smiley_sprite_1.mass=1;
smiley_sprite_2=createSprite(600,150);
smiley_sprite_2.addImage(img);
smiley_sprite_2.mass=15;
}
function draw() {
background(240,240,240);
smiley_sprite_1.bounce(smiley_sprite_2);
drawSprites();
}
Par défaut la masse d'un sprite est égale à 1 (la ligne smiley_sprite_1.mass=1; ne sert donc à rien).
En repartant de l'exemple précédent, augmentez suffisamment la masse de smiley_sprite_2 pour avoir l'effet "balle de ping pong contre boule de pétanque".
Il est possible de rendre un sprite "insensible" à la collision (comme s'il avait une masse très élevée) grâce à l'attribut immovable.
Un smiley_sprite_2.immovable=true; rendra smiley_sprite_2 "indéplaçable" en cas de collision (quelle que soit sa masse).
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite_1;
var smiley_sprite_2;
function preload() {
img=loadImage("asset/smiley.png");
}
function setup() {
createCanvas(800,300);
smiley_sprite_1=createSprite(100,150);
smiley_sprite_1.addImage(img);
smiley_sprite_1.setVelocity(3,0);
smiley_sprite_1.mass=1;
smiley_sprite_2=createSprite(600,150);
smiley_sprite_2.addImage(img);
smiley_sprite_2.immovable=true;
}
function draw() {
background(240,240,240);
smiley_sprite_1.bounce(smiley_sprite_2);
drawSprites();
}
En utilisant l'image que vous trouverez ici, écrivez un programme permettant d'obtenir ceci :
La méthode bounce peut prendre un second paramètre : une fonction de "callback". Cette fonction de "callback" sera exécutée uniquement en cas de collision.
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite_1;
var smiley_sprite_2;
var cont=false;
function preload() {
img=loadImage("asset/smiley.png");
}
function setup() {
createCanvas(800,300);
smiley_sprite_1=createSprite(100,150);
smiley_sprite_1.addImage(img);
smiley_sprite_1.setVelocity(3,0);
smiley_sprite_1.mass=1;
smiley_sprite_2=createSprite(600,150);
smiley_sprite_2.addImage(img);
smiley_sprite_2.immovable=true;
}
function draw() {
background(240,240,240);
smiley_sprite_1.bounce(smiley_sprite_2,contact);
if (cont==true){
text("il y a eu contact !",350,100)
}
drawSprites();
}
function contact(){
cont=true;
}
Ci-dessus la fonction contact sera exécutée uniquement s'il y a un contact entre smiley_sprite_1 et smiley_sprite_2. Si nécessaire, n'hésitez pas à consulter l'activité p5.js consacrée à l'affichage d'un texte (activité 9 p5.js). Si vous avez du mal à comprendre le fonctionnement de ce programme, n'hésitez pas à poser des questions.
Sachant que la méthode remove appliquée à un sprite supprime ce sprite (smiley_sprite_1.remove() supprime le sprite smiley_sprite_1), en repartant de ce qui a été fait ci-dessus, écrivez un programme qui permettra d'obtenir ceci :
Il est aussi possible de gérer les collisions sans pour autant gérer les rebonds en utilisant la méthode overlap à la place de la méthode bound
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite_1;
var smiley_sprite_2;
function preload() {
img=loadImage("asset/smiley.png");
}
function setup() {
createCanvas(800,300);
smiley_sprite_1=createSprite(100,150);
smiley_sprite_1.addImage(img);
smiley_sprite_1.setVelocity(3,0);
smiley_sprite_1.mass=1;
smiley_sprite_2=createSprite(600,150);
smiley_sprite_2.addImage(img);
smiley_sprite_2.immovable=true;
}
function draw() {
background(240,240,240);
smiley_sprite_1.overlap(smiley_sprite_2,contact);
drawSprites();
}
function contact(){
smiley_sprite_2.remove();
}
En repartant de l'exemple vu dans le "À faire vous même 3.5", écrivez un code permettant d'obtenir ceci :
Le mur droit disparait après 3 rebonds. L'attribut removed permet de savoir si un sprite existe encore : smiley_sprite_1.removed est true si le sprite smiley_sprite_1 n'existe pas (ou plus).
Il est possible de faire rebondir un sprite sur les bords de la fenêtre de jeu en utilisant des sprites. Inutile d'associer une image à ces sprites car ils seront placés en dehors de la fenêtre de jeu, en revanche, il sera nécessaire de préciser la taille des ces sprites en ajoutant deux arguments à la méthode createSprite (quand on associe une image au sprite, c'est la taille de l'image qui définie la taille du sprite). La méthode createSprite s'écrira createSprite(positionX, positionY, tailleX, taille Y)
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite;
function preload() {
img=loadImage("asset/smiley.png")
}
function setup() {
createCanvas(800,300);
smiley_sprite=createSprite(random(20,780),random(20,280));
smiley_sprite.addImage(img);
smiley_sprite.setVelocity(random(-5,5),random(-5,5));
wall_g=createSprite(-5,150,10,300);
wall_d=createSprite(805,150,10,300);
wall_h=createSprite(400,-5,800,10);
wall_b=createSprite(400,305,800,10);
wall_d.immovable=true;
wall_g.immovable=true;
wall_h.immovable=true;
wall_b.immovable=true;
}
function draw() {
background(240,240,240);
smiley_sprite.bounce(wall_g);
smiley_sprite.bounce(wall_d);
smiley_sprite.bounce(wall_b);
smiley_sprite.bounce(wall_h);
drawSprites();
}