Je laisse cet article pour l'instant mais cette partie va être réorganisée

Dessin animé 1 : les listes I

L'objectif suivant est d'avoir une animation, c'est à dire d'avoir un dessin animé à afficher.

On a 14 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 :

 Source : Mini cruzader

Comment va-t-on enregistrer toutes ces images dans notre programme ?

On ne vas quand même pas créer 14 variables séparées sans compter qu'ensuite, il faudra à nouveau en créer 14 pour la position de face, de dos et encore 14 x 3 pour le dessin animé courir, marcher, sauter, combattre etc...

La solution est d'avoir une seule variable qui contienne toutes ces images. On va l'appeler pour l'instant attendre-gauche (puisque les images correspondent au personnage en train d'attendre et tourné vers la gauche.

Pour afficher l'image n°3 de ce dessin animé on écrira : attendre-gauche[3] (noter qu'il s'agit de crochets : Alt-Gr+ 5 et + ) )

et en fait on écrira : attendre-gauche[index] dans lequel index sera une autre variable dont on fera varier la valeur pour les 14 images.

Pour afficher l'image on écrira donc : image(attendre-gauche[index],x,y) avec x et y les variables contenant l'endroit où l'on veut afficher l'image sur l'écran.

Les listes

1er exemple : une liste de textes

Une liste est donc une variable qui peut contenir plusieurs autres variables (des nombres, des texte, des images etc ) chaque variable précise pouvant être obtenue par son numéro.

Pour ce premier exemple d'utilisation d'une liste, on va créer une liste maListe qui contiendra plusieurs textes (type : String voir ici)

Nouvelles fonctions

Ecrire du texte

text(1,2,3)

• 1 : Le texte à afficher (String) : soit une variable contenant du texte, soit le texte entre guillemets exemple : "mon texte"
• 2 : la postiion en x
• 3 : la position en y

textSize(1) : 

1 : la taille du texte pour les prochaines utilisations de la fonction text() (le nombre de pixels en hauteur)

stroke(1) ou stroke(1,2,3) :

• 1 : la couleur du pinceau (valable pour la couleur des bordes des textes aussi) si on met un seul nombre (entre 0 et 255) on aura du noir, du gris ou du blanc (0 : noit, 255 : blanc)
  on peut mettre aussi une variable contenant une couleur définie par maCouleur = color(valeurPourLe rouge, valeurPour leVert, valeurPourLe Bleu);

ou

• 1 : valeur pour le rouge (entre 0 et 255)
• 2 : valeur pour le vert (entre 0 et 255)
• 3: valeur pour le bleu (entre 0 et 255)

fill(1) ou fill(1,2,3) : (fill : remplir)

Comme ci-dessus mais pour l'intérieur des formes (ça marche pour les textes aussi !)

On peut aussi définir la police de caractères, ici on utilise la police de caractères par défaut.

Autres fonctions

frameRate(1) :

• 1 : La vitesse à laquelle "tourne" la fonction draw() en secondes (par défaut c'est de l'ordre de 60 images par secondes)... si c'est possible

L'instruction if (Si )

Si tel test est vrai alors faire ce qu'il y a dans le bloc de code qui suit.

Elle s'écrit ainsi : if ( 1 ) { 2 }  (parenthèses puis accolades ! )

• 1 : le test derrière le If (le Si)
• 2 : le code à exécuter si le test 1 est vrai

Remarquez Le signe == (2 fois =)

• le signe = (une fois) est utilisé pour mettre une valeur dans une variable comme dans uneVariable = 4;
• le signe == (2 fois) est utilisé pour tester si la valeur d'une variable est égale à une autre valeur

Les autres opérateurs de test :

• >
• <
• != différent de

Important !

Si vous regardez bien le code, vous vous apercevrez que la valeur de l'index commence à zéro et pas à un.

Les numéros dans une liste commencent à zéro et pas à un c'est pourquoi, si il y a 5 valeurs (comme ici) les valeurs iront de zéro à quatre !