Embed Size (px)
Citation preview
Un « jeu vidéo » en p5.js avec une librairie
Je vous propose de concevoir un «jeu» avec p5.js en utilisant une librairie spécifique : p5.play.js
Tout d’abord il vous faut les fichiers : dans le dossier : p5_play
Avec les librairies
Ouvrir le dossier p5_play avec « Sublime Text » ou un autre éditeur.
Remarque : Dans le dossier « images » il y a deux images.
Et dans le fichier index.html on a rajouté le chargement de la librairie p5.play.js .
Afficher une image dans une fenêtre :
Dans le fichier sketch.js testez le code suivant :
P5.play est une librairie qui permet
de gérer des images, leurs
mouvements et les collisions de
façon simple
Déclaration des variables ;
Chargement de l’image ;
Création du « canvas », et des
« sprites »(spécifique à p5.play) ;
Affichage de l’image (spécifique à p5.play) ;
Un « jeu vidéo » en p5.js avec une librairie
La méthode createSprite permet de créer un sprite.
Cette méthode prend en paramètres les coordonnées x et y du centre du sprite (dans notre exemple,
nous avons placé le sprite au centre de notre canvas (fenêtre de jeu)).
Le sprite est placé dans la variable smiley.
La méthode addImage permet d'associer un sprite à une image. Cette méthode prend en paramètre une image.
La fonction drawSprites permet d'afficher tous les sprites présents. Notez que le background(255) placé dans la fonction draw permet d'effacer la fenêtre à chaque image.
En modifiant le code, placez le sprite aux coordonnées (200,75).
Déplacer l’image dans la fenêtre :
Sachant que smiley.position.x correspond à la coordonnée x du sprite et que smiley.position.y
correspond à la coordonnée y du sprite.
Voici un programme permettant au sprite de traverser l'écran de gauche à droite.
Jusqu’ici il n’y a pas de grandes différences avec un programme sans la librairie……..
« P5.play » met à notre disposition des méthodes qui simplifie vraiment les déplacements et les
collisions.
Pour les déplacements la méthode "setVelocity" permet de donner à notre sprite une vitesse. Cette
méthode prend 2 paramètres : la vitesse selon x et la vitesse selon y.
Testez ce programme et modifiez-le pour
que le smiley rebondisse sur les bords de
la fenêtre. (Attention de placer la
condition entre les lignes 17 et 18)
Modifiez-le de nouveau pour qu’il
rebondisse sur tous les bords de la
fenêtre
Un « jeu vidéo » en p5.js avec une librairie
Testez le programme suivant dans le fichier sketch2.js
Pour les collision on peut encore faire plus simple( c’est tout l’intérêt de cette librairie).
On crée des « sprites » (sans images) car invisible sur les bords de la fenêtre et on utilise la méthode
bounce.
Testez ce code
Détection des bords et traitement de la
valeur de la vitesse.
Ajout de la vitesse
(400,-5)
(800)
(10)
wall_h=createSprite(400,-5,800,10); Attention
la définition d’un
sprite se fait par son
centre et ses
dimensions.
Déplacement du smiley avec la
méthode setVelocity
Création des « murs » (vide)
La méthode immovable les rends
statiques( nous verrons pourquoi plus
tard)
Détection et traitement automatique
des collisions avec la méthode
bounce
Un « jeu vidéo » en p5.js avec une librairie
Remarque : Rien n’empêche de mettre des images dans les sprites : wall_g , wall_d, wall_h et wall_b
si elles ont les bonnes dimensions ! ( en les faisant légèrement déborder à l’intérieur de la fenêtre…)
(à tester).
Essayez de réaliser cela.
Collision entre deux objets mouvants :
Nous allons dans un premier temps rajouter un second sprite
( en modifiant le programme précédent)
Il faut : ( en vous aidant de ce qui a été fait pour le 1er smiley )
Créer deux nouvelles variables img2 et smiley2
Charger dans img2 l’image : smiley_blood.png
Créer un sprite : smiley2=createSprite(100,50); smiley2.addImage(img2);
Créer le déplacement : smiley2.setVelocity(3,5);
Gérer les collisions avec les bords :
smiley2.bounce(wall_g); smiley2.bounce(wall_d); smiley2.bounce(wall_h);
smiley2.bounce(wall_b);
Puis nous allons gérer les collisions entre les deux smiley :
Il faut :
Dans le setup() rajouter une masse aux smileys(pour plus de réalisme) avec méthode :
smiley.mass=3 ; smiley2.mass=1 ;
Et dans le draw() on rajoute : smiley.bounce(smiley2) ;
C’est déjà pas mal, mais ce serait mieux si l’on pouvait avoir plusieurs smiley2, et diriger le smiley
avec les flèches du clavier.
Pour dupliquer le smiley2 p5.play met à notre disposition la possibilité de créer un groupe de
smiley :
Dans le setup() :
On commence par rajouter la variable : group_smiley2 ;
Puis on remplace la création du smiley2 par le code suivant :
group_smiley=new Group();
for (i=0;i<15;i=i+1){
smiley2=createSprite(random(20,780),random(20,280));
smiley2.addImage(img2);
smiley2.setVelocity(random(-5,5),random(-5,5));
group_smiley.add(smiley2);
group_smiley.mass=3;
}
Un « jeu vidéo » en p5.js avec une librairie
Dans le draw()
On rajoute les collisions entre les smileys du groupe et les murs ainsi qu’avec le smiley.
Déplacement du smiley avec les flèches du clavier :
On rajoute les variables : booléenne : g,d,h et b ( pour gauche, droite, haut et bas).
On appelle dans le draw() la fonction mouvement() ;
On crée les trois fonctions :
Les nombres 37,39,38 et 40 sont
les codes ascii des flèches du
clavier
Un « jeu vidéo » en p5.js avec une librairie
Ce serait encore meilleur ( pour un jeu ) que les smiley_blood disparaissent quand le smiley les
touche. Et ce durant un temps limité avec affichage du score…..
Commençons par déclarer les variables time et score ( var time ; var score=0 ;)
Dans le setup() fixons la taille de la police à 32 :
Dans le draw() il faut faire les modifications suivantes ( facile à comprendre ) et rajouter la fonction
contact().
Voilà il est assez simple d’imaginer des projets à partir de ce programme ; de plus cette librairie
offre encore bien plus de possibilité à découvrir ICI :
Calcule en seconde le temps
écoulé depuis le
chargement de la page.
round permet de prendre la
partie entière.
Exécute les affichages des
smileys si le temps est
inférieur à 8s.
Détecte la collision entre le
smiley et les smileys du
groupe avec la méthode
overlap et renvoie à la
fonction contact() .
Fonction contact() qui à
chaque collision élimine le
smiley du groupe touché et
augmente le score de 1
Un « jeu vidéo » en p5.js avec une librairie
Compléments : faire sauter, marcher un personnage : Sprites animés :
La méthode addSpeed permet de modifier la vitesse d'un sprite. D'un point de vue physique, en simplifiant les choses, nous pouvons dire que la modification de la vitesse d'un sprite est similaire à l'application d'une force sur ce même sprite (pour les puristes, cela n'est pas tout à fait vrai puisque la modification de vitesse d'un objet A, aussi appelée accélération de A, est égale à la force divisée par la masse de A). Dans toute la suite de cette activité, nous considérerons la méthode addSpeed comme une méthode nous permettant d'appliquer une force sur un sprite.
Cette méthode addSpeed prend 2 paramètres : la valeur de la "force" et le couple "direction + sens" de la force (une force est modélisée par une "flèche" appelée vecteur en mathématiques, une force a donc une intensité (une valeur), une direction et un sens).
Cette direction et ce sens sont représentés par un angle :
si l'angle est égal à 0 : direction : horizontale, sens : vers la droite si l'angle est égal à 90 : direction : verticale, sens : vers le bas si l'angle est égal à 180 : direction : horizontale, sens : vers la gauche si l'angle est égal à 270 : direction : verticale, sens : vers le haut
Nous allons commencer par modéliser le poids d'un objet (le poids d'un objet A est la force exercée par la Terre sur l'objet A). Cette force est modélisée par un vecteur vertical dirigé vers le bas.
Testez ce code :
Rajouter cette fonction ( le code ascii 13
correspond à la touche « entrée »)
Un « jeu vidéo » en p5.js avec une librairie
Animer des personnages avec des sprites :
Dans le dossier p5.play il y a un dossier sprites qui contient deux types de sprites
Des images de fantômes
Deux images de spritesheet de sonic
Pour ces deux types de suites d’images il y a une méthode d’animation :
Testez ce code :
La méthode loadAnimation permet de créer une animation (nous "stockons" cette animation dans la variable perso_walk). La méthode loadAnimation prend en paramètres les différentes images qui composent l'animation : perso_walk = loadAnimation("sprites/ghost_walk0001.png", "sprites/ghost_walk0002.png","sprites/ghost_walk0003.png", "sprites/ghost_walk0004.png");
Une fois l'animation créée, il faut l'associer à un sprite en utilisant la méthode addAnimation : perso.addAnimation("walk",perso_walk);. Cette méthode prend en paramètres le nom de l'animation (walk) et l'animation elle-même (perso_walk).
La méthode changeAnimation permet de "jouer" l'animation, elle prend en paramètre le nom de l'animation à jouer : perso.changeAnimation("walk")
Un « jeu vidéo » en p5.js avec une librairie
l'utilisation de la méthode mirrorX (perso.mirrorX(-1) et perso.mirrorX(1)). Comme vous l'avez sans doute remarqué, dans le dossier "sprites", nous n'avons pas d'image du personnage "regardant" vers la gauche. Pourtant, en appuyant sur la flèche gauche du clavier, nous avons bien une animation du personnage vers la gauche.
Ceci est possible grâce à la méthode mirrorX qui permet d'avoir "l'animation symétrique" (perso.mirrorX(-1) permet d'avoir "l'animation symétrique", perso.mirrorX(1) permet de retrouver l'animation dans le "bon sens".
P5.play propose aussi, pour créer des animations, d'utiliser des spritesheets (les images
nécessaires à l'animation sont regroupées dans un unique fichier)
Exemple de spritesheet :
Testez ce code :
La méthode loadSpriteSheet (perso_sprite_sheet_walk = loadSpriteSheet('sprites/sonic_1.png', 48, 48, 6)) va nous permettre d'utiliser un spritesheet pour créer notre animation. Cette méthode prend 4 paramètres : le chemin vers l'image qui servira de spritesheet, la largeur du sprite, la hauteur du sprite et le nombre d'images utilisé.
La méthode loadAnimation prend en paramètre le nom du spritesheet (loadAnimation(perso_sprite_sheet_walk)).
frameDelay (perso_walk.frameDelay=4) permet de modifier la vitesse de l'animation : plus la valeur est petite, plus l'animation est rapide (les différentes images défilent plus rapidement). Par défaut, frameDelay a pour valeur 2.
Un « jeu vidéo » en p5.js avec une librairie
Vous pouvez avec de l’imagination, de la créativité créer un projet
(cela ne sert à rien de le faire trop complexe) en utilisant cette
librairie qui simplifie énormément les lignes de codes à écrire.
C’est l’objectif des librairies…..
