cahier des charges - utc › si28 › projetsupload › p2009_si28p018 › rapport.pdf ·...

33
Trang HO Gabrielle Le BIHAN Alex DERMU Suzie QUINTEN PROJET SI28 PROJET SI28 Institut Nesing Institut Nesing Apprentissage des Hiragana – Apprentissage des Hiragana – 07/04/2009

Upload: others

Post on 06-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Trang HO

Gabrielle Le BIHAN

Alex DERMU

Suzie QUINTEN

PROJET SI28PROJET SI28

Institut NesingInstitut Nesing

–– Apprentissage des Hiragana – Apprentissage des Hiragana – –

07/04/2009

Page 2: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

TABLE DES MATIÈRESTABLE DES MATIÈRES

Synopsis...............................................................................................4Concept.......................................................................................................4Public cible...................................................................................................4Objectifs.......................................................................................................4

Étude de l'existant..................................................................................5Les plus ludiques...........................................................................................5Des sites plus classiques.................................................................................5

Notre principale source d'inspiration..........................................................7

Ressources média utilisées......................................................................9Images........................................................................................................9Son............................................................................................................10Animations..................................................................................................10Contenu pédagogique...................................................................................10

Structure et navigation..........................................................................11Structure....................................................................................................11

Partie jeu vidéo....................................................................................................11Partie dite "Centre de Connaissances".....................................................................11Bilan...................................................................................................................11

Navigation..................................................................................................11Généralités..........................................................................................................11Interface du jeu....................................................................................................12Intérêts de cette interface.....................................................................................14

Formes et degré d'interactivité...............................................................15Navigation..................................................................................................15Manipulation...............................................................................................15Introduction de données...............................................................................15

Scénarisation pédagogique.....................................................................16Importance et intégration de l'enseignement...................................................16Aperçu du contenu du centre de connaissances................................................16

La langue japonaise..............................................................................................16Culture japonaise..................................................................................................19Aller au Japon......................................................................................................19Programmes........................................................................................................19Dictionnaires........................................................................................................19Sites avec des cours de japonais............................................................................19

Mini-jeux....................................................................................................20Intégration dans le jeu..........................................................................................20Score et timer......................................................................................................20

Page 3: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Mini-jeux en rapport avec le tracé...........................................................................21Mini-jeux en rapport avec la prononciation...............................................................22Mini-jeux en rapport avec la lecture........................................................................23

Graphismes.........................................................................................24Style général et ambiance.............................................................................24Design Interface..........................................................................................24Level design................................................................................................25

Vue du dessus (carte)...........................................................................................25Vue subjective (décor)..........................................................................................26

Character design..........................................................................................27Item design................................................................................................28Cinématiques..............................................................................................28

Choix techniques..................................................................................29Interface graphique......................................................................................29Application serveur et base de données..........................................................29Hébergement..............................................................................................29

Organisation de l'équipe........................................................................30Trang Ho....................................................................................................30Gabrielle Le Bihan........................................................................................30Alex Dermu.................................................................................................30Suzie Quinten..............................................................................................31

Conclusion...........................................................................................32

Page 4: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

SYNOPSISSYNOPSIS

CCONCEPTONCEPT

De nos jours, on ne trouve sur internet que très peu de supports en français pour apprendre le japonais, encore moins de supports à caractère ludique. L'idée est de réaliser un projet ludo-éducatif, sans que le côté éducatif soit le plus fortement ressenti par l'utilisateur. L'apprentissage sera baigné dans un véritable jeu vidéo de type "aventure", mêlant un scénario teinté de fantastique à de nombreuses énigmes. La plupart d'entre elles demanderont d'améliorer les connaissances en japonais afin de réussir à les résoudre, et ainsi avancer dans l'intrigue. L'accent ne sera pas mis sur l'action, mais plutôt sur un aspect "psychologique" (améliorer ses relations avec les personnages non joueurs pour dévoiler petit à petit des bribes du scénario) et sur la réflexion.

Le côté innovant réside donc principalement dans l'idée de transmettre des compétences pratiques et connaissances réelles par le biais d'un jeu vidéo d'un style "classique". L'apprentissage du japonais sera fondamental pour réussir à terminer le jeu mais devra se faire relativement naturellement.

Le jeu en lui-même s'inspirera, dans son ambiance, son style graphique, son gameplay, son style de scénario, etc, d'un jeu sorti sur Nintendo DS : "Hotel Dusk : Room 215". Il sera accessible en ligne et il sera possible de sauvegarder sa progression pour la reprendre plus tard.

PPUBLICUBLIC CIBLECIBLE

Le projet s'adresse principalement aux lycéens (voire collégiens) et plus âgés. Cela est d'autant plus pertinent car, d'une part, ce public ne peut pas accéder aux ressources en anglais (pourtant plus abondantes que les ressources en français) pour apprendre le japonais, car il ne maîtrise pas suffisamment l'anglais. D'autre part, c'est une génération qui est très imprégnée par les jeux vidéos.

Le scénario et les interactions avec les personnages non joueurs s'adresseront cependant plutôt à des moins de 25 ans (histoires relativement "naïves"...). Le jeu sera normalement tous publics (pas de violence, de combat, etc). Les publics féminins et masculins sont visés sans distinction.

OOBJECTIFSBJECTIFS

Dans le cadre de SI28, nous nous restreindrons à l'apprentissage d'un syllabaire japonais : le hiragana. L'utilisateur devra être capable (idéalement à long terme) de lire correctement des mots japonais écrits en hiragana.

La difficulté est de réussir à intégrer l'apprentissage de sorte à ce que l'utilisateur puisse avant tout s'amuser, prendre plaisir, s'investir dans une histoire et un univers particulier, s'identifier à un personnage... L'aspect jeu a en effet pour objectif de dissiper la difficulté et la répétitivité de cet apprentissage relativement contraignant.

Page 4

Page 5: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

ÉTUDE DE L'EXISTANTÉTUDE DE L'EXISTANTComme expliqué plus haut, notre objectif est de combler un manque dans l'environnement éducatif et ludique actuel, tout en y intégrant des idées originales. Voici un aperçu de ce que l'on a découvert dans des domaines adjacents à celui que nous visons.

LLESES PLUSPLUS LUDIQUESLUDIQUES

Le site le plus ludique que nous avons trouvé est le suivant :http://www.kanamichan.com/

Le style du jeu est très enfantin (la voix du personnage nous accompagnant, à savoir une petite fille, peut devenir rapidement assez énervante, la musique instaure une ambiance joyeuse ; on peut arrêter cette dernière en cliquant sur le tambourin). Il existe trois modes : Freestyle (s'entraîner), Contest (jouer pour essayer de faire le meilleur score étant donné que celui-ci sera enregistré ; il faut s'identifier), Public (les meilleurs scores). Pour l'entraînement, on peut choisir :

soit hiragana, soit katakana, soit les deux le temps durant lequel la question reste affichée (1, 3, 5 ou 10 seconde(s) ) quatre niveaux de difficulté le sens de l'énonce (français -> japonais ou japonais -> français) l'énoncé : soit vocal, soit visuel, soit les deux

