Racontez des histoires

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

Noyau

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.

Javascript

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.

Sécurité

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.

JSON

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

• le caractère « | » temporise l'affichage du texte
• « leftCharacter » et « rightCharacter » font référence aux personnages présents dans resources/character (ex: docky.png)
• « position » vaut « left » ou « right » sélectionnant ainsi le personnage qui parle

{
    "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

• « engine » fait référence au fichier js à charger : associateEngine.js
• les « assets » recensent les ressources à mettre en cache en vue de l'énigme

Un exemple complet est visible ici.

Arborescence

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'épisode
• episodeXX.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

Ajout d’un moteur d’énigme

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 :

• /js/turbo.js
• /css/turbo.css (optionnel)
• /ui/turbo/ressource1.png (optionnel)
• /ui/turbo/spreadsheet1.png (optionnel)
• /ui/turbo/…

Les prérequis sont les suivants :

• Le moteur doit tenir compte du conteneur de l’énigme, fournie par le noyau : container: null.
• Le moteur doit fournir une méthode init, qui instancie et construit l’énigme.
• Le moteur doit fournir une méthode clean, qui nettoie et détruit tout élément inutile hors du contexte de l’énigme (variables globales, éléments du Dom, …)
• Le moteur doit fournir une méthode help, utilisable une seule fois, qui aidera l’utilisateur dans la résolution de l’énigme.
• Le moteur doit fournir une méthode checkResponse qui doit gérer les différents cas de figure envisageables (réponse correcte, incorrecte ou manquante)
• Lors de la résolution de l’énigme, le moteur doit en informer le noyau de l’application en effectuant l’appel suivant :
  
  $.jStorage.publish("enigmaResolve", nbTry); où nbTry correspond au nombre d’essai du joueur

Création d’un épisode

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.
Il reste à décider de l'enchaînement des écrans (conversation ou enigme) et à construire l'épisode !

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.

Création d’une histoire

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.