Un jeu de plateforme

Préparer son espace de travail

Nous allons avoir besoin d'une bibliothèque que Processing ne nous propose pas...

Il s'agit de la librairie P5play.js, qui possède tout un arsenal de méthodes qui facilite la gestion des mouvements, les collisions etc...

Suivre la procédure suivante:

Ouvrir Processing3 en mode P5js
Importer les deux librairies (P5dom et P5sound)
Enregistrez votre sketch
Téléchargez la librairie P5play Librairie p5play
Mettre le fichier p5.play.js dans le dossier libraries de votre sketch
Dans l'onglet index.html de Processing3 (votre sketch) il va falloir rajouter cette ligne de code entre les balises <head> et </head> :

 <script language="javascript" type="text/javascript" src="libraries/p5.play.js"></script>

Donc, le dossier de votre sketch doit contenir (jeu_plateforme est le nom que j'ai donné à mon sketch)

Et le dossier librairies doit contenir les fichiers:

Pour commencer: le canvas avec une image de fond

Téléchargez cette image et glissez-déposez la dans votre sketch.
Puis écrivez le code ci-dessous :


            var fond;

            function preload(){
            fond=loadImage('data/ciel.png');
            }

            function setup() {
            createCanvas(800,600);
            }

            function draw() {
            background(fond,0,0);
            }

Cela aura pour effet d'afficher l'image dans le canvas.

Création de la plateforme de base

Nous allons à l'aide d'un sprite, créer un "sol" sur lequel pourra marcher notre personnage.
On initialise une nouvelle variable "sol" var sol;
Dans la fonction setup() on crée le sprite : sol=createSprite(190,585,400,32);
On oblige ce sol à ne pas rebondir : sol.immovable=true;
Et on affiche le sprite dans le draw() avec la commande drawSprites();

C'est au tour du personnage:

Téléchargez ce dossier d'images, décompressez-le et glissez-déposez toutes les images dans votre sketch
On initalise cinq nouvelles variables var perso_walk; , var perso_wait; , var perso;, var perso_bouge; et var perso_attend;
On charge les images dans la fonction preload() avec les commandes:


            perso_walk=loadAnimation("data/persomove-001.png","data/persomove-002.png","data/persomove-003.png","data/persomove-004.png");
            perso_wait=loadImage('data/persostand-001.png');

Dans le setup() on rajoute :


            perso=createSprite(100,height-220);// création du personnage
            perso_bouge=perso.addAnimation("walk",perso_walk);// ajout des animations de déplacements
            perso_attend=perso.addAnimation("wait",perso_wait);
            perso.changeAnimation("wait");// mise en position attente...

Dans le draw() on rajoute (avant drawSprites():


            perso.addSpeed(0.2, 90);// gère la gravité 0.2 est ajouté dans la dirction y puisque l'angle est de 90°
            perso.bounce(sol,frottement);// collision avec le sol qui renvoie à la fonction frottement

Il faut donc rajouter une fonction frottement:


            function frottement(){
            perso.velocity.y=0;
            }

Et puisqu'on y est, rajoutons les déplacements du personnage:


            function keyPressed(){
                if (keyCode==38){// flêche haut 
                perso.addSpeed(9.5,270); // direction haut , angle de 270°
                perso.velocity.x=80;
                }
                if (keyCode==37){// flêche gauche
                perso.mirrorX(-1); // symétrie en x 
                perso.changeAnimation("walk");// animation walk
                perso.velocity.x=-2;
                } else if (keyCode==39){// flêche droite
                    perso.mirrorX(1);
                    perso.changeAnimation("walk");
                    perso.velocity.x=2;
                    } else {
                        perso.changeAnimation("wait");
                        perso.velocity.x=0;
                    }
                }
                function keyReleased(){// quand on relâche les touches
                    perso.changeAnimation("wait");
                    perso.velocity.x=0;
                    }

Réglage...

Quand on utilise la flêche "haut" plusieurs fois de suite, notre personnage continue de "grimper"...
Pour empêcher cela, on utilise une variable (booléenne) à déclarer var isjump=false; et qui deviendra true lorsque le personnage est en l'air. Il faudra également la remettre à false lorsque le personnage touche le sol.
Dans la fonction keypressed() on modifie le code comme suit:


            if (keyCode==38){
                if(isjump==false){
                    perso.addSpeed(9.5,270);
                    perso.velocity.x=80;
                    isjump=true;
                }
            }

Dans la fonction frottement() on rajoute isjump=false;

D'autres plateformes

On va rajouter une plateforme et permettre au personnage de monter dessus.
Pour cela on crée une nouvelle variable var plateforme1; et dans le setup() on crée un sprite plateforme1=createSprite(560,400,240,40); que l'on rend insensible au rebond plateforme1.immovable=true;
Dans le draw() on rajoute ceci perso.bounce(plateforme1,frottement); pour la collision du personnage avec cette plateforme.

Travail à réaliser

Rajouter deux autres plateformes pour obtenir quelque chose comme cela :

Rajoutons des niveaux dans le jeu:

On initalise une variable "level" et quand le personnage atteint une zone en particulier, on incrémente cette variable de 1 et on remet le personnage dans sa position initiale.
Vous pouvez utiliser cette image pour la zone de changement de niveau
Pour créer le sprite "sortie" :

On initialise deux variables "sortie" et "exit"
On charge l'image dans la fonction preload avec : exit=loadImage('data/exit.png');
On crée le sprite sortie=createSprite(650,50); dans le setup()
On met l'image dans le sprite sortie.addImage(exit);
On appelle la fonction changementNiveau(); dans le draw()

On crée la fonction changementNiveau();


                function changementNiveau(){
                    if (perso.overlapPoint(sortie.position.x, sortie.position.y)){
                    level=level+1;
                    perso.position.x=82;
                    perso.position.y=height-220;
                    }
                }

Faire afficher le niveau

Travail à réaliser

Créer un gameover.
Ajouter un groupe "d'étoiles" avec cette image.
Créer un score qui augmente à chaque fois que le personnage prend une étoile.
Faire en sorte que les étoiles "remontent" après le rebond sur une plateforme.
Il faudra également vider le groupe d'étoiles lors du changement de niveau avec le code:
for (var i = votre_groupe.length; i--; votre_groupe[i].remove());
Et juste après remplir denouveau le groupe.
Créer une difficulté croissante en fonction du niveau.

Ce qui pourrait donner cela ...