Le site propose aussi des leçons de kana (tableaux des deux syllabaires), des bonus (fonds d'écran), et d'autres parties en construction : Contact, Boutique, Forum.

Nous avons aussi découvert un Role Playing Game pour apprendre le Japonais : http://lrnj.com/

DDESES SITESSITES PLUSPLUS CLASSIQUESCLASSIQUES

Nous listons ici des applications Web beaucoup plus classiques permettant d'apprendre l'écriture japonaise.

http://jason.forest.free.fr/japonais/japonais.php : Choix entre hiragana et katakana, à partir des kana ou à partir du français, version QCM (choix du nombre de réponses entre lesquelles choisir) ; version "entrée au clavier" possible pour le sens japonais -> français.

http://www.playeradvance.org/forum/showthread.php?t=4340 : Un projet de jeu développé sur DS, très classique, mais avantage de pouvoir tracer les traits (écran tactile de la DS).

http://www.dragonmedia.us/programs/kana.php?login=JA2342segsr4545swfde_243s : Très classique aussi (temps, comptabilisation du nombre de bonnes et mauvaises réponses, entrée au clavier ou choix parmi les syllabaires, d'où la particularité de ce site : présenter à plat tous les syllabaires, version kana et version romanji).

http://www.japon-culture.com/index.php?centre=intro_kana : Une présentation des kana, avec explications, tableaux, exemples.

http://kotoba.free.fr/coursjap.html : Un site regroupant un très grand nombre de sites, majoritairement en français, proposant des cours de japonais. Il n'est pas exhaustif, étant donné qu'il cherche à regrouper les "meilleurs", et on peut facilement en trouver beaucoup d'autres via un moteur de recherche. Par exemple, autre liste digne d'intérêt :

Page 5

Page 6: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

http://www.google.com/Top/World/Fran%C3%A7ais/R%C3%A9f%C3%A9rences/Langues/Japonais/

http://www.kanjistep.com/en/online/hiraganasteps/ : Apprentissage des hiragana, katakana et kanji pas à pas (avec des gifs présentant l'ordre des traits, et des sons pour indiquer la prononciation). Site en anglais.

Page 6

Page 7: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

NOTRE PRINCIPALE SOURCE D'INSPIRATIONNOTRE PRINCIPALE SOURCE D'INSPIRATIONTout d'abord, comme il l'a été évoqué dans le synopsis, il semble fondamental de présenter le jeu qui a inspiré énormément d'aspects de la partie ludique de notre projet : Hotel Dusk. Nous ne reprendrons pas directement son contenu, mais il a été un fil directeur dans presque toute notre réflexion et nos choix, nous le présentons donc ici comme une "ressource indirecte".

Notre jeu s’inspirera notamment de son interface particulière qui se présente sous forme de deux fenêtres verticales. La fenêtre de gauche concerne le déplacement du personnage dans son monde virtuel, et celle de droite l’interactivité avec les autres personnages et les objets.

Pour plus d'informations sur le gameplay d'Hotel Dusk, il est possible de regarder cette vidéo : http://www.youtube.com/watch?v=BHhSh4vcI7k

De plus, voici quelques screenshots du jeu :

Dans un dialogue, deux écrans situent spatialement les deux interlocuteurs, les deux points de vue

Résolution d'énigme par manipulation sur l'écran de droite, pendant que l'écran de gauche re-situe l'action dans un contexte (lieu en background, personnage impliqué… nous reprendrons l'idée du lieu)

Page 7

Page 8: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Navigation tactile sur l'écran de droite, avec un petit menu d'actions en dessous ; le rond représente le personnage et la pointe, sa direction. A gauche est montrée une visualisation en trois dimensions reprenant le point de vue interne du personnage ; nous nous contenterons d'une simple image statique et stylisée par pièce/lieu dans notre projet.

Remarque : il est important de garder en mémoire que le gameplay et l'intérêt des énigmes d'Hotel Dusk se basaient beaucoup sur le côté tactile de la DS (seul l'écran à droite est tactile) ; sur ce point, notre projet est très différent, bien que l'utilisation d'une souris permettent en général une diversité d'actions similaire à part pour le dessin à main levée.

Autre remarque : par rapport au dernier screenshot, il montre le jeu pour droitier. Hotel Dusk proposait également de retourner sa DS pour permettre la navigation sur l'écran de gauche. Pourquoi ? Parce que la navigation s'effectue au stylet de façon tactile, donc la main tenant le stylet ne doit pas cacher l'écran à côté. Nous n'avons pas ce problème ; joueurs droitiers comme gauchers navigueront sur l'écran de gauche.

Page 8

Page 9: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

RESSOURCES MÉDIA UTILISÉESRESSOURCES MÉDIA UTILISÉESNotre projet étant un jeu éducatif de type aventure, il semble important que l’utilisateur soit en immersion dans le jeu et qu’il s’approprie autant que faire se peut l’enjeu de son enquête, de sa découverte du scénario. Pour cela nous utilisons des types de médias que l’on rencontre fréquemment dans les jeux vidéos.

IIMAGESMAGES

Pour la partie « navigation » dans l'interface, le type de graphisme sera toujours le même. On utilisera principalement des images style "pixel art". L’utilisateur aura une vue aérienne du monde dans lequel le personnage principal se déplacera . Le point de vue sera un peu de biais pour donner plus de relief au monde.

On retrouve souvent et depuis très longtemps ce type de "carte détaillée" vue "presque du dessus", par exemple dans le jeu Pokemon :

Screenshot de l'un des jeux Pokemon, paru sur console portable Nintendo

Ce type de graphisme s’adapte très bien à ce type de navigation. On aura donc recours à des images 2D assez simples graphiquement, le but étant de ne pas passer le principal de notre temps dans la conception de ses images. On essaiera en priorité de les rechercher, de les sélectionner et les réutiliser, voire les retoucher si besoin. C'est un style jeux vidéo "old school" qui ne s'est jamais démodé, aussi bien dans les jeux que pour la communication (affiches publicitaires, clips vidéo, sites internet, etc.) il y a donc beaucoup de ressources sur internet.

Sur la partie droite de l'interface, on voit en quelque sorte le monde observé au travers des yeux du personnage grâce à des images statiques. On est alors dans un point de vue interne, le joueur aura des images qui apparaîtront lors du jeu et qui représenteront l'ambiance générale d'une pièce, les autres personnages, indices ou vue détaillée d’un objet. On aura surtout recours à des documents graphiques retouchés grâce aux logiciels Photoshop, Illustrator. Soit à partir de croquis et de dessins (les personnages sont sous forme d'illustrations à main levée) ou de photographies

Page 9

Page 10: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

numériques. Tout comme les images de la partie navigation, on fera des traitements rapides des images avec des outils tels que les filtres, les flous, la colorisation rapide…

SSONON

Notre jeu vidéo fera appel aussi à des outils d'édition musicale tels que Audacity. On enseignera au joueur, grâce aux sons de référence, la bonne prononciation des syllabes ; on gèrera l'enregistrement de ces sons-là, en faisant si possible appel à des professeurs de japonais de l'UTC. A priori l'utilisateur n'aura pas de feedback sur l'exactitude de sa prononciation, mais il semblait important qu'il puisse au moins s'appuyer sur un bon exemple de prononciation. A part les sons pour la prononciation, on s'appuiera sur des fichiers audio existants par faute de temps (on envisage de faire appel à des musiques placées sous licence Creative Commons). S'il s'avère qu'on soit en avance au niveau du projet, on pourra alors envisager de faire nos propres compositions sonores, pour donner une personnalité plus originale à notre jeu.

AANIMATIONSNIMATIONS

Finalement, dans un premier temps, les seuls médias originaux et nous appartenant seront les éléments de character design, ainsi que leurs animations sommaires. On ne créera pas "d'animations" à proprement parler, juste des mini successions d'images 2D, pour donner un effet de mouvement saccadé, à la Hotel Dusk.

CCONTENUONTENU PÉDAGOGIQUEPÉDAGOGIQUE

Un minimum de contenu pré-existant sera récupéré (et le reste créé par nos soins), mais nous n'avons pas encore défini toutes nos sources. Nous ferons cependant attention aux contenus protégés, etc.

Une des sources probables pourrait être : http://www.kanjistep.com/en/online/hiraganasteps/ (animations qui montrent l'ordre des tracés)

Page 10

Page 11: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

STRUCTURE ET NAVIGATIONSTRUCTURE ET NAVIGATION

SSTRUCTURETRUCTURE

L'objectif final de notre projet est d'ordre pédagogique. C'est selon cet objectif que notre contenu est structuré. Pour cette raison, le projet est tout d'abord divisé en deux parties principales, dirigées chacune par un principe pédagogique particulier.

Partie jeu vidéo

Cette première partie présente un contenu pédagogique "noyé" dans un contenu vidéoludique plus vaste. Cette partie se subdivise ensuite en chapitres, comme si le scénario du jeu vidéo était un livre. Ce scénario, un peu à la façon d'un "Livre dont vous êtes le Héros", s'articule sous forme d'un graphe dont la navigation par le joueur sera abordée ci-dessous.

Un chapitre comporte plusieurs "phases". Chaque chapitre possède une phase "d'apprentissage" ; de plus, il possède une ou plusieurs phases plus libres permettant l'exploration, le dialogue avec les personnages, la résolution d'énigmes, des "révisions" facultatives portant sur les dernières phases d'apprentissage, etc. Généralement, un chapitre s'achève sur un événement marquant du scénario.

Partie dite "Centre de Connaissances"

Cette seconde partie présente un contenu pédagogique de façon plus classique, mais cela demeure assez peu "scolaire". Dans cette partie seront regroupées des liens vers des sites proposant l'apprentissage du japonais, ou des informations et outils complémentaires comme des dictionnaires, etc. De cette façon, les membres de notre équipe pourront faire partager leurs trouvailles pour permettre, entre autre, un complément de formation moins ludique et très autonome, ce qui est actuellement très à la mode comme méthode d'auto-formation (ce qui reprend un peu la théorie de l'auto-formation des "Digital natives" qu'on a pu découvrir grâce à SI28).

Bilan

Ces deux parties seront accessibles séparément, pour faciliter l'utilisation du Centre de Connaissances. Mais ce dernier sera aussi intégré au sein même du jeu, de son univers et de son "role play". Ce ne sera pas une simple annexe, sa place dans le jeu et dans le projet sera cohérente.

NNAVIGATIONAVIGATION

Généralités

Les types de navigations diffèrent selon les parties expliquées ci-dessus. Une fois à l'écran d'accueil, l'utilisateur pourra choisir entre débuter ou reprendre une partie, ce qui le fera se diriger vers la partie jeu vidéo ; ou bien de se rendre directement au Centre de Connaissances, dans ce cas il rejoindra la partie du même nom.

Dans la partie jeu vidéo, la navigation sera immersive, dans un univers en deux dimensions. Le graphe du scénario laissera de nombreuses possibilités au joueur. Aucun chemin ne sera vraiment parfait, chacun apportera des éléments nouveaux pour comprendre tous les détails du scénario

Page 11

Page 12: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

(qui se modifiera légèrement selon les choix du joueur), et très peu mèneront à une fin précoce du jeu ("Game Over"). Le but est de chercher des moyens pour que le joueur teste différentes navigations dans ce graphe, ce qui le pousserait à recommencer la partie. Outre l'idée plaisante d'avoir des joueurs attachés à notre jeu, ce serait surtout utile pour eux de le recommencer afin de parfaire leur formation. De plus, des répétitions espacées dans le temps facilitent le processus de mémorisation. D'un point de vue pédagogique, il est donc relativement important d'essayer de créer un jeu qui donne des raisons d'être recommencé sans perdre trop d'intérêt. Dans le cadre de SI28, nous ne pouvons pas nous engager sur le degré de rejouabilité que nous allons pouvoir fournir en fin de semestre.

Depuis l'écran d'accueil, ou depuis la partie jeu, l'utilisateur peut, à presque tout moment, "se rendre" au Centre de Connaissances. Comme expliqué plus haut, c'est un portail regroupant des informations, des outils, des liens utiles dans le domaine de l'apprentissage du japonais. Ce contenu sera organisé en arborescence et se présentera comme un site web assez classique, qui pourrait donc être utilisé tout à fait indépendamment de la partie "jeu". De plus, on fera beaucoup appel à la navigation hypertexte pour rediriger vers des outils extérieurs que l'on conseille à nos utilisateurs.

Interface du jeu

Nous inspirant du game design d'Hotel Dusk, qui est un jeu sorti sur Nintendo DS (une console avec deux écrans), nous avons défini une interface reprenant la même logique. A nos yeux, cette façon de répartir les informations, l'action, et l'interactivité est assez naturellement assimilée par le joueur. Elle offre même une immersion très intéressante par rapport aux jeux "classiques" possédant un seul écran, car le joueur doit plus canaliser son attention sur le jeu pour ne rien perdre de chacun des écrans. En effet, la séparation en deux écrans donne des résultats intéressants sur le degré de concentration du joueur qui doit se focaliser non pas sur un point (ce dont les joueurs ont à présent l'habitude, et donc ne fournissent plus d'effort de concentration pour le faire), mais partager, alterner sa focalisation sur deux points. Lorsque le regard du joueur doit changer d'écran, cela entraîne un regain d'attention qu'il nous appartient ensuite de mettre à profit : l'attention et la concentration sont primordiales dans le processus d'apprentissage. Même les "cinématiques" seront réparties sur deux écrans, pour jouer sur l'expression de différents points de vue ou angles de vue, ou pour donner une impression de mouvement ainsi qu'un effet plus "vivant", dynamique.

Page 12

Page 13: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Schéma de l'idée actuelle de notre interface

Dans notre jeu, nous ajoutons une barre de menu en haut de l'interface. Elle contient, outre des informations évolutives sur le personnage principal que nous devons encore définir, un bouton "menu principal" permettant de sauvegarder, charger une partie, retourner à l'écran d'accueil. Diverses informations sont accessibles via le bouton "fiche de progression". Elle sera vide en début de partie, puis se complètera au fur et à mesure de l'avancement du joueur, pour que ce dernier puisse au moins visualiser quels sont les hiragana qu'il a déjà vus dans sa partie actuelle. Le lien vers le Centre de Connaissances sera disponible au bout de quelques minutes de jeu (un personnage non joueur l'introduira d'une façon "role play", bien intégrée à l'histoire, pour que le joueur ne soit pas dérouté par ce portail), ce qui confirme qu'à partir de cet instant, on pourra y accéder à tout moment même depuis le jeu. Le bouton "prise de notes" sera abordé plus loin dans l'explication.

L'écran de gauche sera le premier utilisé par le joueur. Il permettra une interactivité de type navigation, grâce aux 4 flèches du clavier. On envisage de permettre le déplacement en diagonale, mais pour le moment, il est en tous cas certains que le joueur pourra se déplacer vers le haut, le bas, la gauche et la droite. Le personnage sera représenté par un symbole simplifié sur cet écran (un cercle de couleur) ; on ne s'occupera pas d'animations sur cet écran, à moins d'avoir plus de temps que prévu sur notre planning. Le style graphique du contenu de cet écran a déjà été abordé auparavant dans ce rapport, dans la partie « ressources ».

Une fois le personnage mené près d'un élément "intéressant" (les éléments interactifs du décor seront reconnaissables soit par une "aura" autour d'eux quand on s'en approche, soit par l'apparition d'une "info-bulle" lorsqu'on est à proximité), il suffit de presser la touche "espace" du clavier pour lancer la phase d'interactivité avec cet élément. La focalisation du joueur passe alors sur la seconde moitié de l'écran.

