Ce projet a pour objectif, à travers une application interactive et embarquée, de développer l’apprentissage des plus jeunes, en s’appuyant sur des mécaniques scénaristiques et ludiques. Le moteur de l’application se veut évolutif et favorise la création de nouveau contenu.
L’ergonomie doit être simple, orientée clic/dragNdrop, et accessible à tout type de terminal.
Le code est pour l'instant mis à disposition sur Github pour une meilleure prise en main des possibilités de l’outil.
Le propre de l'homme est d'atteindre la plénitude et d'apprendre des autres chimpanzés… Sacha Guitry
Le noyau de l’application gère les “parties communes” (options, score, écrans d’accueil et de chargement, écrans de conversation). Les principaux composants sont disponibles à la racine du projet, répartis entre les répertoires css
, js
et ui
pour les ressources graphiques.
Tout modification du noyau est envisageable mais soumise à validation.
Plusieurs librairies javascript externes ont été mise à profit, comme notamment jQuery , jStorage ou encore Lo-Dash . Le script principal, core.js
, gère le déroulement de l’histoire et l’appel des différentes énigmes. L’ensemble de ces composants est placé dans le répertoire js/core
.
Les moteurs d’énigme sont eux gérés séparément.
L’application est hébergée sur nos serveurs mais peut également être utilisée en local, à des fins de développement.
A ce stade du développement, l’utilisation du JS n’exclut pas certaines failles de sécurité et il incombe aux intervenants de vérifier également si leurs modifications n’altèrent pas le noyau du jeu et les données propres aux utilisateurs.
Le déroulement d’une histoire s’appuie sur une collection de fichiers au format Json.
Ils sont éditables à volonté, sous réserve de respecter la structure établie.
{ "name": "docky", "episodes": [ "episode1", "episode2" ] }
1. Fichier story.json
La valeur « name » doit reprendre le nom du répertoire de l'histoire.
{ "title": "Docky is Back", "episodeTitle": "Le village des taupes", "episodeNumber": "Episode 1", "screens" : [] }
2. Fichier episode1.json sans écrans (cf. écrans ci-dessous)
La valeur « title » correspond au titre de la page tandis
que « episodeTitle » correspond au nom de l'épisode, affiché sur l'écran de chargement.
{ "id": "screen3", "type": "converse", "leftCharacter": "docky", "rightCharacter": "roger", "background": "converse.jpg", "lines": [ { "position": "left", "text": "Commençons à parler" }, { "position": "left", "text": "Continuons le texte" }, { "position": "right", "text": "Etrange ||||||||||| c'est fini !" } ] }
3. écran de conversation - type: converse
resources/character
(ex: docky.png)
{ "id": "screen2", "type": "enigma", "engine": "associate", "background": "enigma.png", "stylesheet": "associate.css", "legend": "Qui mange quoi ?", "help": "Veux-tu que je supprime les réponses inutiles ?", "assets" : { "stack": "enigma1.png" } }
4. écran Enigme - type: enigma
associateEngine.js
Avant d'ajouter du contenu, voici quelques précisions sur l'arborescence du contenu dynamique. "docky" est ici une histoire à part entière. Pour créer une autre histoire, il faudra dupliquer ce répertoire et respecter l'arborescence décrite ci-dessous.
/background
contient les fonds d'écrans (scénario et conversation)/character
contient les personnages, au format png, préparés pour l'animation/enigma
contient les ressources utiles aux énigmes de l'épisode/story
contient les fichiers Json structurant l'épisodeepisodeXX.html
donne un point d'entrée pour l'épisode (seule la balise meta episode change)index.html
permet d'accéder au jeu, il est identique d'un jeu à l'autre
Afin d’étoffer les mécaniques de jeu disponibles, il est possible de soumettre de nouveaux moteurs à travers un fichier .js, éventuellement accompagné du style css correspondant et des ressources graphiques à mettre en place.
Exemple : Pour ajouter le moteur turbo, nous aurons les fichiers :
container: null
.init
, qui instancie et construit l’énigme.clean
, qui nettoie et détruit tout élément inutile hors du contexte de l’énigme (variables globales, éléments du Dom, …)help
, utilisable une seule fois, qui aidera l’utilisateur dans la résolution de l’énigme.checkResponse
qui doit gérer les différents cas de figure envisageables (réponse correcte, incorrecte ou manquante)$.jStorage.publish("enigmaResolve", nbTry);
où nbTry correspond au nombre d’essai du joueur
Ajouter un épisode commence par l’insertion dans le fichier stories/nom_histoire/resources/story/story.json
d'une nouvelle entrée.
{ "name": "docky", "episodes": [ "episode1", "episode2", "episode3" ] }Puis il faut créer dans ce même répertoire le fichier json correspondant (episodeXX.json), cf extrait Json #2.
Afin de pouvoir tester votre épisode, il est possible de remettre à zéro votre progression en allant sur index.html#reset
.
Afin d'ajouter une énigme, il faut soit coder son propre moteur d'énigme, ou en utiliser un déjà existant (en utilisant une nouvelle ressource graphique). Par exemple, pour utiliser le moteur associate, il faut fournir une image contenant les 9 « pastilles ».
La disposition de ces pastilles respecte une certaine logique dans l'association d'image (la colonne de gauche contient les animaux, celle du milieu les mauvaises réponses, celle de droite les réponses).
De son côté le moteur chronology utilise 4 images ordonnées sur une seule colonne.
A terme, chaque mécanique de jeu aura sa propre documentation. Cette section n'est qu'une ébauche.
Il suffit de reprendre l'arborescence décrite précédemment, d'importer les resources requises, d'ajouter le fichier index.html
, et de créer autant d'episodeXX.html
, que d'épisodes requis.
Afin de pouvoir mieux gérer le cache, chaque épisode est représenté par son propre fichier .html.