Découverte de la librairie P5.play.js




Créée par Paolo Pedercini cette librairie est une extension de P5.js qui facilite la gestion de sprite et l'utilisation de la 3D. Sur le site du lycée jean moulin de l'académie de nice vous trouverez une petite activité pour créer un jeu vidéo en utilisant cette librairie.

la documentation officielle de cette librairie étant un peu raide à votre niveau on va utiliser quelques exemples détaillés pour voir comment exploiter certaines possibilités de cette librairie. Ce qui suit est une traduction / adaptation de la page créée par Allison Parrish

Installation

pour pouvoir utiliser la librairie p5.play.js le plus simple est de glisser <script src="https://cdn.rawgit.com/molleindustria/p5.play/42cd19c3/lib/p5.play.js" type="text/javascript"t> dans votre fichier html, ou "https://cdn.rawgit.com/molleindustria/p5.play/42cd19c3/lib/p5.play.js" dans la rubrique javascript de votre codepen (sans les guillemets)

sinon vous pouvez télécharger la librairie ici. Décompressez l'archive. Vous trouverez un répertoire dans l'archive appelé lib; Copiez le fichier p5.play.js de ce répertoire dans le répertoire librairies de votre propre programme en javascript. Assurez-vous également d'ajouter la balise <script> nécessaire dans le fichier index.html de votre sketch. ( Plus d'informations ici sur l'installation de bibliothèques externes lors de l'utilisation de l'éditeur p5.js. )

Sprites

Un «sprite» est un objet dans un jeu (ou une autre application interactive) maitrisant sa taille et sa position à l'écran. Les objets sprites présentent généralement une interface permettant au programmeur de modifier leur position, trajectoire et apparence , ainsi que de lui permettre de poser facilement des questions sur le sprite, par exemple si elle rentre en contact avec une position particulière (ou un autre sprite).

Un seul sprite

La création d'une image-objet dans p5.play est réalisée à l'aide de la createSprite() fonction. Cette fonction renvoie un objet image-objet, qui comporte lui-même un certain nombre d'attributs et de méthodes permettant d'interroger et de modifier les propriétés de l'image-objet.

Voici un exemple simple qui crée un seul sprite:

La fonction createSprite() utilise quatre paramètres: la position de l’image-objet, ainsi que sa largeur et sa hauteur. L'attribut .shapeColor définit la couleur du rectangle qui représente l'image-objet. Pour que p5.play affiche l’image-objet, nous devons ajouter la drawSprites()fonction à la fin de draw().

Chaque sprite a un attribut position et un attribut velocity. Ces deux attributs ont des attributsx et y que vous pouvez définir pour contrôler la position de l’image-objet et sa vitesse (dans les deux dimensions). La bibliothèque p5.play s'occupe de mettre à jour la position en fonction de la vitesse pour vous. Dans l'exemple ci-dessus, l'image-objet se déplace constamment vers le bas, sauf si vous cliquez sur la souris. Dans ce cas, l'image-objet est instantanément déplacée à la position de la souris.




Sprites réactif

Comme mentionné ci-dessus, vous pouvez définir la vitesse de l'image-objet directement avec .velocity.xet .velocity.y. Vous pouvez également appeler l'attribut setSpeed() de l'image-objet pour lui indiquer de se déplacer dans une direction donnée à un taux particulier. Dans cet exemple, utilisez les touches de direction pour contrôler le sprite:

(La variable "key" dans p5.js ne fonctionne que pour les caractères alphanumériques. Pour détecter les touches de direction, nous devons utiliser la variable "keyCode".)

Ajouter de la gravité à votre esquisse est aussi simple que d’ajouter une force constante vers le bas sur chaque image (à l’aide de la méthode .setSpeed()). Voici un exemple qui entraîne l'affichage d'un sprite à l'écran, qui se déplace vers le bas à chaque image, puis rebondit lorsqu'il atteint le bas:




Suivre la souris

Il existe un certain nombre de façons de faire suivre une souris à une image-objet. La première consiste à définir la position directement:

Vous pouvez également ajouter un peu de décalage au mouvement de l'image-objet en définissant les vitesses X et Y à la différence entre la position de l'image-objet et celle de la souris. Si on appuye sur le bouton on passe dans ce deuxième mode

Enfin, vous pouvez utiliser la méthode .attractionPoint() pour définir une force qui pousse l’image-objet dans la direction de la position de la souris:

Dans cet exemple, nous définissons également l'attribut .maxSpeed de l'objet (qui contrôle la rapidité avec laquelle une image-objet peut se déplacer, quelles que soient les forces qui s'exercent sur lui), son attribut .friction (un multiplicateur qui réduit lentement la vitesse de l'objet sur chaque image), et l'attribut .rotateToDirection (qui, lorsqu'il est défini sur true, provoque la rotation de l'objet dans la direction dans laquelle il se déplace).

Événements de souris

Les sprites du framework p5.play sont dotés d'un mécanisme intégré permettant de détecter si l'utilisateur interagit ou non avec le sprite à l'aide de la souris. Il existe deux manières de vérifier l’interaction de la souris: les rappels ou les attributs booléens.

Vous pouvez affecter des fonctions à quatre objets d'objet-image afin de définir le comportement de celui-ci par rapport au mouvement de la souris de l'utilisateur. L'exemple suivant illustre les quatre:

Les quatre attributs sont:

La fonction que vous affectez à ces attributs sera exécutée chaque fois que l'événement spécifié se produit. Dans la fonction, l'expression "this" fait référence à l' objet avec lequel l'interaction s'est produite . (Ceci est utile pour écrire des gestionnaires d'événements pouvant être appliqués à plusieurs objets; voir ci-dessous.)

Chaque objet sprite a également un mouseIsOverattribut, qui a une valeur booléenne: true si la souris est actuellement sur l'objet, false sinon. Dans l'exemple suivant, les deux sprites répondent lorsque la souris les survole. (Pour le second sprite, le comportement de réaction ne se produit que si le bouton de la souris est également enfoncé.)

Notez également dans cet exemple l'utilisation de l'attribut .rotation, qui définit la rotation actuelle de l'image-objet (en degrés).




Sprites multiples

Vous pouvez appeler la createSprite()fonction autant de fois que vous le souhaitez! Le framework p5.play conserve une trace de tous les sprites que vous avez ajoutés en coulisses (vous n'avez donc pas besoin de créer votre propre structure de données pour les stocker). Dans l'exemple suivant, j'ai écrit du code mousePressed()qui crée un nouveau sprite chaque fois que l'utilisateur clique sur la souris:

Notez ici l'utilisation de l'attribut .life, qui est le nombre maximal d'images que «l'image-objet» vivra avant son effacement automatique par le framework p5.play.

Si vous souhaitez appliquer des modifications aux images-objets après leur création, autres que celles effectuées par le framework p5.play, vous devez effectuer une itération sur toutes les images-objets de la méthode draw(). La structure fournit un tableau intégré appelé allSprites qui contient toutes les images-objets actives de l'esquisse. Dans l'exemple suivant, nous utilisons la variable allSprites pour appliquer la «gravité» (c'est-à-dire une force descendante constante) à chaque image-objet ajoutée à la scène dans mousePressed(). Une autre instruction if vérifie si l’image-objet s’est étendue au-delà de la hauteur de l’esquisse et la fait «rebondir» si tel est le cas. Une autre instruction if supprime les images-objets ayant dépassé les limites de l'esquisse dans la dimension X.

Événements sur plusieurs sprites

chaque sprite partage la même fonction removeAndScore - le mot clé "this" garde tout bien propre




Groupes de sprites

Group() vous permet de "classer" les sprites et de leur donner des comportements différents.




Les collisions

la méthode .overlap() retourne true si une image-objet en chevauche une autre.

la méthode .collide() ...

la méthode .displace() ...

collision de groupes

Collision callbacks




Images and animations

Animations

(Tapé originellement sur openprocessing par Rainar Fuchs (Budder_Cactus))