Page 13

Page 14: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

L'écran de droite : une fois qu'une phase d'interactivité est lancée (interactivité autre que navigation dans le monde virtuel, c'est à dire un dialogue, l'examen d'objets, une résolution d'énigme...), l'écran de navigation se "désactive" (grisé ou contraste moins prononcé) et le personnage ne peut plus être déplacé par le joueur jusqu'à ce qu'il ait achevé la phase d'interactivité en cours. C'est un principe souvent repris dans les jeux vidéo ; pour n'en citer à nouveau qu'un, on le retrouve aussi dans Pokemon. Cela permet de mieux guider le joueur, de l'empêcher d'achever une phase d'interactivité par erreur, d'enlever certaines possibilités d'exploitation de bugs... Pendant la phase d'interactivité, tout se déroule sur l'écran de droite. Dans le cas d'un dialogue, par exemple, le joueur pourra cliquer sur la réponse de son choix pour faire évoluer la situation comme bon lui semblera. Pour les "mini-jeux" d'apprentissage ludique ou de résolution d'énigmes, le clic sera aussi l'action la plus utilisée.

Arrivé à un certain point dans le jeu, le gameplay évoluera encore en entraînant une modification importante de l'interface, pour arriver à son stade final, légèrement inspiré d'Hotel Dusk mais cependant original. En effet, le joueur pourra cliquer sur le bouton "Prise de notes", ce qui déroulera une "feuille" virtuelle sur l'écran de navigation (donc celui de gauche). Ce sera particulièrement utile en phase d'interactivité, car l'écran de navigation sera de toutes façons désactivé dans son mode "carte". L'utilité de cette feuille de notes sera à la fois pédagogique (le joueur pourra se noter quelque chose concernant un "cours", ou un point qu'il souhaiterait penser à retravailler plus tard...) mais aussi ludique : dans le cas d'une énigme complexe, incluant un code chiffré par exemple, le joueur pourra prendre des notes de façon à se souvenir des éléments importants pour la résoudre.

En mode "prise de notes", le bouton de la barre de menu affichera "revenir à la carte" ; cliquer sur ce bouton permettra donc d'échanger de vue entre le mode "carte" et "feuille de notes", sur l'écran de gauche, sans déstabiliser le joueur.

Intérêts de cette interface

Cette interface évoluant au fur et à mesure du jeu sera facilement prise en main, le joueur ne sera pas surchargé d'information dès le début et apprendra graduellement à focaliser son attention "là où il faut". Une fois bien avancé dans le jeu, cette interface lui permettra d'avoir facilement accès à toutes les informations nécessaires pour jouer (et apprendre) confortablement, sans passer par de nombreux menus, ce qui est souvent un facteur de perte de temps et de clarté dans les jeux classiques (particulièrement dans les jeux de rôles, voire de stratégie...). Délimiter spatialement les différents types d'interactivité permet aussi de mieux délimiter l'ampleur des actions envisageables pour le joueur (un jeu présentant une liberté trop vaste se prête moins à l'apprentissage de quelque chose de ciblé).

Page 14

Page 15: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

FORMES ET DEGRÉ D'INTERACTIVITÉFORMES ET DEGRÉ D'INTERACTIVITÉComme tout jeu vidéo, les formes d'interactivité qui seront proposées à l'utilisateur seront la navigation et la manipulation. Si nous en avons le temps, nous permettrons aussi au joueur d'introduire des données.

NNAVIGATIONAVIGATION

La navigation se fera principalement avec le clavier. Le joueur pourra se déplacer d'un lieu à un autre à l'aide des flèches directionnelles et il pourra initier une conversation avec un personnage du jeu avec la touche espace.

L'univers du jeu ne sera pas "continu" mais divisé en plusieurs morceaux, chaque morceau représentant un lieu spécifique (exemple : une pièce d'un bâtiment = un morceau).

MMANIPULATIONANIPULATION

Dans un jeu vidéo comme le nôtre qui est de type "aventure", on ne peut naviguer sans manipuler car on manipule au moins le personnage principal que l'on incarne. Mais au-delà de faire bouger le personnage, le joueur sera amené à résoudre des énigmes et à s'exercer à travers des "mini-jeux".

IINTRODUCTIONNTRODUCTION DEDE DONNÉESDONNÉES

Bien que nous envisagions de permettre à l'utilisateur d'introduire des données, cette forme d'interactivité sera la moins travaillée dans notre projet. Nous listons tout de même ici les quelques idées que nous avons en tête, de la plus probable à la moins probable.

Proposer du contenu dans le centre de connaissances : le centre de connaissances rassemblera entre autres divers liens permettant d'approfondir ses connaissances en japonais. Si un joueur connaît un site internet qui n'y est pas listé mais qui s'avère très intéressant, il pourra le suggérer en contactant l'équipe, et donc introduire (de manière indirecte) du nouveau contenu.

Prendre des notes : le joueur possèdera (virtuellement) un carnet dans lequel il pourra prendre des notes. Le jeu demandera en effet à l'utilisateur de retenir certaines informations, mais celles-ci ne seront pas forcément facilement mémorisables. Le fait de posséder un carnet devrait encourager le joueur à être plus attentif et à avoir le réflexe de noter les informations qui lui semblent utiles mais qu'il risque d'oublier facilement.

Imaginer une scène du jeu : on peut faire en sorte qu'une scène du jeu puisse être rejouée plusieurs fois, et laisser le joueur décider de ce qu'il va se passer. Suzie et Trang, avec l'aide d'un autre étudiant qui ne fait pas partie de SI28 (Jean-Pierre Bailly) travaillent ce semestre sur un projet NF28 dont l'objectif est justement de développer un "éditeur de scénario" pour le jeu développé en SI28.

Page 15

Page 16: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

SCÉNARISATION PÉDAGOGIQUESCÉNARISATION PÉDAGOGIQUE

IIMPORTANCEMPORTANCE ETET INTÉGRATIONINTÉGRATION DEDE LL''ENSEIGNEMENTENSEIGNEMENT

Notre projet est ludo-éducatif ; nous avons donc porté une grande attention à la partie pédagogie, qui doit être bien réfléchie pour être intégrée de façon efficace dans la partie ludique (et vice-versa). Nous avons porté notre attention sur deux axes pour la pédagogie. Le premier est intégré dans la trame du jeu vidéo : ce sont les mini-jeux que le joueur devra réussir pour pouvoir avancer dans l'histoire. Le deuxième axe consiste en une approche plus classique, au travers du centre de connaissances. C'est une « zone » à laquelle le joueur aura très rapidement accès au cours du jeu ; elle contiendra des informations sur l'apprentissage du japonais et sur le Japon, ainsi que des liens utiles classés par thème.

Il nous a semblé intéressant d'opter pour ces deux axes, qui nous paraissent très complémentaires : les mini-jeux sont intégrés dans le jeu principal, diminuant ainsi la lourdeur habituelle de la répétition obligatoire de ces exercices, et la récompense sera directe et rapide, encourageant ainsi le joueur tout au long de son apprentissage. En optant pour cette approche, nous sommes conscients que le temps que le joueur consacre au jeu ne sera pas entièrement dédié à l'apprentissage, aussi en terme de rendement brut notre solution est-elle sans doute moins efficace, ainsi qu'en ce qui concerne l'approfondissement ; cependant elle nous paraît présenter l'énorme avantage de se départir du côté très contraignant (et souvent embêtant, avouons-le) de l'apprentissage systématique. Pour un programme à visée d'initiation, l'accessibilité et l'attrait sont en effet très importants pour ne pas entamer la motivation de l'étudiant. De plus, le fait de laisser au joueur l'accès à une partie plus classique, le centre de connaissances, où il pourra trouver les données qui l'intéressent mais aussi d'autres qui sont plus scolaires, nous semblait un bon compromis pour pallier ces défauts.

Cette façon d'enseigner semble présenter certains avantages particulièrement adaptés à notre génération, ainsi qu'aux plus jeunes que nous. En effet, notre façon d'acquérir des informations a bien changé grâce à (ou « à cause de » ?) la convergence numérique et internet. Le centre de connaissances reprend ces caractéristiques de navigation « libre » au sein du contenu, de granularisation de ce contenu... De plus, la façon de se concentrer chez les jeunes a beaucoup changé. Dans le cas d'une seule tâche sur laquelle se concentrer, l'individu se lasse très rapidement ; or, si l'individu s'ennuie, son attention a très peu de chance d'être récupérée. Ce qui leur convient mieux est de leur proposer plusieurs tâches simultanément, qu'ils gèrent ensuite comme bon leur semble. C'est pourquoi proposer à la fois un aspect jeu et un aspect apprentissage semble être un mélange intéressant.

L'application, avec une réalisation poussée, pourrait permettre de vérifier ces hypothèses.

AAPERÇUPERÇU DUDU CONTENUCONTENU DUDU CENTRECENTRE DEDE CONNAISSANCESCONNAISSANCES

La langue japonaise

La langue japonaise possède un système d’écriture très complexe, qui contient quatre sortes d’écriture, lesquelles peuvent toutes se trouver en même temps dans un même texte. Les textes japonais se lisent soient de gauche à droite et de haut en bas, soit de haut en bas et de droite à gauche.

Page 16

Page 17: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Les syllabaires

Ce sont les équivalents de l’"alphabet" japonais. Chaque syllabaire permet de lister toutes les syllabes existant en japonais, ils contiennent donc une cinquantaine de signes chacun. Les signes comprennent entre deux et quatre traits.

Le hiragana

C’est le syllabaire utilisé pour écrire les mots, ou plutôt la prononciation des mots d’origine japonaise. Lorsqu’ils sont écrits en petits au-dessus des caractères chinois (kanji), on les appelle des furigana. Les syllabes ayant un rôle grammatical dans la phrase s’écrivent aussi en hiragana. Les hiragana ont une forme plutôt arrondie.

Par exemple :

あい : l’amour か : particule servant à marquer une question (se met en fin de phrase)

Tableau des hiragana :

http://minako74.files.wordpress.com/2008/10/hiragana.png http://www.nihongo.dk/resource/hiragana.gif

Le katakana

C’est le syllabaire utilisé pour écrire les mots d’origine étrangère (ou plutôt la retranscription japonaise de la prononciation de mots d’origine étrangère). On peut aussi écrire un mot japonais en katakana pour le mettre en évidence : c’est l’équivalent de la mise en italique. Les katakana ont une forme plutôt anguleuse.

Par exemple : ネクタイ (cravate)

Tableau des katakana : http://www.nihongo.dk/resource/katakana.gif

Les kanjis

Ce sont les caractères utilisés pour écrire l’essentiel du vocabulaire dans un texte, ils proviennent de Chine (les japonais n’ont pas inventé l’écriture). Il y en a 1945 qui sont considérés comme courants (nécessaires pour pouvoir lire le journal). Pour chaque caractère chinois, il faut connaître :

l’ordre de tracé le nombre de traits le ou les sens la ou les prononciation(s) japonaise(s) (kun-yomi) la ou les prononciation(s) chinoise(s) (on-yomi)

Par exemple :

月 : la Lune. 4 traits. Prononciation kun-yomi : tsuki. Prononciation on-yomi : getsu.

Page 17

Page 18: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Le romaji

Ce sont les caractères romains que nous utilisons au quotidien. Ils servent en général en japonais pour les sigles. On peut aussi les utiliser pour transcrire la prononciation du japonais en alphabet romain.

Par exemple : IBM

Prononciation

Il y a beaucoup de son français qui n'existent pas en japonais, et heureusement l’inverse n’est pas si vrai !

Un "e" en romaji se prononce toujours "é"

Un "u" en romaji se prononce toujours "ou".

Quand il y a un "h" en romaji, on l'aspire, comme en anglais.

Les "s" en romaji se prononcent toujours comme s'il y a en avait deux en français : il reste le son "s" entouré de deux sons vocaliques. Quand on veut faire un son comme dans "Casimir", on utilise la version diphtonguée de la syllabe (à savoir on fait suivre la syllabe de deux petits traits. Par exemple ; se せ devient ze ぜ ). En romanji, on écrit la syllabe avec un "z".

"sh" en romaji se prononce comme dans "chat".

"ch" se proncent "tch" comme dans "atchoum".

Les japonais n'ont pas de syllabes qui commencent par "r" ou "l" de façon exacte : le son qu'ils ont est entre les deux... On écrit r en romanji.

Il y a parfois des voyelles qui sont redoublées : en hiragana, le son o est redoublé en étant suivi par la syllabe u (en romaji, on utilise "ô" ou "ou") ; pour toutes les autres syllabes on écrit une première fois la syllabe, puis la syllabe qui est la voyelle de fin de syllabe de la première syllabe. En katakana, pour redoubler, on met juste une longue barre derrière la syllabe. Par exemple : koohii コーヒー (qui veut dire : café s'écrit donc en katakana car étranger) se prononce bien en appuyant longtemps et sur le o, et sur le i (et en aspirant le h).)

Les sons "an" et "on" comme dans "chanson" n’existent pas. En romanji, "an" se prononce "a'n", et "on" "o'n". De même "in" se prononce "i'n", "en'" "é'n" et "un" "u'n".

Les sons où il y a deux consonnes à la suite, à part quand la première est "n" (et dans ce cas le "n" est toujours syllabiquement déparé de la voyelle qui le précède, voir remarque précédente), n'existent pas (pas de br, tr, gr, etc...).

Il y a une sorte de "pause" dans certains mots, lorsque l'on veut redoubler une consonne. On s'arrête un petit instant avant de prononcer la syllabe qui commence par la consonne qui est censée être doublée. En romaji, on double la consonne, en syllabaire, on place en petit la syllabe "tsu" devant la syllabe dont il faut redoubler le son consonantique.

Page 18

Page 19: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Culture japonaise

http://www.nihon-zen.ch/index.html : Un site très complet où vous pourrez trouver de nombreuses informations sur le Japon.

http://cf.geocities.com/prinjon/nihon_anecdotes.html : De petites anecdotes, souvent inattendues, sur le Japon et la culture japonaise.

Aller au Japon

http://lejaponpourpasunrond.ifrance.com/ : Un site avec tous les bons plans pour aller au Japon sans y laisser sa chemise !

http://www.espacelanguetokyo.com/fr/ : Le site d'une école franco-japonaise proposant des stages linguistiques.

Programmes

http://www.physics.ucla.edu/~grosenth/jwpce.html : LE programme qui va vous sauver la vie si vous apprenez le japonais ! Il est très complet, et il est possible d'y installer des extensions pour avoir l'interface en français ainsi qu'un dictionnaire français-japonais et japonais-français.

https://addons.mozilla.org/en-US/firefox/addon/2471 : Un add-on pour Firefox extrêmement pratique : laissez votre curseur sur un mot écrit en japonais, et la traduction apparaîtra au-dessous !

Dictionnaires

http://kanji.free.fr/index.php : Un dictionnaire de kanji très bien fourni, avec de nombreuses entrées différentes possibles.

http://dico.fj.free.fr/traduction/index.php : Un dictionnaire en ligne

http://tatoeba.fr/ : Un site collaboratif où vous pourrez trouver des phrases complètes traduites dans plusieurs langues ! N'hésitez pas à contribuer !

http://www.dictionnaire-japonais.com/ : Un dictionnaire collaboratif

http://www.quebec-japon.net/lexiqueswake/wake.cgi : un autre dictionnaire

Sites avec des cours de japonais

http://www.ici-japon.com/cours_japonais/

http://nihongo.fr/

http://perso.telecom-paristech.fr/~sasaki/menu.html

Page 19

Page 20: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

MMINIINI--JEUXJEUX

Les divers mini-jeux qui sont décrits ici permettent de donner une idée des types d'exercices que l'utilisateur sera amené à compléter tout au long du jeu.

Intégration dans le jeu

La manière dont ils seront intégrés dans le scénario n'est pas encore définie de manière définitive, mais cette intégration se fera selon deux axes principaux :

− certains mini-jeux serviront à résoudre des énigmes, à découvrir de nouveaux détails du scénarios, à avancer dans l'exploration...

− d'autres seront intégrés dans le cadre de « cours », de « révisions » et d'examens, c'est-à-dire dans la partie « scolaire » du jeu, qui se déroule dans un institut d'enseignement de langues.

Bien que le joueur devra parfois faire preuve d'un certain niveau dans les exercices de hiragana pour être autorisé à rester dans l'école (et donc poursuivre sa partie, sous peine de « Game Over »), il faut que cette seconde catégorie ne devienne pas trop rébarbative.

Il est envisageable d'intégrer des mini-jeux dans le centre de connaissances, qui seraient accessibles n'importe quand et pourraient permettre des challenges de type « high scores ».

Score et timer

Chacun des mini-jeux pourra (mais ne devra pas forcément) être combiné avec un système de score et un timer.

Le score sera mis à jour en « temps réel » afin que le joueur puisse constater sa progression au fur et à mesure qu'il répond aux questions. Chaque fois que le joueur donnera une mauvaise réponse, la bonne réponse sera évidemment indiquée pour qu'il puisse apprendre de ses erreurs. Cela sera d'ailleurs important dans certains mini-jeux car ils feront appel à l'intuition du joueur et l'apprentissage se fera donc par essai et erreur. A la fin du mini-jeu, le joueur pourra connaître son pourcentage de réussite. Si possible, nous ferons en sorte que les erreurs soit retenues tout au long du mini-jeu et que le joueur puisse voir où il a eu faux à la fin.

Le score sera cependant plus intéressant s'il intègre une dimension temporelle (soit en imposant une limite de temps pour effectuer l'exercice, soit en chronométrant le temps que met l'élève pour effectuer l'exercice). En effet, à ce moment-là il sera possible d'indiquer à l'utilisateur son niveau par rapport à un « native speaker » car une personne qui maîtrise la lecture du japonais et une personne qui commence à l'apprendre n'auront pas la même vitesse d'exécution pour obtenir un même score. Il est donc possible de faire des étalonnages afin de définir à partir de quel score, dans les limites de temps données, le joueur peut considérer qu'il arrive à la cheville d'un native speaker. Lorsque l'on sait où se situe la barre, cela motive beaucoup pour s'entraîner encore et encore pour dépasser cette limite.

Les mini-jeux avec timer demanderont généralement moins de deux minutes pour être complétés. L'introduction du score et d'un timer ne sera pas systématique. Elle sera importante surtout dans les phases de contrôle de connaissance.

Page 20

Page 21: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Mini-jeux en rapport avec le tracé

Bien que notre projet se concentre principalement sur l'apprentissage de la lecture des hiragana, il nous semble indispensable d'introduire des notions d'écriture car savoir écrire un caractère permet de le retenir plus facilement. Il faut donc savoir qu'un kana se décompose en un certain nombre de traits et que ces traits sont tracés dans un certain ordre.

Nombre de traits

Un premier mini-jeu envisageable consisterait à montrer un kana au joueur et lui demander le nombre de traits. Ce jeu ne nécessite aucune formation préalable. Le joueur pourra s'en sentir simplement en faisant appel à son l'intuition car le nombre de possibilités est assez limité et il est souvent très facile de deviner la réponse.

Ce jeu permet d'introduire en douceur les silhouettes des hiragana.

On peut éventuellement indiquer le romaji du hiragana affiché, ainsi que jouer le son correspondant au hiragana. Cependant il faudra peut-être laisser ces informations supplémentaires de côté pour les premiers essais car le joueur ne sera pas encore disposé à retenir autant d'informations.

Ordre des traits avec image

Idéalement, il faudrait laisser au joueur l'occasion de tracer lui-même les caractères. Cependant, les meilleurs outils pour ce faire restent le papier et le crayon, la souris étant loin d'avoir la précision requise. De plus, un mini-jeu qui demanderait de mettre en place un système de reconnaissance d'écriture prendrait bien trop de temps pour ce projet déjà très ambitieux.

Nous avons donc pensé à un dispositif plus simple où des points sont affichés au niveau des extrémités d'un kana. Le joueur doit cliquer sur les points en suivant l'ordre de tracé.

Cet exercice aussi pourra faire appel à l'intuition.

Ordre des traits sans image

Cet exercice est similaire au précédant à la différence que l'image du kana n'est pas affichée. Seul le romaji du kana est affiché car l'affichage des points tous seuls serait ambigu même pour des personnes lisant couramment le japonais.

On comprend que le joueur doit effectuer ici un effort plus intense pour cliquer sur les points dans le bon ordre car il peut difficilement deviner l'ordre sans avoir en serait-ce qu'une vague idée de la forme du kana.

Cet exercice demande une formation au préalable.

Page 21

Page 22: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Mini-jeux en rapport avec la prononciation

Il est très important que le joueur sache associer chaque hiragana à un son. En effet, on ne peut pas lire sans savoir prononcer.

Prononciation des hiragana

L'exercice idéal pour vérifier la prononciation serait d'afficher un caractère, de demander au joueur de le lire et d'analyser le son qu'il a produit pour lui dire si c'est correct ou non. Cependant nous ne sommes pas en mesure de mettre en place un tel dispositif.

Il n'y aura donc pas d'exercices dédiés clairement à la prononciation mais celle-ci sera jouée aussi souvent que possible au cours des mini-jeux, pour accompagner le hiragana ou le romaji.

Prononciation du romaji

Ce type d'exercice permettra au joueur de se familiariser avec le romaji.

Il faut savoir que l'apprentissage du romaji n'est pas du tout obligatoire dans l'apprentissage de la lecture du japonais (il serait même préférable de le bannir). Cependant, étant donné que nous en pouvons ni mettre en place un système de reconnaissance d'écriture, ni un système de reconnaissance vocale, nous sommes contraints de passer par le romaji pour vérifier que le joueur aura au final appris à lire le hiragana.

Nous pouvons proposer deux types d'exercices pour tester le joueur sur sa connaissance du romaji :

1) Le joueur écoute un son et clique sur le(s) romaji(s) correspondant(s). Cet exercice permettra surtout de passer en revue les points qui peuvent poser problème.

