Ces 3 articles sur p5.play sont une traduction/adaptation de l’article Making Games with p5.play d’Allison Parrish
Ils utilisent la librairies p5.play de Paolo Pedercini,  http://p5play.molleindustria.org

Sprites

Un sprite, est dans un jeu vidéo un élément graphique qui peut se déplacer sur l’écran. Le fond de l’écran constitue généralement le décor et les sprites sont les personnages et les objets qui se superposent au fond d’écran et qui se déplacent.

Un seul sprite

Créer un sprite dans p5.play s’effectue à l’aide de la fonction createSprite (). Cette fonction renvoie un objet sprite, qui lui-même possède un certain nombre d’attributs et de méthodes qui permettent de rechercher et de modifier les propriétés du sprite.

Voici un exemple simple qui crée un seul sprite:

var sprite;
function setup() {
 createCanvas(400, 400);
 sprite = createSprite(width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
 sprite.velocity.y = 0.5;
}

function draw() {
 background(200);
 drawSprites();
}

function mousePressed() {
 sprite.position.x = mouseX;
 sprite.position.y = mouseY;
}

La fonction createSprite () prend 4 paramètres : la position du sprite, sa largeur et sa hauteur. L’attribut .shapeColor définit la couleur du rectangle qui représente le sprite. Pour que p5.play affiche le sprite, il faut ajouter la fonction drawSprites() à la fin de draw().

Chaque sprite a un attribut de position et un attribut de vitesse. Ces 2 attributs ont des attributs x et y, à définir pour contrôler la position du sprite et sa vitesse (dans les deux dimensions). La librairie p5.play s’occupe de mettre à jour la position en fonction de la vitesse — inutile de faire les calculs.
Dans l’exemple ci-dessus, le sprite se déplace constamment vers le bas, au clic de souris, le sprite est instantanément déplacé à la position de la souris.

Sprites en mouvement

Comme mentionné ci-dessus, il est possible de  régler la vitesse du sprite directement avec .velocity.x et .velocity.y. L’attribut setSpeed() du sprite peut être appelé pour indiquer au sprite de se déplacer dans une direction particulière à une vitesse donnée. Dans cet exemple, les flèches du clavier contrôlent le sprite:

var sprite;

function setup() {
 createCanvas(400, 400);
 sprite = createSprite(width/2, height/3, 40, 40);
 sprite.shapeColor = color(236,36,94);
}

function draw() {
 background(200);
 fill(255);
 noStroke();
 textAlign(CENTER, CENTER);
 text("utiliser les flèches pour déplacer, ou ESPACE pour stopper",width/2, 20);
 drawSprites();
}

function keyPressed() {
 if (keyCode == RIGHT_ARROW) {
 sprite.setSpeed(1.5, 0);
 }
 else if (keyCode == DOWN_ARROW) {
 sprite.setSpeed(1.5, 90);
 }
 else if (keyCode == LEFT_ARROW) {
 sprite.setSpeed(1.5, 180);
 }
 else if (keyCode == UP_ARROW) {
 sprite.setSpeed(1.5, 270);
 }
 else if (key == ' ') {
 sprite.setSpeed(0, 0);
 }
 return false;
}

Pour ajouter de la gravité utiliser la méthode .addSpeed().
Voici un exemple qui fait qu’un sprite est attiré vers le bas et rebondit quand il atteint le « fond »:

var sprite;

function setup() {
 createCanvas(400, 400);
 sprite = createSprite(width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
 sprite.velocity.y = 0;
}

function draw() {
 background(200);
 if (sprite.position.y >= height) {
 sprite.velocity.y *= -1;
 sprite.position.y = height;
 }
 sprite.addSpeed(0.25, 90);
 drawSprites();
}

function mousePressed() {
 sprite.position.y = mouseY;
}

Suivre la souris

Il y a plusieurs façons de faire suivre un sprite à la souris. La première est de régler la position directement:

var sprite;

function setup() {
 createCanvas(400, 400);
 sprite = createSprite(width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
}

function draw() {
 background(200);
 sprite.position.x = mouseX;
 sprite.position.y = mouseY;
 drawSprites();
}

Il est également possible d’ajouter un peu de latence au mouvement du sprite en réglant les vitesses X et Y à la différence entre la position du sprite et la position de la souris.

var sprite;

function setup() {
 createCanvas(400, 400);
 sprite = createSprite(
 width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
 noCursor();
}

function draw() {
 background(200);
 sprite.velocity.x = (mouseX - sprite.position.x) * 0.2;
 sprite.velocity.y = (mouseY - sprite.position.y) * 0.2;
 drawSprites();
}

Enfin, la méthode .attractionPoint () permet de définir une force qui pousse le sprite dans la direction de la position de la souris.

Dans cet exemple l’attribut .maxSpeed de l’objet est défini (Il contrôle la vitesse à laquelle un sprite peut se déplacer, quelles que soient les forces qui s’exercent sur lui), son attribut .friction (qui est un multiplicateur qui réduit lentement la vitesse de l’objet), et l’attribut .rotateToDirection (qui, lorsqu’il est réglé sur true, fait tourner l’objet dans la direction où il se déplace).

var sprite;

function setup() {
 createCanvas(400, 400);
 sprite = createSprite(width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
 sprite.rotateToDirection = true;
 sprite.maxSpeed = 2;
 sprite.friction = .01;
}
function draw() {
 background(200);
 if (mouseIsPressed) {
 sprite.attractionPoint(0.5, mouseX, mouseY);
 }
 drawSprites();
}