Tactileo Quest

Lettre IGN MAG +

Lettre IGN MAG +

Tactileo Quest

Tactileo est un projet lancé par le ministère de l'éducation nationale dans le cadre des investissements d'avenir et auquel l'IGN participe. Il propose d’étudier et de définir un véritable écosystème pédagogique réunissant les interfaces tactiles (tables interactives, tablettes, tableaux et sols interactifs) au sein d’une classe.

Dans le cadre de ce projet, l’IGN étudie les interactions sur une carte : comment réunir et collecter des informations sur une carte en interaction avec plusieurs personnes autour d’une même table tactile ?

Il a ainsi développé Tactileo Quest, une application de démonstration façon RPG (role playing game, ou jeu de rôle) isométrique pour simuler les déplacements et la collecte d’informations sur une carte. Dans ce cas, la carte sert de terrain de jeu pour amener l’élève à découvrir un univers sérieux, seul ou en équipe, en interaction avec d’autres personnages (autres joueurs ou figurants virtuels). Les mécanismes classiques de recherche et de collecte d’informations utilisés dans les jeux peuvent alors intervenir pour guider l’élève dans sa quête : gestion d’objets, compétences/évolution, réponse à des questions, situation dans l’espace, chance...

Tactileo

Avertissement : cette application n’est en aucun cas un jeu ou un moteur de jeu complet. Le but est uniquement de présenter ce que « pourrait » être une interface tactile pour le déplacement et la collecte d'informations sur une carte et de recueillir les avis des différents intervenants au sein du projet Tactileo pour orienter les développements et les amener à exprimer des idées de jeux éducatifs qui pourraient être mis en place au travers d’une telle interface.

 Tester l'application en ligne

Approche de développement

Le code source complet de cette application de démonstration est disponible sur Github, sous licence CeCILL-B. Il est fourni tel quel à titre d’exemple. Merci de mentionner l'IGN pour toute réutilisation.

L’implémentation a été réalisée entièrement en HTML5/CSS3 et JavaScript afin d’assurer un maximum de portabilité sur les différentes plateformes utilisées dans le projet (web, tables et tablettes Android et Apple). Cela présente l’avantage de bénéficier des outils développés par l’IGN pour la manipulation des flux du Géoportail et l’affichage de la carte au travers de l’API Géoportail et d’OpenLayers. L’application PhoneGap Legends a également été une source d'inspiration. Cette dernière a été développée par Andrew Trice qui a montré l’efficacité d’un tel procédé et qui expose les techniques d’optimisation sur son blog.

Le déplacement des lutins se fait dans une boucle de jeu (via requestAnimationFrame) pour optimiser les rafraîchissements dans le navigateur.

Affichage des personnages

Le principe est d’afficher des personnages sous forme de lutins (sprite) qu’on peut déplacer sur une carte pour mener une quête ou découvrir de l’information. Dans le cadre de cette application de démonstration, l'IGN s'est appuyé sur le projet libre Liberated pixel cup disponible sous licence CC-By-SA 3.0, en utilisant par exemple le générateur de lutins développé par Guarav pour facilement personnaliser un personnage sous différentes positions. L'IGN remercie les auteurs du projet pour leurs contributions.

L’image générée sous forme d'une feuille de personnage (sprite sheet) est ensuite utilisée comme image de fond dans un CSS. L’animation pour la marche des personnages se fait alors en appliquant une classe spécifique à la <div> du lutin qui va centrer l’image sur la bonne position dans la séquence.

 Accéder au générateur de personnages

Sprite sheet princess
Sprite sheet de « Princess »

.sprite
{    width: 64px;
     height: 64px;
     overflow: hidden;
     background-image:url("img/orc.png");
     background-position: 0px 0px;
     border-radius:64px;
     display:inline-block;
     transform:translate(-2px 0);
}
/* SPRITE walk left */
.sprite_walk_left_0 { background-position: 0px -578px; }
.sprite_walk_left_1 { background-position: -64px -578px; }
.sprite_walk_left_2 { background-position: -128px -578px; }
.sprite_walk_left_3 { background-position: -192px -578px; }
.sprite_walk_left_4 { background-position: -256px -578px; }
.sprite_walk_left_5 { background-position: -320px -578px; }
.sprite_walk_left_6 { background-position: -384px -578px; }
.sprite_walk_left_7 { background-position: -448px -578px; }
.sprite_walk_left_8 { background-position: -512px -578px; }