2) Le joueur écrit (au clavier) ce qu'il entend.

Dans les deux il est possible de laisser le joueur faire appel à son intuition. Le joueur n'a pas nécessairement besoin d'être formé pour avoir une chance d'aller au bout de ce type d'exercice.

Page 22

Page 23: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Mini-jeux en rapport avec la lecture

Exercice d'élimination

Ce type d'exercice est classique : du romaji est affiché, le joueur a le choix entre plusieurs hiragana et doit choisir le bon. Le même principe peut être appliqué en inversant la place du romaji et du hiragana.

L'introduction d'un système de score et d'une limite de temps sera essentielle ici car il faut faire travailler les réflexes du joueur. Celui ne progressera pas s'il doit seulement répondre correctement. Il doit s'efforcer de répondre rapidement et correctement.

Exercice de romanisation

Ce dernier type d'exercice sera l'épreuve ultime. Le joueur devra écrire le romaji du caractère, du mot, voire de la phrase affiché(e). S'il arrive à le faire, alors il peut considérer qu'il sait lire japonais.

Page 23

Page 24: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

GRAPHISMESGRAPHISMES

SSTYLETYLE GÉNÉRALGÉNÉRAL ETET AMBIANCEAMBIANCE

Bien qu'à long terme, l'aspect graphique ne soit pas primordial pour apprécier un jeu, il est fondamental pour accrocher le joueur au premier contact. Un jeu sans éléments graphiques ou visuels n'aurait aucune chance de séduire un public, à part dans le cadre d'une communauté déjà existante ou déjà acquise. Cependant, le travail sur les graphismes est également très coûteux d'un point de vue temporel, et nous ne pouvions pas nous permettre d'y faire travailler plus de deux personnes, sur les trois mois de réalisation de ce projet.

