Je laisse cet article pour l'instant mais cette partie va être réorganisée
Dessin animé 4 : il est vivant !!!
L'objectif suivant est d'avoir une animation, c'est à dire d'avoir un dessin animé à afficher.
On a 16 dessins pour l'état "idle" (c'est à dire le personnage qui attend) voici les premières images :
etc
Ce n'est pas très visible mais elles sont bien légèrement différentes !
Il s'agit d'obtenir ce résultat :
Maintenant, on a tout ce qu'il faut pour faire cela !!!
1) Créer une liste pour mettre les 16 Images
let mesImages = [] ;
2) Se préparer à charger les 16 images
Pour ma nouvelle variable index que je mets à zéro au départ - tant que index<16 - ajouter 1 à index en fin de boucle For
for (let index=0 ; index<16 ; index++ ) {
Notes
index++ c'est un raccourci (du raccourci) pour ajouter un (on a aussi le raccourci index-- qui enlève 1 à index)
3) Fabriquer le bon nom de fichier à chaque fois
Le premier nom de fichier est : crusader_idle_60000.png et le dernier est : crusader_idle_60015.png (donc 16 images !)
Donc le nom de fichier est toujours : "crusader_idle_600"+ numero sur 2 caractères de 00 à 15 + ".png"
index est un nombre qui va varier de 0 à 15
La conversion de nombre en chaine de caractère du nombre ( de 5 à "5" si vous voulez) est automatique mais on n'aura qu'un seul caractère pour les nombres de 0 à 9. Il faut donc ajouter un zéro devant les nombres de 0 à 9... !!!
4) charger le fichier pour obtenir une image
(ça on l'a déjà fait ici)
nouvelleImage = loadImage(nomDeFichier);
5) Ajouter une image à notre liste d'images
mesImages.push(nouvelleImage);
6) afficher les images dans draw()
(similaire à ce que l'on a déjà fait ici)
7) Ca donne
7.1) Le code :
let mesImages=[];
let indexDansDraw=0;
function setup() {
createCanvas(300, 300);
let numeroTexte;
let nomDeFichier;
for ( let index=0; index<16; index++ )
{
if (index<10) {
numeroTexte="0"+str(index);
} else {
numeroTexte=str(index);
}
nomDeFichier="crusader_idle_600"+numeroTexte+".png";
print(numeroTexte);
nouvelleImage = loadImage(nomDeFichier);
mesImages.push(nouvelleImage);
}
frameRate(10); // 10 images par secondes seulement dans draw()
imageMode(CENTER);
}
function draw() {
background(0);
image(mesImages[indexDansDraw], width/2, height/2);
indexDansDraw++;
if (indexDansDraw>15) {
indexDansDraw=0;
}
}
7.2. ça donne (avec exactement ce code là !)
8. Il faudra refaire ça à chaque fois ???
Bien sûr que... oui ET non !
On va déduire une façon de généraliser ce code pour tout le reste
Dans un programme on évite absolument de réécrire deux fois le meme code !!!