Déplacement de la carte

Pour afficher la carte, l'application de démonstration utilise la bibliothèque JavaScript OpenLayers et les flux du Géoportail. C’est la couche « carte de l'état-major » disponible dans l’API Géoportail qui sert de fond de carte avec son aspect vintage, ses zones fortifiées « à la Vauban » et qui donne un effet jeu de rôle par l’utilisation des hachures pour représenter le relief. Un bouton permet de passer sur la couche « vue aérienne ».

Un déplacement classique (swipe, pinch zoom) n’étant plus possible lorsqu’on a plusieurs mains en même temps sur une table tactile, une rose des vents permet de contrôler les déplacements et un rayon tracteur vient matérialiser celui-ci sous le doigt. Le but est qu'un personnage principal (le professeur par exemple) déplace la carte ou alors qu’on utilise le résultat de la quête pour accéder à d’autres paysages.

Déplacement de la carte
Déplacement de la carte

Le moteur de recherche du Géoportail peut également être mis à contribution pour se « téléporter » sur un lieu donné grâce à la recherche par lieu-dit qui permet une localisation plus « aléatoire ». Un effet « téléportation » est ajouté aux personnages grâce à une transformation CSS sur les lutins qui donne un effet d’étirement.

#content .sprite
{    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.teleport .sprite
{    transform: scale(0.6, 200);
     -webkit-transform: scale(0.6, 200);
     opacity:0;
}

Quête

A défaut de quête spécifique, la base de données en ligne DBPedia dont le chapitre francophone est mené dans le cadre de la plateforme Sémanticpédia, en coordination avec le ministère de la culture et de la communication, Wikimédia France et l’Inria, a été ajouté pour créer un peu d’interaction avec le fond cartographique. Les lieux disponibles sur DBPedia sont autant de places à explorer. Il suffit pour cela d’appliquer un filtre géométrique sur les objets de la base pour se limiter à la zone affichée à l’écran. Concrètement, l'IGN a développé un layer DBPedia spécifique pour OpenLayers avec une strategy.BBOX permettant de transformer les requêtes au format SpartQL de BDPedia et d’afficher le résultat dans un calque vecteur OpenLayers.

Afin de donner un style RPG, la symbolisation des données a été faite suivant la catégorie des objets en utilisant le set d’icônes réalisé par Orteil sur Deviant Art au travers d’un style appliqué à la couche OpenLayers.

Icônes

L’information sur laquelle se trouve un personnage à la fin d’un déplacement est ensuite récupérée et affichée dans une fiche façon parchemin… Pour une meilleure lecture tout autour de la table, la fiche est déplaçable et orientable.

Parchemin
Affichage façon parchemin

Finalisation de l'application

Pour finir, des balises ont été ajoutées à la page pour en faire une application web et lui définir une icône. Afin de permettre un affichage plein écran grâce à la fonction d’ajout à la page d’accueil sur tablettes Android et Apple avec le navigateur Chrome, un code JavaScript ATH a également été ajouté pour signaler la fonctionnalité à l’utilisateur et proposer l’enregistrement de la page.

<!-- android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
<link rel="apple-touch-icon" href="img/logo175.png" />
<link rel="apple-touch-startup-image" href="img/logo175.png"/>

La page peut être encapsulée dans un projet Phonegap pour une installation sur tablette via un store. Sur Windows, il a été choisi de l’encapsuler dans une webview avec Qt pour des facilités de déploiement.

Au final, cette application de démonstration montre les possibilités d’interaction avec une carte pour collecter de l’information. Les ressources et bibliothèques mises en œuvre permettent une utilisation sur différents matériels et proposent une interface pour le développement de jeux au service de l’enseignement (serious game) dans lesquels les informations DBPedia seront remplacées par des ressources pédagogiques amenant les élèves à mobiliser leurs connaissances autour de domaines pouvant allier géographie, histoire et autres disciplines.

Ressources

Les ressources suivantes sont utilisées dans l'application :

Images et animations

Police de caractère

  • Almendra font © 2011-2012 Ana Sanfelippo, Open font Licence v1.1

Ressources cartographiques

Source documentaire

Bibliothèques de développement

Mis à jour le 
06/02/2015