Utiliser P5play
Introduction
Processing est un environnement de développement libre créé par Benjamin Fry et Casey Reas. À l’origine développée pour la création artistique (création plastique et graphique interactive), Processing est aussi énormément utilisé dans le cadre de l’enseignement de la programmation. Le langage de programmation utilisé (Java simplifié) favorise en effet une prise en main rapide et l’obtention de résultats spectaculaires.
La philosophie de Processing a été reprise dans la bibliothèque JavaScript p5js (créée par Lauren McCarthy, sous licence GNU). Il est donc désormais possible de visionner le résultat de l’exécution d’un programme « Processing » directement dans un navigateur web. Le langage utilisé n’est donc plus Java mais JavaScript.
P5js permet de créer des « œuvres numériques » intéressantes, mais ne possède pas de fonction dédiée à la création de jeu vidéo. P5play est une bibliothèque JavaScript qui, justement, propose ces fonctions dédiées à la création de jeu vidéo.
P5play s’appuie sur p5js, il est donc nécessaire de maitriser les principes de bases de l’utilisation de p5js avant de pouvoir utiliser p5play.
Pourquoi utiliser p5play qui est une surcouche de p5js alors qu’il existe des bibliothèques JavaScript directement dédiées à la création de jeu vidéo (par exemple phaserJS) ?
Principalement, je vois 2 raisons :
- Les connaissances acquises sur l’utilisation de p5js pourront être très facilement réinvesties dans d’autres projets d’ICN, par exemple la création d’une œuvre d’art numérique.
- P5play est relativement facile à prendre en main comparé à des bibliothèques spécialisées dans la création de jeu vidéo.
En contrepartie de cette simplicité, les fonctions proposées par p5play sont un peu plus limitées , mais devraient largement suffire à la création de petits jeux pas trop ambitieux. Les élèves les plus à l’aise pourront se tourner vers les bibliothèques plus « professionnelles » s’ils ont l’intention d’utiliser des fonctions très avancées.
Cette vidéo est un des grains de culture scientifique et technique du MOOC sur l’Informatique et la Création Numérique. La vidéo a été réalisée par Manhattan Studio Production.
Utiliser P5Play
Vous trouverez dans cette archive toutes les images nécessaires à la réalisation du mini-projet.
Afin d’avoir un retour de vos pairs sur votre projet, et éventuellement valider cette séquence, vous devez publier votre jeu sur le site thimble. Pour ce faire, il vous suffit de suivre la procédure décrite dans ce cours qui vous permettra de créer un lien. Ouvrez ensuite un nouveau sujet de discussion dans le forum ci-dessous, et recopiez-y ce lien en lui adjoignant un petit message d’introduction à votre jeu.
Vidéo du mini-projet
http://p5play.molleindustria.org/docs/index.htmlLe site officiel de p5Play offre une série d’exemples très détaillés. Ces exemples couvrent, à peu de chose près, toutes les caractéristiques de cette bibliothèque :
http://p5play.molleindustria.org/examples/index.htmlDes activités de prise en main de p5Play sont proposées ici :
https://pixees.fr/informatiquelycee/p5_play_a1.html
Exporter son jeu sur thimbleUn projet p5play s’exporte très facilement chez un hébergeur. Vous aurez à le faire sur le site thimble pour l’évaluation de cette séquence sur le jeu vidéo. Nous vous donnons ici les étapes essentielles pour y arriver. Nous faisons ici l’hypothèse que le répertoire de votre projet contient des fichiers, ainsi qu’un sous-répertoire « lib ». La procédure est un peu laborieuse car thimble ne permet pas l’import de répertoires.
- allez sur le site thimble, connectez-vous (créez un compte si besoin) et cliquez sur « Créer un nouveau projet »;
- dans la colonne de gauche de la page web, supprimez les deux fichiers présents (index.html et style.css, un clic sur le bouton de droite fait apparaître le menu idoine);
- créez un répertoire « lib » (clic droit);
- ouvrez un navigateur de fichiers et déplacez-vous dans le répertoire de votre projet;
- allez dans le sous-répertoire « lib » et faites un glisser-déposer de tous les fichiers qui s’y trouvent vers la colonne gauche de la page thimble;
- dans la page thimble, déplacez un à un les fichiers importés vers le répertoire « lib » (clic droit sur le fichier, option « Déplacer… »)
- revenez dans votre navigateur de fichiers, dans le répertoire de votre projet;
- faites un glisser-déposer de tous les fichiers qui s’y trouvent vers la colonne gauche de la page thimble;
- attendez que tous les fichiers soient bien importés (alternativement, vous pouvez faire l’import en cliquant sur le « + » à gauche de « Fichier » et en choisissant « Envoi… »);
- cliquez sur « Publier » en haut à droite de la page thimble : un lien est associé à votre projet, que vous pouvez envoyer à qui vous voulez !