Il a donc fallu trouver des compromis efficaces. Hotel Dusk a une fois de plus été une source d'inspiration : face au graphisme bien détaillé des cartes de niveaux statiques, les développeurs proposent des personnages au style graphique complètement différent, beaucoup plus simple, avec une technique d'animation particulière. L'effet aurait pu paraître bizarre, mais il est en fait très original et a permis de donner une ambiance "rétro" au jeu qui se déroule dans les 70's. Nous avons alors cherché des styles graphiques, relativement sobres et "simples" à réaliser, permettant de retrouver une telle originalité, tout en créant un effet plutôt onirique, exotique, et à tendance japonaise (ou du moins, asiatique). Pour ce dernier point, nous avons cherché des éléments symboliques de la culture japonaise afin de s'en inspirer pour créer l'ambiance et le style généraux du jeu ; nous avons retenu, entres autres, le noir de l'encre de Chine, les couleurs rares et délavées et les formes particulières des estampes japonaises...

Dans cette partie du rapport, cinq axes de travail sont présentés : le design de l'interface, le level design, le character design, l'item design et les "cinématiques". Tout est en deux dimensions.

DDESIGNESIGN I INTERFACENTERFACE

Durant son parcours dans le jeu, l'utilisateur est constamment en présence de l'interface. Il est donc important qu'elle soit agréable et facile d'utilisation, tout en s'intégrant bien dans l'esprit du jeu ; ce travail est donc à la fois esthétique et ergonomique. Ici, nous avons essayé de faire une interface qui ne soit pas trop chargée, assez sobre, dans laquelle l'utilisateur pourra se retrouver facilement. On évite en fait de tomber dans un concept un peu trop classique où l'écran est séparé en plusieurs fenêtres par un simple jeu de cadre rectiligne. La seule zone qui sera alors clairement délimitée est celle de la navigation dans la carte. Elle est par ailleurs représentée avec des arêtes arrondies et semble flotter sur l'arrière plan, un peu comme comme si l'utilisateur était face à un écran de dispositif multimédia (GPS, Ipod...). L'interface est constituée de quelques éléments graphiques qui évoquent la culture asiatique comme le bambou ou le caractère japonais en arrière plan. La plante vient en fait rompre la forme rectangulaire de la fenêtre et équilibre son contenu. Pour éviter de gêner la lecture de la partie "Visualisation du décor / action", celle-ci sera rendue transparente.

