truc2geek

2014/09/27

Processing : le début d’un jeu

Filed under: Informatique, Processing, Programmation — Étiquettes : , — truc2geek @ 21:34

Après l’intro à Processing, on va commencer à développer un petit jeu.

On repart du fichier tel qu’il était à la fin de l’article précédent : Jeu_V0_01.

noLoop()

Quand on exécute un programme (appelé « sketche ») Processing :

  • la fonction setup() est exécutée une fois
  • la fonction loop() est exécutée en boucle

Si on veut exécuter la fonction loop() une seule fois, par exemple pour faire simplement un test, on utilise l’instruction noLoop().

Par exemple, pour tester comment dessiner un rectangle en mode « CENTER », on dessine trois rectangles.
On leur donne à chacun une couleur de remplissage pour bien les différencier.
Les couleurs sont définies en RGB (Reg Green Blue, soit RVB pour Rouge Vert Bleu).
Donc (255, 0, 0) correspond au maximum possible de rouge, pas de vert ni de bleu, ce sera donc rouge vif.
De la même manière, (0, 255, 0) donnera du vert et (0, 0, 255) donnera du bleu.

Ci-dessous, la fin de la fonction draw() :

01.png

Résultat :
02.png

Pour le carré bleu, j’ai mis 4 nombres différents pour qu’on distingue bien la signification de chacun.
En mode rect(CENTER), quand on dessine un rectangle, les 4 nombres correspondent à :

  • la position X du centre du rectangle
  • la position Y du centre du rectangle
  • la largeur du rectangle
  • la hauteur du rectangle

rect(CENTER)

On va maintenant dessiner le carré avec ce mode, et on définit les dimensions de la fenêtre dans des variables : donc on pourra utiliser ces variables pour vérifier si le carré arrive à une extrémité, plutôt que de le faire avec des valeurs fixes, écrites « en dur ».

Voici ce que devient le début du code : les variables globales et la fonction setup().
Dans cette fonction, j’ai ajouté la ligne « frameRate(40) », qui définit la vitesse d’exécution : on aura 40 images par seconde.
03.png

Voici la fin de la fonction draw(), le code qui dessine le carré devient :
04.png

Déplacer le carré dans les 4 directions

La première chose à faire : prendre en compte les touches « flèche haut » et « flèche bas » en plus des touches « flèche gauche » et « flèche droite », ça se passe dans la fonction keyPressed() :
05.png

On prend en compte ces nouvelles directions possibles, pour définir la nouvelle position du carré mais aussi, pour déterminer si le carré est « sorti » de la fenêtre (pour le faire apparaître du côté opposé).
Le début de la fonction draw() :
06.png

On teste, voici la capture d’écran vidéo :

Le code complet

07.png
08.png

A télécharger ici.

demi-tour

On va maintenant modifier le comportement du carré : quand il arrivera à une extrémité de la fenêtre, plutôt que de réapparaître de l’autre côté, il fera demi-tour.

Le code est simple :
09.png

Un peu de serpent…

Comme dans ce jeu mythique, on va faire apparaître des carrés, un par un, sur lesquels il faudra aller, qu’on appelera des « cibles ».

1e version : une seule cible

Quelques variables globales sont nécessaires :
10.png

On a donc les dimensions de la cible, sa position dans la fenêtre, et une variable booléenne nommée carreSurCible, initialisée à false.
Dès que le carré aura atteint la cible, on donnera la valeur true à cette variable.

Au début de la fonction draw, on dessine la cible, mais seulement si carreSurCible vaut false.
« if (!carreSurCible) » signifie bien « si la variable carreSurCible vaut false », le point d’exclamation est un opérateur.
11.png

A la fin de la fonction draw(), si le carré n’a pas atteint la cible précédemment, on vérifie s’il l’a atteinte maintenant.
12.png

Et enfin, voici le code de la fonction cibleAtteinte(), que j’ai placé juste après la fonction draw() :
13.png

test :

Le code de cette version est disponible ici.

2e version : un nombre illimité de cibles

Le principe est simple : quand le carré atteint la première cible, on définit au hasard de nouvelles valeurs pour X et Y, qui seront la position de la prochaine cible.

Du coup, on modifie le code qui dessine la cible, et celui qui appelle la fonction cibleAtteinte() : puisqu’on a toujours une cible à atteindre, il faut systématiquement exécuter ces codes :
14.png

15.png

Deux modifications dans la fonction cibleAtteinte() :

  • au lieu de définir « en dur » la valeur d’écart, on la calcule.
    Cette valeur correspond à la distance maximum qu’il doit y avoir entre le centre du carré et le centre de la cible, pour que le carré atteigne la cible.
    On peut ainsi calculer rapidement si le carré a atteint la cible.
  • quand le carré a atteint la cible, on définit au hasard, l’emplacement de la prochaine cible ; on s’assure que la cible sera placée dans la fenêtre, évidemment.

 

17.png

C’est la fonction random qui permet d’obtenir un nombre au hasard.
Elle retourne une valeur de type float, donc un nombre à virgule, qu’il faut convertir en int pour la stocker si on veut la stocker dans une variable de type int, comme CibleX et CibleY.

le test :

Le code de cette version est disponible ici.

Voilà, on est encore loin d’un jeu, mais c’est un bon début.

A suivre…

Publicités

Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Créez un site Web ou un blog gratuitement sur WordPress.com.

%d blogueurs aiment cette page :