La boîte à outils

L'installation

p5 fournit circle() ou random(). La boîte à outils ajoute sept fonctions du même genre, faites pour le combat de Billy et Raoul et rangées dans outils.js. Le fichier s'importe une fois par sketch et ne se modifie pas.

Enregistrer outils.js, billy.png et raoul.png par un clic droit sur chaque lien.
Ouvrir le sketch dans editor.p5js.org, connecté à son compte, puis cliquer sur la flèche à côté de sketch.js pour afficher la liste des fichiers.
Cliquer sur le + de la liste, choisir « Upload file » et glisser les trois fichiers.
Ouvrir index.html et ajouter la ligne d'outils.js juste au-dessus de celle de sketch.js.

<script src="outils.js"></script>
<script src="sketch.js"></script>

Un sketch préparé ainsi se duplique par « File », puis « Duplicate », avec ses fichiers. Une autre image détourée, coupée au ras des pieds et importée sous le même nom, remplace le personnage sans toucher au code.

Les erreurs

Message dans la console	Cause
Un fichier introuvable	Une image manque ou porte un autre nom. `Billy.png` n'est pas `billy.png`
`dessinerBilly is not defined`	La ligne d'`outils.js` manque dans `index.html`
`Identifier 'billy' has already been declared`	`outils.js` déclare déjà `billy` et `raoul` : un `let billy;` dans `sketch.js` est de trop

Les outils

Appel	Ce qu'il fait
`await chargerPersonnages();`	Charge les deux images, une seule fois, dans `setup()`
`dessinerBilly(x, y, largeur)`	Billy, les pieds posés en `x`, `y`, à la largeur donnée en pixels
`dessinerRaoul(x, y, largeur)`	Pareil pour Raoul
`dessinerChateau(x, y, largeur)`	Le château, herse baissée, posé par le milieu de sa base
`dessinerChateauOuvert(x, y, largeur)`	Le même château, herse levée
`parler(texte, x, y)`	Une bulle de dialogue dont la pointe tombe en `x`, `y`
`lancerDe(faces)`	Un nombre entier entre 1 et `faces`. `lancerDe(20)` est un d20
`sontProches(x1, y1, x2, y2, distance)`	`true` si les deux points sont à moins de `distance` pixels, `false` sinon

Deux dessins posés au même y se tiennent donc sur le même sol, quelle que soit leur taille. lancerDe() et sontProches() ne dessinent rien : comme random(), ils rendent une réponse, à ranger dans une variable ou à poser dans un if.

Un sketch qui s'en sert

Raoul suit la souris le long du sol. Quand il s'approche, Billy parle. Chaque clic lance un d20, dont le résultat s'affiche au-dessus de Raoul.

let billyX = 600;
let jet = 0;

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(30);
  dessinerChateau(170, 500, 300);
  dessinerBilly(billyX, 500, 250);
  dessinerRaoul(mouseX, 500, 120);

  if (sontProches(mouseX, 500, billyX, 500, 200)) {
    parler("Qui ose ?", billyX, 230);
  }

  if (jet > 0) {
    parler("Tiens, prends ça : " + jet, mouseX, 340);
  }
}

function mousePressed() {
  jet = lancerDe(20);
}