Pour rendre l'interface la plus visuelle possible, on évite d'utiliser des caractères, par exemple pour les boutons raccourcis qui se situent dans le haut de la fenêtre, notre choix se porte plus sur des symboles en général conventionnels pour évoquer le sens : une maison pour l'accueil, un carnet de notes pour la prise de notes, un ordinateur pour le centre de connaissances, un personnage qui court pour le parcours effectué, etc. Le choix des symboles pour le centre de connaissance n'est pas définitif, il dépendrait de la forme sous laquelle on souhaite le présenter. En cliquant sur l'un de ces raccourcis, une fenêtre viendra se dérouler depuis le haut de l'écran pour apparaitre, il sera alors difficile pour l'utilisateur de se perdre dans l'interface du jeu vidéo où presque tout sera accessible depuis un seul écran.

Page 24

Page 25: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Les couleurs sont pastels pour éviter que l'interface soit trop prenante par rapport aux zones d'interactions. Pour le moment, nous n'envisageons pas d'animer des éléments de l'interface.

Aperçu de l'interface du jeu

Sur cette interface, la zone noire sur la gauche est appelée zone de "Navigation / Prise de notes", et celle sur la droite de couleur bleutée est la zone de "Visualisation du décor / Actions".

LLEVELEVEL DESIGNDESIGN

Afin de faciliter l'immersion dans notre univers virtuel, nous avons opté pour le système original, introduit par Hotel Dusk et son prédécesseur Another Code, qui est de présenter deux points de vue différents du même lieu. Sur l'écran de gauche est présenté un point de vue du dessus, qui est une sorte de carte détaillée et navigable. Cette carte ne comporte pas d'élément animé faute de temps de réalisation, cela pourrait être ajouté à l'avenir. Sur l'écran de droite, c'est un point de vue plus subjectif qui est proposé, afin de visualiser le décor à hauteur d'homme. Cet élément graphique ne sera pas non plus animé.

Vue du dessus (carte)

Pour la réalisation des cartes de navigation, qui se trouvent sur l'écran de gauche "Navigation / Prise de notes", nous avons choisi d'économiser du temps en utilisant des éléments graphiques pré-existants. Nous utilisons les graphismes de RPG tels que les jeux vidéos Pokemon sur les consoles portables. On peut définir deux types de cartes : les cartes extérieures où le champ de vision est très large, et les cartes correspondant aux intérieurs. Le graphisme est alors très simple et peu détaillé mais il est très agréable pour la jouabilité car les déplacements sont très simples, et les formes sont très visuelles (couleurs vives, contour simple). En général, les cartes ne sont pas trop vastes pour éviter au joueur de trop se déplacer On utilise le logiciel Advance Map pour la réalisation des cartes. Pour l'autre type de carte, le graphisme est plus détaillé et plus réaliste, car

