Scénarisation de Jeux

(1)

Scénarisation de Jeux Sérieux

E r w a n T R A N V O U E Z

M a î t r e d e C o n fé r e n c e s ( I n f o r m a t i q u e ) L I S – P o l y t e c h M a r s e i l l e

e r w a n . t r a n v o u e z @ u n i v - a m u . f r

Licence Lettres

Parcours Ecritures

(2)

2 / 42

Définitions

2

(3)

Jeux Sérieux / Serious Game : Définition

 Pourquoi les Jeux Sérieux (SG) :

 « Apporter une information à quelqu’un qui ne se pose pas de question c’est comme pisser dans un violon »

 On n’informe pas quelqu’un qui ne se pose pas de question (A. Tricot cité dans [Alvarez 2007]

 => il faut susciter la question, créer de la curiosité et donc l’envie d’en savoir plus …

 Le Jeu Sérieux essaie d’ajouter de l’engagement/implication dans le processus éducatif (opposition à apathie).

 MAIS il n’entend pas se substituer à l’apprentissage « classique » … approche complémentaire…

 Définition d’Alvarez [Alvarez 2007]

 Application informatique, dont l’objectif est de combiner à la fois des aspects sérieux (Serious) tels, de manière non exhaustive, l’enseignement, l’apprentissage, la communication, ou encore l’information avec des ressorts ludiques issus du jeu vidéo (Game). Une telle association, qui s’opère par l’implémentation d’un

‘scénario pédagogique’, a donc pour but de s’écarter du simple divertissement.

 Avant de décortiquer cette définition …voyons des exemples en considérant l’objectif du SG

 Source : SeriousGameVlog / Youtube , Thèse Alvarez (2007), Thèse M. Ali Oulhaci (2014),

Thèse I. Daoudi (en cours)

(4)

Parcours Ecriture – Licence Lettres – Aix Marseille Université 1^ère version

Exemple de SG : objectif Apprentissage … linguistique (et culturel)

 Tactical Language and Culture Training Systems (TLCTS):

https://www.americasarmy.com/

 Objectif : Formation linguistique & culturelle =>la formation interne de l’armée américaine

 Architecture : évaluation de l’apprenant, environnement 3D (Unreal), interactions avec PNJ (Personnages Non Joueurs : ie virtuels avec comportement programmé en fonction des actions des apprenants) => proche des ITS (Intelligent Tutoring Systems) soit EIAH en français

(Environnement Informatique pour l’Apprentissage Humain)

4 / 42

(5)

Exemple de SG : objectif Communication, recrutement / formation professionnelle

 America’s army : https://www.americasarmy.com/

 Demo : https://youtu.be/_ipUNOfG4eY - https://www.americasarmy.com/

 Windows / Playstation / XBox : FPS (First Person Shooter), jeu réseau => jeu en équipe de compétences/armes complémentaires, depuis 2002 … Gratuit of course.

 Objectif : recrutement / formation (règles militaires … ). Disposait de moyen financier

important (M°€)

(6)

Exemple de SG : objectif Communication, Sensibilisation

 Darfour ‘s dying : Demo : https://www.youtube.com/watch?v=gehaZkV8034

 Jeu sur navigateur (web), site initial down (http://www.darfurisdying.com/)

 Objectif : sensibilisation au drame du Darfour et permettant de « jouer » le rôle et donc les difficultés rencontrées par les réfugiés (recherche de l’eau, vie dans un camp de réfugiés) => développe l’empathie.

6 / 42

(7)

Exemple de SG : objectif Formation, Sensibilisation

 Escape from Wilson Island: développé par laboratoire de recherche KOM - Allemagne

 Demo : https://youtu.be/UoF1_xNgQ8Y

 Jeu sur navigateur (web), http://demos.storytec.de/wilson/

 Objectif : isolés sur une île déserte des joueurs doivent collaborer pour survivre (nourriture, eau, abris…). Joueur ont des compétences différentes, peuvent négocier des ressources….

 Débriefing off-game par un observateur humain

(8)

Exemple de SG : Formation initiale

 FORMAT-STORE : formation d’étudiants en école de commerce (complémentaire)

 Met en situation les étudiants dans des scénarios définis par des professionnels de la vente (relation clientèle, stock…)

8 / 42

(9)

Exemple de SG : objectif formation professionnelle

 ACORFORMed : formation des médecins pour l’annonce de mauvaises nouvelles

 Demo : https://youtu.be/hZ0jZxYZnEc => Aix Marseille Université / Laboratoires LPL, LIS, ISM, LTCI

 Environnement immersif (casque réalité virtuelle) pour créer des situations vraisemblable et crédible … sans que les erreurs aient des conséquences psychologiques sur de « vrais » patients

 Avatar capable d’afficher des émotions, discours basé sur dialogue experts, génération de

dialogue en fonction des paroles de l’apprenant (IA, traitement langage naturel, …)

(10)

Exemple de SG : objectif formation professionnelle

 SimFor : formation à la gestion de crise ciblant des non professionnels (maire, directeur d’école par ex.)

 Demo : https://www.youtube.com/watch?v=Bx8dNfpdt_k

 => Aix Marseille Université / LIS (A. Oulhaci, E. Tranvouez, S. Fournier, B. Espinasse) / PIXXIM / SII

 Environnement 3D (PC/Mac) multi-joueurs, PNJs (IA) + évaluation multi-compétences

10 / 42

(11)

Exemple de SG : objectif apprentissage scolaire

 Tamarin : apprentissage de la résolution de problèmes mathématiques écrits (Word Problems) => Université de Tiaret – Algérie / Aix Marseille Université / LIS (A. Chadli, E. Tranvouez) basé sur le modèle de résolution de Polya.

 Elèves apprennent à comprendre un problème (informations utiles), planifier la résolution du problème (séquences de calculs), exécuter le plan (calculs) et réviser leur solution.

 Environnement 3D mono joueur, étapes associées à mini-jeu dédiés

(12)

Jeux Sérieux / Serious Game : Définition

 Définition d’Alvarez [Alvarez 2007]

 Application informatique, dont l’objectif est de combiner à la fois des aspects sérieux (Serious) tels, de manière non exhaustive, l’enseignement, l’apprentissage, la

communication, ou encore l’information avec des ressorts ludiques issus du jeu vidéo (Game). Une telle association, qui s’opère par l’implémentation d’un ‘scénario

pédagogique’, a donc pour but de s’écarter du simple divertissement.

 Décortiquons cette définition …

 Application informatique : => exclu les jeux dits sur plateau, implique développement informatique

 choix de plateforme de déploiement

o Choix Matériel : Ordinateur, tablette, téléphone

o Système d’exploitation : Windows ©, MacOS ©, Android ©, IOS ©, Linux, Web (html+flash/java…)

….

12 / 42

(13)

Jeux Sérieux / Serious Game : Définition

 Définition d’Alvarez [Alvarez 2007]

 Application informatique, dont l’objectif est de combiner à la fois des aspects sérieux (Serious) tels, de manière non exhaustive, l’enseignement, l’apprentissage, la

communication, ou encore l’information avec des ressorts ludiques issus du jeu vidéo (Game). Une telle association, qui s’opère par l’implémentation d’un ‘scénario

pédagogique’, a donc pour but de s’écarter du simple divertissement.

 Décortiquons cette définition …

 Objectif de formation du SG :

 Apprentissage : scolaire (mathématiques, lecture …), universitaire (programmation…)

 Formation professionnelle : formation des pompiers, manager, médecin…

 Communication : jeux sérieux « publicitaires » au service d’une marque,

 Information : sensibilisation à l’environnement, écologie

(14)

Jeux Sérieux / Serious Game : Définition

 Définition d’Alvarez [Alvarez 2007]

 Application informatique, dont l’objectif est de combiner à la fois des aspects sérieux (Serious) tels, de manière non exhaustive, l’enseignement, l’apprentissage, la

communication, ou encore l’information avec des ressorts ludiques issus du jeu vidéo (Game). Une telle association, qui s’opère par l’implémentation d’un ‘scénario

pédagogique’, a donc pour but de s’écarter du simple divertissement.

 Décortiquons cette définition …

 ressorts ludiques issus du jeu vidéo :

 => variables selon genre de jeu vidéo

o Action (FPS, jeu de plateforme), Aventure (texte), jeu de rôle, Stratégie, puzzle …

 Implique modes d’interaction (IHM – Interface Homme – Machine) adaptés au type de jeu

o Clavier, souris, tactile, gestes, émotions !… (multimodal si combine différente techniques)

14 / 42

(15)

Jeux Sérieux / Serious Game : Définition

 Définition d’Alvarez [Alvarez 2007]

 Application informatique, dont l’objectif est de combiner à la fois des aspects sérieux (Serious) tels, de manière non exhaustive, l’enseignement, l’apprentissage, la communication, ou encore l’information avec des ressorts ludiques issus du jeu vidéo (Game). Une telle association, qui s’opère par l’implémentation d’un

‘scénario pédagogique’, a donc pour but de s’écarter du simple divertissement.

 Décortiquons cette définition …

 Scénario pédagogique …

 Le jeu est subordonné au scénario pédagogique : exemple apprentissage calcul mental …

 Le scénario pédagogique est subordonné à l’objectif de formation !

 Scénario doit s’adapter à l’objet de la formation : selon qu’on forme aux mathématiques, aux premiers secours, apprentissage d’une langue … les compétences ….

 On aura des couples (genre de jeu / scénario pédagogique) différents

 Attention : l’utilisation d’un jeu vidéo (ie initialement sans vocation formation) pour former ne

relève pas des jeux sérieux … (mais ça ne veut pas dire que ce n’est pas un bon usage)

(16)

16 / 42

Pédagogie

=> Evaluation ?

(17)

EIAH … Environnement Informatique pour l’Apprentissage Humain

 Objectif : développement des applications informatiques dédiées à l’enseignement (aspect ludique réduit  )

 Il existe une communauté scientifique en France rassemblant chercheurs des sciences sociales (Psychologie, Didactique, Ergonomes…) et des sciences

informatiques (Intelligence Artificielle, Traitement du langage naturel, Big Data…)

 Attention : il ne s’agit pas d’avoir des théoricien de la pédagogie qui délèguent le

développement logiciel de l’application à des « informaticiens »… la partie développement relève de l’ingénierie pas de la recherche  (et en général, on essaie d’avoir des professionnels du développement via des partenariats industriels)

 Le modèle dit computationnel supportant l’environnement d’apprentissage peut inclure des

enjeux architecturaux (comment l’application devra être conçue) mais reste à un certain

niveau d’abstraction (nécessitera une traduction en langage de programmation => logiciel)

(18)

EIAH … Exemple

 Cabri : https://www.cabri.com Apprentissage des mathématiques

 Cible : classes de Primaire, Collège …

 Avec différentes déclinaison (gratuit/payant avec leçons incluses => EIAH), web/application windows/mac)

 Démo : https://www.youtube.com/watch?time_continue=4&v=0Gd8U87G4lg&feature=emb_logo

 Outil informatique supportant l’enseignement mais n’incluant pas de module d’évaluation… le scénario pédagogique (en version gratuite) & l’évaluation se fait par l’enseignement en dehors de l’outil.

18 / 42

(19)

EIAH … Environnement Informatique pour l’Apprentissage Humain

 Pourquoi alors parler d’EIAH lorsqu’on parle de Jeux Sérieux ?

 Car l’EIAH a une longue histoire sur la digitalisation de l’apprentissage, et notamment

o la conception de situation et scénario pédagogique

o La construction d’un modèle de l’apprenant : comment construire une représentation de ce que sait à un instant t l’apprenant

o Module pédagogique : capacité à faire évoluer le scenario pédagogique (complexité ou déroulement alternatif) en fonction de l’avancement de l’apprenant. Ce qui implique ….

o Des méthodes d’évaluation pour déterminer si l’apprenant a bien appris ce qu’on voulait lui apprendre.

 Méthodes d’évaluation : elles peuvent varier en forme et complexité selon le type d’apprentissage !

 QCM & somme des réponses positives vs. Niveau minimum requis pour apprendre

 Raisonnement : trace des actions/décisions des & apprenants vs comportement/résultat attendu

 Plus récemment : utilisation d’outils de reconnaissance faciale des émotions pour détecter les états émotionnels (attendus ou non) des apprenants …

(20)

SimFor : évaluation de compétences

 Contexte : Digitaliser un exercice de gestion de crise

 Qu’est ce que cela implique ?

 Chaque acteur doit jouer son rôle : il doit savoir manipuler les documents de gestion de crise (formulation d’une alerte), savoir qui contacter (quelles interactions avec quel/les personne/s), savoir dérouler un plan d’action (prédéfini)…

 On pourra parler de connaissances déclaratives (faits, informations), de connaissances

procédurales (enchaînement – correct – d’actions) voire de connaissances conditionnelles (savoir identifier la situation et les plans adéquats pour y remédier)

 Donc des connaissances individuelles et des connaissances collectives…

 Les compétences sont la capacité à mettre en œuvre ces connaissances (et ce à bon escient)

 Attention : le SG ne remplace pas l’exercice réel (effectué dans une ville/village avec tous les acteurs : pompiers, centre de décision, police municipale, directeur/ric

d’école … ) mais permet de mieux le préparer

20 / 42

(21)

SimFor : évaluation de compétences

 Comment évaluer que les acteurs maîtrisent bien les compétences de gestion de crise

 En d’autres termes, comment formuler les attendus pédagogiques (learning outcomes)

 Ils varient selon les compétences … chacune devra donc proposer sa propre « métrique » pour déterminer si cette compétences est validée

 Dans les exercices sur le terrain, ces compétences sont évaluées qualitativement durant un débriefing …

 Digitaliser = informatiser = automatiser (au moins partiellement) tout cela

 => implique de disposer de traces c.à.d. de données sur les actions/interactions des apprenants durant le déroulement du jeu …

 Solution :

 Identifier les types de traces (actions, décisions) et proposer pour chaque type une méthode d’évaluation

 La validation globale de l’apprentissage de l’acteur pourra être basée sur une somme pondérée, une méthode multicritères, logique floue, négociation (possibilité ou non de compensation entre compétences)

(22)

SimFor : évaluation de compétences

 Approche retenue dans SimFor

22 / 42

(23)

Scénario pédagogique…

(24)

Exemple sur un SG sur l’apprentissage des procédures d’évacuation de bâtiment

 Contexte : Digitaliser un exercice d’évacuation de bâtiment (thèse en cours de I. Daoudi co-tutelle France Tunisie)

 Environnement de développement : ISCEN https://youtu.be/9LJNtAwkWLw

 un premier prototype a été développé avec une interface 2D : le déplacement dans le bâtiment étant simulé par le une succession d’écrans correspondant aux salles à évacuer.

24 / 42

(25)

Exemple sur un SG sur l’apprentissage des procédures d’évacuation de bâtiment

 Scénario pédagogique : comme précédemment, il est fortement lié au déroulement de l’exercice réel … la dimension pédagogique consistera à définir comment virtualiser l’exercice, les variables d’ajustement du scénario et l’évaluation des traces laissées par les joueurs/apprenants.

 Public visé : étudiants et personnel d’un établissement d’enseignement supérieur (tranche d'âge 20-60 ans).

 Jeu multi-joueurs : 4 participants jouant 4 rôles différents

 Durée nominale du jeu : 15 à 20 min

 Jeu modéré / animé par un animateur / formateur

 Objectif : sensibilisation à la gestion de crise et apprentissage des procédures

d’évacuation.

(26)

Exemple sur un SG sur l’apprentissage des procédures d’évacuation de bâtiment

 Acteurs du jeux :

 PNJ : foule (individus devant évacuer le bâtiment), pompiers devant éteindre l’incendie.

 Coordinateur : joué par le modérateur du jeu (non apprenant), envoie l’alerte d’évacuation …

 Responsable de la sécurité : assiste le guide-file et les serre-file … quitte le bâatiment en dernier, décompte avec le guide-file le nombre de personne évacuée …

 Le Guide-file : Informer l’ensemble des personnes présentes dans la zone, de l’obligation d’évacuer, bureau par bureau, local par local, orienter dans le calme et sans précipitation les personnes vers les issues de secours et les voies de circulation piétonnes, interdire aux personnes de revenir sur leurs pas. Une fois au point de rassemblement, il doit faire un bilan des personnes présentes au PR.

S’il y a des personnes manquantes, il doit en informer le serre-file. Il doit aussi rendre compte au responsable de secteur de la zone évacuée et empêcher les personnes présentes de quitter le point de rassemblement jusqu'à l'ordre du responsable de l'évacuation.

 Le serre-file : c’est le dernier de la file du groupe et doit vérifier que personne n’a été oublié,

s'entendre avec le guide-file sur l'itinéraire à emprunter, faire le tour du secteur, des locaux vides en refermant les fenêtres, afin de s'assurer qu’il n’y ait personne, en étant particulièrement vigilant dans les toilettes, ou autres locaux techniques.

26 / 42

(27)

Exemple sur un SG sur l’apprentissage des procédures d’évacuation de bâtiment

 Description des comportements attendus :

 En informatique, on va utiliser des diagrammes de type BPMN (http://bpmn.io) ou des

diagrammes de séquences UML (plus simple) ( http://draw.io ) permet de décrire des

séquences de dialogue/interactions.

(28)

Autre exemple : gestion d’évacuation de bâtiment

 Déroulement du jeu (protocole expérimental)

 Remarque : la démarche ici est particulière dans le sens où il s’agit de digitaliser un exercice pré existant … donc on part d’une base, le scénario d’exercice d’évacuation… selon le type

d’apprentissage, le travail de rédaction du scénario pédagogique peut s’avérer plus complexe…

http://www.ille-et-vilaine.gouv.fr/content/download/32655/239955/file/Annexe%2017%20Proc%C3%A9dure%20d'%C3%A9vacuation_2016.02.09.pdf

28 / 42

(29)

Exemple de méthode de conception de scénario pédagogique

 Méthode CBS (Competence-based Knowledge Space Theory) :

 On décrit les compétences requises

 On les structure selon leur relation de dépendance (pré requis)

 A partir de là on peut construire les chemins pédagogiques (structure de compétences) en partant de l’objectif final

 On construit alors le jeu en suivant ces

dépendances

(30)

30 / 42

Spécificités des SG

=> quelques concepts

(31)

Flow ! Définition

 Flow : concept (psychologie) issus des travaux de Mihály Csíkszentmihályi

définissant l’état mental atteint par une personne lorsqu'elle est complètement

plongée dans une activité et qu'elle se trouve dans un état maximal de concentration, de plein engagement et de satisfaction dans son accomplissement.

Fondamentalement, le flow se caractérise par l'absorption totale d'une personne par son occupation. [Wikipedia].

 J. Nakamura et Csíkszentmihályi ont identifié six aspects entourant une expérience de flow :

 concentration intense focalisée sur le moment présent ;

 disparition de la distance entre le sujet et l'objet ;

 perte du sentiment de conscience de soi ;

 sensation de contrôle et de puissance sur l'activité ou la situation ;

 distorsion de la perception du temps ;

 l'activité est en soi source de satisfaction (ou autotélique).

(32)

Flow & jeu

Les jeux en lignes dits fremium (gratuit mais avec avantages si paiement) s’appuie sur ces concepts pour créer une sorte d’addiction en ajoutant des moments de frustration

dépassable avec paiement (d’abord très faible pour supprimer la barrière

psychologique du paiement, puis plus conséquent par la suite).

32 / 42

(33)

Flow ! Comment le mesurer ?

 Via questionnaire post – jeu : on demande au joueur son sentiment post-jeu s’il a appris des choses, s’il a apprécié le type de jeu, scénario etc…

 Via observation des attitudes du joueurs durant le jeu :

 Observateur humain

 Caméra avec analyse des émotions affichées

(34)

Flow ! Comment le mesurer ?

 Expressions universelles de Ekman (théorie catégorielle des émotions) :

comme précédemment, il est fortement lié au déroulement de l’exercice réel … la dimension pédagogique consistera à définir comment virtualiser l’exercice, les variables d’ajustement du scénario et l’évaluation des traces laissées par les joueurs/apprenants.

34 / 42

(35)

Outil de reconnaissance de l’état

émotionnel : Openface (gratuit!)

(36)

Quelle démarche ?

1. Choisir un domaine de formation (Développement durable, éducation scolaire, …) dans lequel vous pouvez extraire des objectifs pédagogiques =>

Learning Outcomes

1. La question centrale c’est : Qu’est ce qu’on apprends … et comment. Le comment c’est le jeu sérieux avec toutes les interactions qu’on peut imaginer.

2. Imaginez des mises en situations, des scénarios dans lesquels un ou plusieurs apprenant interagissent avec le jeu sérieux …

3. … chaque interaction doit produire des résultats exploitables

numériquement pour pouvoir déterminer si l’apprenant … a appris

(37)

Donc le scénario pédagogique avant tout

 Pour pouvoir évaluer l’apprentissage il faut des éléments d’évaluations qui peuvent être :

 des réponses fermées à des questions => approche QCM

 Des réponses ouvertes à des questions => Approche IA (vous ne savez pas faire mais faîtes comme si vous saviez), ou vérification que des mots clés sont présents dans le texte

 Des actions attendues : par exemple il a décroché le téléphone (check)

 Des séquences d’actions attendues (dans l’ordre) : il a dit bonjour, puis a posé sa question

 Il a eu des signes physiologiques cohérent avec la situation : une question surprenante pour ceux qui connaissent le domaine a bien produit une surprise chez l’apprenant (haussement des sourcils …)

 …

(38)

Scénario pédagogique toujours

 Tout part du domaine d’apprentissage :

Connaissances domaines

Situation

Eléments d’évaluation

Spécification IHM

Scénario Ecrit déroulant enchaînement situations,

évaluation

(39)

Exemple de formalisation de l’enchaînement des questions/scènes dans le scénario pédagogique

 On décrit le « chemin » suivi par l’apprenant

 Peut être décrit textuellement

 Avec BPMN.io

(me demander s’il faut que je fasse une démo comme avec Draw.io

Question 1

-1 au score

+1 au score Passer a Ecran 2

Question 2 Réponse A

Réponse B

Question 1Bis

-1 et compétence non validée

Neutralise -1

(40)

40 / 42

Conclusion sur les Jeux

Sérieux

(41)

Enjeux des jeux sérieux

 Identifier les compétences/connaissances dont on souhaite transposer l’apprentissage dans un jeu sérieux …

 Concevoir le scénario pédagogique qui doit prendre en compte :

 La mise en situation de ces compétences

 Le contexte de jeu

 Des éléments de progression et d’évaluation (plus retours vers l’apprenant : renforcement positif  )

 De la jouabilité, profil d’apprenant (enfant, ado, adultes)

 ….

(42)

Si c’est si bien, pourquoi n’est-ce pas plus développé ?

 Alors d’abord, c’est assez développé. Il suffit de faire une recherche sur internet sur ce mot clé (voire en anglais  ), pour voir le nombre de jeux développés …

Mais force est de constater la contrainte des coûts de développement :

 Complexité de la conception du jeu (scénario pédagogique !)

 Coût développement logiciel (salaire ingénieurs  )

 Evolutivité de l’application logicielle … et donc coûts induits (risque d’avoir des produits « gelés » puis jetés…

 => problème de financement qui se traduit par des faillites d’entreprises spécialisées dans les jeux sérieux ou reconversion vers des produits plus bankable…

De fait on va se retrouver dans les situations suivantes :

 Développement « Quick & Dirty » d’applications « jetables » à coût réduit (publicité …)

 Développement d’environnement plus lourd dans le cadre de projet recherche (ANR, Projet européens) permettant un financement pérenne sur 3-4 ans.

 Développement d’environnement de développement de jeux sérieux réduisant les coûts de développement

… mais reste fragile (contexte industriel).

42 / 42

(43)

Travail demandé

(44)

Justification de ce sujet dans votre projet d’étude

 Application de qualités rédactionnelles / scénarisation à un outil numérique :

 Incluant des contraintes spécifiques (contexte du jeu, de l’objectif pédagogique)

 Oblige à s’imprégner, s’immerger dans un domaine peut être inconnu : une démarche commune à celle d’écrire un roman… savoir parler d’un domaine

 Travail de structuration de sa pensée :

o Pour qui ? (cible)

o Pour quoi ? (objectif pédagogique)

o Comment ? (objectifs in-game , scénario pédagogique, critères d’évaluation de l’apprenant…)

44 / 42

(45)

Spécifier son propre Jeu Sérieux

 Travail demandé :

 Choisir un domaine d’apprentissage + justification

 Choisir un contexte de jeu

 Définir le scénario pédagogique correspondant

 Evaluation :

 Date rendu initialement début mai … sera sans doute décalé

 Critère évaluation : qualité de rédaction  , mission pédagogique du jeu sérieux…

 Démarche

 Recherche bibliographique : trouver des jeux sérieux correspondant aux choix retenus

 Citer les sources ! Copier 1 source c’est plagier, copier plusieurs sources c’est de la recherche 

 Utiliser outils de prototypage : on ne développe rien mais on dessine des interfaces graphiques (ex. http://Draw.io propose un module Mockup pour faire des interfaces graphiques)

(46)

Rendu : plan (indicatif) du rapport à rendre

Plan :

 Présentation, justification du domaine d’apprentissage choisi

 Présenter le type de jeu choisi , environnement (téléphone, tablette, ordinateur) o Action (FPS, jeu de plateforme), Aventure (texte), jeu de rôle, Stratégie, puzzle …

 Définir le scénario pédagogique correspondant

o Description textuelle de l’objectif pédagogique (que doit on apprendre) o Spécification interfaces graphiques / écran de jeu

◦ ATTENTION : Il s’agit de décrire son jeu graphiquement, la forme de cette description est libre : utilisation de Draw.io (cf Annexe), dessins Powerpoint, dessins « à la mains » photographiés puis insérés dans documents, capture d’écrans d’un jeu que vous avez développé …

◦ Il s’agit pour le lecteur de pouvoir imaginer à quoi ressemblera votre jeu o Scénario séquence pédagogique

o ATTENTION : Again, description du déroulement du jeu, type de questions (cf. slide Evaluation), exemple d’un scénario avec enchaînement questions et évaluation finale de l’apprenant : as-t’il/elle appris ?

o Un parallèle peut être fait avec les Story Board utilisé pour pitcher un film lorsqu’on cherche des financements (j’ai vu ça mais ne l’ai pas essayé : https://www.storyboardthat.com/fr)

o Conclusion :

◦ Ce que vous avez appris de cet exercice de création

◦ Ce que vous auriez fait différemment si vous aviez su ce que vous savez maintenant

◦ Ce qui vous aurait aidé pour aller plus loin dans le rendu

◦ Toute critique constructive (et argumentée) de ce cours

Rendu / Evaluation : Rapport écrit (10 – 20 pages , sachant qu’il y aura beaucoup de dessins)

46 / 42

(47)

Quelques références

 Rapport Académie Aix Marseille : jouer en classe est-ce bien sérieux https://www.pedagogie.ac-aix-

marseille.fr/upload/docs/application/pdf/2012-10/bilan_jeux-serieux__2011- 2012.pdf



 Gameplay, liste de SG : http://serious.gameclassification.com

(48)

48 / 42

Annexes

(49)

Utilisation de Draw.io

 Logiciel de dessin gratuit (en ligne ou hors ligne avec version Desktop)

 Lien : http://draw.io

 Contraintes techniques : un navigateur web suffit (pas de version/OS incompatible connue mais si vous en constatez dites-moi)

 Objectif : décrire les IHMs supportant votre scénario pédagogique

 Attention : bien regarder comment sauvegarder fichier & exporter image (ne

pas faire Sauvegarder sous dans votre navigateur web

(50)

Utilisation de Draw.io

Page d’accueil

Créer un nouveau dessin

1. Choisir Blank

Draw propose des schémas pré-remplis

mais vous n’en aurez pas besoin

2. Choisir Blank

Draw propose des schémas pré-remplis

mais vous n’en aurez pas besoin

(51)

Page Dessin vide

Zone des formes

Pour télécharger Propriétés de la

forme (couleur, police caractère …)

Cliquer sur

(52)

Menu Shapes : sélection d’une librairie de formes pré définies

Cocher la famille de formes que vous

voulez rendre accessible dans votre page de dessin

Zone des formes

Pour télécharger le client « hors

navigateur ».

Pas obligatoire Propriétés de la

forme (couleur, police caractère …)

Liste des formes associées à la famille

Général

(sélectionnée dans le menu)

(53)

Menu Shapes : sélection d’une librairie de formes pré définies

 Ici par exemple la famille Android

donne accès à des dessins utiles si votre jeu sérieux est un jeu sur

téléphone/tablette et que vous voulez illustrer graphiquement cela.

 Le curseur de la souris montre ici une tablette en mode paysage?

 Vous pouvez parcourir les librairies

pour voir si vous trouvez les éléments

dont vous avez besoin.

(54)

Menu Shapes :

 Une fois cochée les nouvelles formes apparaissent dans le menu des formes

 Un cliquer – déposer dans la zone de dessin fait apparaître la forme qu’on agrandir, modifier etc.

 On y retrouve des Mockup … traduction approximative des facsimilés … permettant de faire des interfaces graphiques « comme- ci »

 Par exemple

o Si des questions apparaissent durant le jeu on peut faire des zone a cocher etc..

o Si à l’issue du jeu, il y a un score ou bilan des bonnes mauvaises réponses on peut utiliser :

(55)

Exemple d’IHM

(56)

Sauvegarder ce qu’on vient de faire

Attention : ce que vous sauvegardez c’est le fichier contenant les données permettant À Draw.io de le redessiner (si vous le réouvrez dans la page d’accueil via le bouton :

Choisir Device pour le télécharger sur

votre ordinateur

Enregistrer sous place le fichier en général dans le répertoire

Téléchargement

(57)

Exporter sous forme d’image : Export As

Le plus simple : JPG (Jpeg) qui pourra être inséré ensuite dans votre rapport

Décocher grille par exemple si vous vous en êtes servi

pour aligner les formes

Même chose que précédemment…

Check zone téléchargement