Page 25

Page 26: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

le joueur doit pouvoir distinguer clairement les objets, par exemple une boîte posée sur un meuble...

Vue subjective (décor)

Pour rappel, c'est ce que l'on voit sur l'écran de droite (Visualisation du décor) lorsque le joueur est en phase de navigation, c'est-à-dire qu'il n'interagit pas avec un objet précis de l'univers. Comme précédemment, il n'est pas envisageable dans nos délais de ne travailler que sur des éléments créées de A à Z par notre équipe, c'est pourquoi nous avons décidé de réutiliser des photographies.

Ces photographies sont retouchées avec Photoshop pour donner un effet de croquis à l'encre de Chine. On applique le filtre artistique "contour encré" sur des photographies en noir et blanc pour obtenir de bons résultats. Sur des photographies a faible résolution l'effet est encore plus marqué et on obtient en général des illustrations qui ressemblent beaucoup a des dessins ou des estampes. Pour raviver les photos qui sont en noir et blanc,on applique quelques couleurs (5 au maximum) avec de simple aplats sur les différentes zones de la photo. Cela donne un effet délavé au dessin, un peu comme la bande dessinée Corto Maltese...

Exemple de photo de décor retouchée

Ce sont surtout ces photos qui donneront un style graphique à notre univers, ce sont donc des éléments fondamentaux pour obtenir un bon résultat final.

Page 26

Page 27: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

CCHARACTERHARACTER DESIGNDESIGN

Dans un jeu où il existe des personnages, leurs images deviennent rapidement les symboles les plus caractéristiques de ce jeu. En effet, le public identifie et reconnaît très souvent un jeu vidéo par ses personnages. C'est pourquoi il a été décidé de créer intégralement nos personnages, de leur caractère à leur image, en passant par leur histoire... Cet aspect est si important que chronologiquement, c'est la première tâche qui a été débutée, en octobre 2008, après quelques semaines de conception/réflexion générales sur le jeu et son gameplay.Sur l'écran de navigation, les personnages sont représentés par des figures géométriques simples, comme des cercles de couleur (il est envisagé d'attribuer une couleur symbolique par personnage). Si le joueur décide d'interagir avec un personnage, son image apparaît sur l'écran de droite, par-dessus l'image de décor qui est fondue vers du blanc pour perdre en intensité, et la partie basse de cet écran affiche le dialogue avec ce personnage.

Les dessins des personnages sont réalisés au stylo à bille noir, afin d'avoir une base qui s'accorde déjà avec l'idée d'une couleur noire dominante de type "encre de Chine".

Exemple d'artwork scanné sans retouches

Chacun des quatre personnages non joueurs principaux possède un dessin grand format de ce genre.

Il ne sont pas réutilisés tels quels dans le jeu (leur seule utilisation directe pourrait être d'intégrer la catégorie "artworks" si nous faisions un site web à propos de ce jeu) ; après nettoyage et colorisation sous Photoshop (souvent avec tablette graphique), ces portraits serviront "in game" pour la première rencontre avec chacun de ces personnages, afin de faire une première bonne impression au joueur. La colorisation reprend le style de base : elle se veut discrète, comme une aquarelle délavée, avec peu de teintes différentes. La teinte noire est la seule qui puisse être intense.

Page 27

Page 28: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

Exemple d'artwork colorisé pour présentation de personnage

Pour rendre les personnages plus vivants et plus "humains", des dessins supplémentaires, plus petits mais toujours au stylo à bille, ont été réalisés. Chacun représente une émotion particulière (avec pour émotions de base : joie, tristesse, surprise ; l'une d'entre elles étant déjà représentée dans le premier dessin grand format, laissé en noir et blanc cette fois-ci). Ces dessins sont réalisés relativement rapidement, et demandent très peu de travail après numérisation : un simple nettoyage et une accentuation des contours noirs. Le passage, au moment opportun d'un dialogue, à un dessin représentant une émotion particulière, donnera une base "d'animation" au personnage.

Exemple d'artwork pour représenter des émotions

Nous inspirant une fois encore de Hotel Dusk, l'animation sera complétée, si nous en avons le temps, par des mouvements (tremblements) au niveau des effets d'ombres/lumière sur les dessins. C'est-à-dire qu'avec un seul dessin de base, on peut obtenir un effet de "mobilité" avec des retouches et traitements assez simples et rapides. C'est un compromis efficace. Pour mieux visualiser cette technique, voir des vidéos de conversations dans le jeu Hotel Dusk.

Page 28

Page 29: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

IITEMTEM DESIGNDESIGN

Pour une utilisation similaire à celle des dessins des personnages, certains objets clé seront dessinés (ou bien des photos seront retouchées pour gagner du temps pour certains d'entre eux). Les dessins seront également réalisés au stylo à bille. Selon le temps disponible au final, certains seront peut-être colorisés, ou "animés" par la même technique. Ce n'est cependant pas fondamental.

Les objets prioritaires sont ceux nécessaires à la résolution d'énigmes ou de mini-jeux. Les autres pourront être simplement mentionnés textuellement, dans les dialogues ou dans les "pensées" retranscrites du personnage principal.

CCINÉMATIQUESINÉMATIQUES

"Cinématiques" est un bien grand mot pour désigner nos quelques séquences où le joueur "n'a plus la main". Les "cinématiques" seront sans doute des animations Flash sobres, contenant du texte et des images avec des effets simples : translations, apparition/disparition petit à petit... Ces images seront pour la plupart des dessins dans le même style que tous les autres cités précédemment.

Dans le prototype que nous allons proposer, il n'y aura normalement qu'une seule "cinématique" d'introduction.

Page 29

Page 30: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

CHOIX TECHNIQUESCHOIX TECHNIQUESIl faut savoir que le jeu que nous envisageons de réaliser est un projet à long terme, qui s'étendra très certainement sur plusieurs années si les résultats obtenus à la suite du projet SI28 sont concluants. Cependant, puisque nous en sommes encore au stade expérimental, les choix techniques pour lesquels nous optons ci ne se préoccuperont que très peu du long terme et se contenteront permettre que de mettre en place rapidement un prototype qui puisse être facilement testé par notre public cible.

IINTERFACENTERFACE GRAPHIQUEGRAPHIQUE

Pour que le jeu soit le plus facile d'accès possible, il faut pouvoir y jouer à partir d'un navigateur Internet. A partir de là, nous avons principalement deux technologies disponibles : Java ou Flash. Notre choix s'est porté sur Flash, et nous utiliserons plus précisément le framework Flex pour le développement de l'interface graphique de notre jeu. Étant étudiants, nous avons l'avantage de pouvoir utiliser gratuitement l'environnement de développement Flex Builder. Mis à part le fait que Flash est très largement utilisé pour le développement de jeux en ligne, la raison de ce choix est que Trang, qui s'occupera en grande partie de la programmation, possède déjà une bonne expérience en Flex (contrairement à Java). Cela nous garantit donc d'avoir une application opérationnelle d'ici la fin du semestre.

AAPPLICATIONPPLICATION SERVEURSERVEUR ETET BASEBASE DEDE DONNÉESDONNÉES

Les joueurs ne pourront pas finir le jeu en une seule traite et doivent pouvoir sauvegarder leur progression. Cela implique de mettre en place un système d'authentification et de gestion des utilisateurs. Nous utiliserons PHP pour l'application serveur et MySQL pour la base données. Le couple PHP/MySQL est très largement utilisé dans le développement d'applications Web et nos deux GI, Suzie et Trang, connaissent ces technologies. Cependant, nous ne sommes pas certains d'avoir le temps de mettre en place cette fonctionnalité au cours de ce semestre.

HHÉBERGEMENTÉBERGEMENT

Compte tenus de nos besoins techniques, le projet ne sera pas hébergé par l'UTC. Nous connaissons des personnes qui peuvent nous fournir un hébergement gratuit pour le début. Par la suite, si le projet venait à grandir et prendre plus de ressources, nous financerons notre propre serveur.

Lorsque nous aurons choisi un nom définitif pour ce projet, nous réserverons aussi un nom de domaine afin qu'il y ait une adresse officielle pour accéder au jeu.

Page 30

Page 31: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

ORGANISATION DE L'ÉQUIPEORGANISATION DE L'ÉQUIPEUne grande partie du travail de préparation du projet a été réalisé avant le début du semestre par Trang et Suzie. Lors du premier TD de SI28, Gabrielle et Alex se sont montrés motivés par les idées déjà construites et ont spontanément rejoint l'équipe ; leur place y est à présent bien définie et ils sont parvenus à élargir les ambitions du projet, en y intégrant des idées originales et en faisant part de leurs avis et de leurs expériences personnelles.

TTRANGRANG H HOO

Passionnée de langues et amatrice de jeux vidéo, Trang, avec Suzie qui partage ces mêmes goûts, ont développé l'idée initiale du concept du projet en automne 2008. Trang est donc initiatrice de nombreuses idées fondamentales dans tous les domaines du projet, du game design à la pédagogie, en passant par la découverte de nombre de nos sources d'inspiration, le choix des publics cibles...

A présent que nous sommes en phase de réalisation, Trang fait profiter l'équipe de son expertise technique, particulièrement en Flex qu'elle a eu l'occasion de bien expérimenter au cours de son stage TN09 ; elle est notre responsable technique et s'occupe de la formation d'Alex en particulier, et c'est à elle que reviennent les choix des technologies à utiliser. Son apprentissage du japonais, qui a commencé au lycée et s'est prolongé à l'UTC pour aller jusqu'à une UV de suivi linguistique, lui permet d'assister Gabrielle dans les choix pédagogiques.

GGABRIELLEABRIELLE L LEE B BIHANIHAN

Grâce à ses études antérieures à l'UTC, Gabrielle est notre experte en japonais. C'est à elle que revient donc la responsabilité de la gestion de la pédagogie de notre projet, tant au niveau de la forme que du contenu ; sa formation actuelle à l'UTC, comprenant des sciences cognitives, du design d'interaction et de l'ergonomie, est d'ailleurs précieuse dans ce domaine. Elle s'occupe en particulier du Centre de Connaissances dont l'objectif est de mettre en place des outils pédagogiques assez classiques, ainsi qu'un réseau d'informations et d'outils situés sur internet ; les mini-jeux d'apprentissage des hiragana, plus originaux et ludiques, sont aussi soumis à son approbation. En phase de pré-réalisation, Gabrielle a géré la majeure partie de la veille et de l'étude de la "concurrence" dans notre domaine, sur internet. Gabrielle sera aussi responsable de certains morceaux de la bande sonore : ceux concernant la lecture des hiragana pour l'apprentissage de leur prononciation.

AALEXLEX D DERMUERMU

Alex participe à la partie jeu vidéo du projet. Formé avec Trang au Flex, il assiste dans la réalisation technique.

Le rôle d'Alex s'étend aussi à la réalisation de l'ambiance du jeu.

- Ceci passe par de la réalisation graphique, ce qui est habituellement le domaine le plus coûteux (du moins en temps) dans le développement d'un jeu vidéo. Plus particulièrement, Alex est responsable du design de l'interface ; cependant, vu l'importance de cet aspect, le reste de l'équipe y réfléchit également. Il s'occupe aussi du "level design", autrement dit le design des lieux : à la fois les "cartes", vues plus ou moins du dessus et dans lesquelles le joueur navigue pour jouer, ainsi que les images représentant le décor de ces lieux, comme une vue relativement statique à la première personne. Avec Suzie, il participera sans doute à la création et/ou la

Page 31

Page 32: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

retouche des images des objets les plus importants pour le scénario et les énigmes, voire peut-être de certains personnages.

- L'ambiance sonore n'est pas en reste, mais sauf avance sur le planning prévisionnel, Alex ne s'occupera que de rechercher et sélectionner les bruits et les musiques ; il ne sera normalement pas amené à en créer ou en modifier lui-même.

SSUZIEUZIE Q QUINTENUINTEN

Comme expliqué plus haut, Suzie a réalisé avec Trang la réflexion menant aux concepts fondamentaux du projet.

Particulièrement passionnée par l'industrie vidéoludique, Suzie s'occupe surtout de la partie jeu vidéo ; ses connaissances de base en japonais (trois UV à l'UTC) lui permettent cependant de ne pas perdre de vue la bonne intégration de cette partie jeu avec le fond pédagogique. Habituée aux jeux de la gamme Nintendo, Suzie a pu analyser la "mode" actuelle des jeux vidéo dont le but est d'apprendre, qui sont très courants chez la marque japonaise, afin de s'en inspirer pour construire un gameplay à la fois original et approprié à nos objectifs. Elle est responsable du game design dans son ensemble ; une partie est déléguée, accompagnée d'idées et de conseils généraux, à Alex, et Suzie réalise personnellement le scénario, les dialogues, le character design...

Page 32

Page 33: Cahier des charges - UTC › si28 › ProjetsUpload › P2009_si28p018 › rapport.pdf · 2009-06-09 · images avec des outils tels que les filtres, les flous, la colorisation rapide…

CONCLUSIONCONCLUSIONLa création d'un jeu en elle-même est déjà loin d'être facile. Tenter d'y inclure une dimension pédagogique, qui se veut utile tout en ayant une visibilité minimale, ne simplifie pas les choses. C'était pourtant notre challenge, et ces derniers mois nous auront au moins permis de réfléchir sur la question, de commencer à concrétiser certaines idées, et surtout de préparer le terrain pour la suite... Car comme nous l'avons précisé précédemment, ce projet est un projet à long terme. Il n'était pas envisageable de le "finir" (s'il peut un jour être "fini") ce semestre. Notre but était d'aller le plus loin possible et nous sommes déjà parvenus à un résultat très satisfaisant pour le peu de temps qui nous était imparti.

Tout d'abord, pour ce qui concerne la conception, nous avons pu formaliser de nombreuses idées, non seulement dans ce rapport, mais aussi à travers nos échanges par emails. Même si toutes ces idées n'ont pas été exploitées, il est très important d'en garder une trace pour la continuation du projet.

Pour ce qui concerne la réalisation, nous avons une solide base de character design. Un artwork a été réalisé pour les principaux personnages non joueurs. Malheureusement il n'a pas été possible de réaliser des animations pour chacun de ces personnages, ni d'intégrer des images les présentant avec différentes émotions. Nous nous contentons d'utiliser les artworks pour les dialogues dans le jeu.

Concernant le game desgin, nous avons réalisé les cartes nécessaires pour les lieux (environ 5) dans lesquels le joueur pourra se promener dans le début du jeu. Nous aurons aussi les images d'ambiance associées à ces lieux. Nous aurons de plus une cinématique d'introduction pour le jeu. Nous n'aurons cependant le temps de réaliser les images nécessaire que pour une seule énigme du jeu (en l'occurrence, la première).

D'un côté un peu plus technique, nous avons un moteur de jeu qui permet, dans les grandes lignes, de gérer le déplacement du personnage principal dans l'univers du jeu, les interactions avec les personnages secondaires, la possibilité d'avoir un scénario non linéaire, et la possibilité de jouer à des mini-jeux. A ce sujet, nous avons produit le code nécessaire pour effectuer au moins trois des mini-jeux décris précédemment. Nous avons aussi enregistré Mme Kuriki, professeur de japonais à l'UTC, pour les prononciations de chaque syllabe.

En parallèle à ce moteur de jeu, nous avons aussi un éditeur de scénario qui permet de produire le code correspondant à une scène du jeu. Cela nous permet d'élaborer un scénario complexe avec un outil plus efficace que le bloc note. Cet éditeur a été développé dans le cadre de l'UV NF28, mais n'ayant pas été opérationnel assez tôt, nous n'avons pas pu approfondir le scénario de notre jeu. Le joueur n'abordera donc l'histoire du jeu que de manière assez superficielle ; seule une très petite partie du scénario préparé a pu être réellement implémentée.

Enfin, même si à ce stade du projet, cela peut sembler n'être que des détails, nous avons tout de même fait un effort pour rendre le jeu plus agréable en soignant le design de l'interface et en ajoutant des effets de transition, ainsi qu'en réfléchissant à la facilité et à l'intuitivité de sa prise en main. Un aspect important manque cependant au confort de jeu actuellement : l'existence de thèmes musicaux discrets et agréables, pour continuer de construire la personnalité et le charme de notre jeu.

Au final, nous ressortons de ce projet avec une vision plus claire de ce qu'implique la création d'un jeu vidéo. Le résultat atteint en SI28 est, à nos yeux, une preuve de concept réussie et encourageante, qui nous motive d'autant plus à poursuivre ce projet. Nous avons hâte de voir jusqu'où nous pourrons aller à l'avenir !

Page 33