Technologie web – WebGL

Technologie web – WebGL

Serious Game

Avant tout, il faut noter que le serious game ou jeu sérieux en français, est adapté à tous types de support, bien qu’aujourd’hui, il ait une notion presque exclusivement vidéoludique (Djaouti, 2012). Les jeux vidéo ne sont plus seulement destinés au pur divertissement du grand public. Aujourd’hui, nous voyons une multitude d’acteurs qui ciblent divers domaines. Ceux-ci vont garder l’aspect ludique du jeu vidéo et y ajouter une couche « sérieuse », essentiellement à des fins pédagogiques. Selon les concepteurs de jeu Chen & Michael, un serious game est « tout jeu dont la finalité première est autre que le simple divertissement » (Djaouti, 2012).
Le terme de serious game est assez méconnu. Lorsque nous avons parlé à nos proches de notre projet, ils nous ont tous demandé la signification de ce terme. Il y a une certaine confusion entre le terme serious, de l’anglais sérieux et game pour jeux (de Roquefeuil, 2017). Certaines personnes ont du mal à concevoir un jeu vidéo avec d’autre but que celui du pur divertissement.
Il ne faut pas confondre serious game et serious gaming. Ces deux termes ont un sens très différent l’un de l’autre. Le serious gaming consiste à détourner un jeu vidéo classique, dédié au divertissement, vers une utilisation pédagogique. Par exemple, le jeu Sim City , un simulateur de construction de villes, peut être utilisé comme support par les professeurs pour leur cours de géographie et urbanisme (Djaouti, 2012). Un jeu sérieux est nommé comme tel, si lors de sa conception, il a un autre but que de divertir l’utilisateur.

Type de serious game

Il existe divers genres de serious game. Chaque type a un objectif particulier. Julian Alvarez et Olivier Rampnoux proposent cinq classifications selon le but du produit : Advergaming, edutainment, edumarket game, jeux engagés et jeux d’entrainement et simulation (« Jeux sérieux, mondes virtuels – Typologie », 2018).
• Advergaming
Ce type de jeu a comme intention de promouvoir l’image d’une marque. Il a été particulièrement développé depuis l’émergence d’Internet et des smartphones qui permettent d’atteindre plus facilement le public cible.
Ce type de jeu existait également avant la démocratisation d’Internet. Certaines marques ont développé ou adapté des jeux sur des consoles de salon. En 1983, Coca-Cola a ainsi produit un jeu afin de dénigrer la concurrence Pepsi : Pepsi Invader. Il a repris le principe du jeu Space Invader (jeu consistant à tirer sur des aliens depuis un vaisseau spatial), mais a remplacé les aliens par des lettres formant le mot « Pepsi ». (Isatis, 2016)
• Edutainment
Ce genre a une visée éducative. Nous pouvons la retrouver sous diverses formes : Internet, console de salon, smartphone, etc. Cette catégorie de jeu s’est particulièrement bien développée sur la console portable de Nintendo : la Nintendo DS. Nous retrouvons beaucoup d’exemple, comme Brain Age, consistant à résoudre des exercices afin de stimuler son cerveau (« Brain Age», s. d.).
• Edumarket game
Ces jeux sont dédiés à la stratégie de communication. Le mot anglais “Edumarket game” signifie : «edu pour « education », de market « marché  » et de game, « jeu » et pourrait se traduire par “jeu dont l’intention est d’éduquer sur un type de marché” » (« Jeux sérieux, mondes virtuels – Typologie », 2018). Ce genre est particulièrement destiné aux entreprises afin de familiariser leurs collaborateurs à un nouvel outil ou à l’apprentissage de nouvelles techniques de vente.
La marque de voiture Renault a chargé sa filière Renault Academy de mettre en place un serious game afin de former 15’000 commerciaux et parfaire leur technique de vente (2014).
• Jeux engagés
Ces jeux sérieux vont utiliser le jeu vidéo comme support afin de dénoncer des problèmes politiques, sociaux, environnementaux, etc., soutenir une cause ou signaler des abus (« Jeux Engagés », s. d.). Par exemple, Ice Flow a été développé afin d’attirer l’attention du public sur le changement climatique. Le joueur doit garder en vie trois manchots alors que leur banquise fond. Nous pouvons également mentionner un exemple de jeu engagé dans le but de sensibiliser à une cause humanitaire. Le Haut-Commissariat des Nations unies pour les réfugiés en Malaisie a sorti un jeu sérieux : Finding Home. Il met en lumière la cause des réfugiés Rohingyas (minorité musulmane persécutée et apatride de Birmanie) et des réfugiés de manière globale.
Dans ce jeu, nous nous retrouvons dans la peau d’un jeune réfugié Rohingays âgé de 16 ans, Kathijah. Grâce à un smartphone, nous devons trouver un refuge.(Mérancourt, 2017)
• Jeux d’entrainement et simulation
Ce dernier type de jeu permet d’apprendre et de s’entrainer à l’exécution d’une nouvelle tâche. Le joueur va reproduire des mouvements, ou des actes s’inspirant du monde réel à l’instar de CiNACity.(« Jeux sérieux, mondes virtuels – Typologie », 2018)
CiNACity est un jeu de formation aux premiers secours conçu par des experts du monde de la santé. L’utilisateur va devoir adopter différents comportements en cas d’accidents et apprendre les gestes de premiers secours. Le jeu va simuler diverses situations où l’utilisateur sera amené, de manière virtuelle, à effectuer des massages cardiaques ou à réagir à un cas d’hémorragie («CiNACity », s. d.).

Technologie web – WebGL

Notre application va être développée pour le format web, basé sur du WebGL (Bibliothèque  de Graphismes Web). Le WebGL est une API, parente du OpenGL ES 2.0, qui permet de communiquer directement avec les cartes graphiques (« WebGL », 2018) via l’utilisation de  la balise canvas d’HTML5. Grâce à la combinaison du WebGL et l’HTML5, les navigateurs  Internet peuvent accéder aux ressources graphiques de l’appareil et générer du rendu 3D  par l’intermédiaire du WebGL. (Beaucage, 26.02) Cet outil permet d’ajouter de l’animation à  une page internet, de développer un site, un film interactif, comme 3 Dreams of Black de  Chris Milk (Beaucage, 26.02) et de créer des jeux vidéo.
WebGL est open source et multiplateforme. Il a pour seule contrainte, de disposer de  l’utilisation d’un navigateur internet supportant le WebGL, ainsi que d’un appareil  compatible OpenGL. Nous pouvons résumer le WebGL en du code écrit en JavaScript,  exécuté dans une balise canvas d’une page HTML5. Le WebGL est un langage très verbeux et complexe. C’est pourquoi une multitude de
frameworks se sont développés afin de faciliter la conception. Pour notre serious game,  nous avons analysé deux axes afin de choisir l’outil de développement le plus pertinent :
1. Un développement pur JavaScript.
2. L’utilisation d’un moteur de jeu qui va transpiler (traduire) en JavaScript.
Nous avons également dû faire un choix : développer le jeu en 2D ou en 3D. Nous avons opté pour une solution trois dimensions qui permet une plus grande dynamique de jeu lorsque  celui-ci est joué à plusieurs comme notre serious game.

Technologie choisie

Après l’analyse des divers outils de développement, nous avons dû effectuer un choix. Les  éléments qui ont été déterminants sont :
• La mise à disposition d’une interface graphique permettant une conception facilitée  des graphismes.
• Un store : la modélisation 3D n’étant pas notre domaine, un magasin permettant  l’intégration de différents éléments graphiques est déterminant, si possible gratuit.
• Une bonne documentation, des tutoriels, ainsi qu’une grande communauté.
• La légèreté du produit compilé.
• La connaissance du langage de programmation.
Les deux frameworks Babylon.js et Three.js, ne disposant pas d’une interface graphique  directe, ont été écartés de notre choix. Il nous reste donc Playcanvas, Unreal Engine et Unity.
Ils disposent tous trois d’une interface de production et d’un magasin. Certains sites internet proposent l’achat d’éléments graphiques comme turbosquid.com ou gamedevmarket.net  qui peuvent être compatibles avec ces logiciels. Lors du développement d’un jeu sérieux, il peut être utile et nécessaire d’acheter des éléments graphiques afin d’accélérer la production ou si nous n’avons pas les ressources nécessaires : animateur et modeleur 3D.
Mais nous avons jugé que l’achat d’éléments graphiques n’était pas adéquat pour la conception d’un prototype.
Le store de Playcanvas est relativement pauvre, moins d’une cinquantaine d’objets. Mais il renvoie vers d’autres sites de vente. Unreal Engine dispose de son propre magasin bien fourni. Nous trouvons des éléments de décors, des personnages, ainsi que des paquets de démarrage. Mais la plupart des éléments sont payants. Unity, quant à lui, possède un storetrès riche où nous trouvons aussi bien des éléments graphiques que des outils/plug-ins pour implémenter rapidement un mode multijoueur ou la traduction du jeu. Une large gamme de ces éléments est intégrable gratuitement.
Les trois outils disposent d’une très bonne documentation et de leurs références API. Ils proposent tous de très bons tutoriels afin d’avoir une bonne prise en main de leur outil. Bien que l’anglais écrit ne nous pose pas de problème, Unity possède, en plus, une très grande communauté francophone (Herrenschneider, 2016).

Conception de notre serious game

Comme nous l’avons vu, un jeu vidéo et un jeu sérieux ne se distinguent que par leur finalité, ludisme pur pour l’un et apprentissage, pour l’autre. Leur conception se révèle donc relativement similaire. La création s’effectue par la collaboration de plusieurs corps de métier. Nous retrouvons les métiers artistiques ainsi que ceux de la création, de la technique, de la postproduction et de la communication (« Les métiers du jeu vidéo », s. d.).
Dans les métiers artistiques, nous trouvons le directeur artistique, chargé de l’harmonie du jeu : «s’assurer que toutes les idées émises et appliquées s’assemblent de façon harmonieuse et réalisable. » (« Le Directeur Artistique – Dossier », 2012). Les graphistes s’occupent de l’aspect visuel défini par le directeur artistique (« Graphiste – Dossier », s. d.).
Les animateurs sont chargés de donner vie à différentes animations pour la création des graphistes (« Animateur – Dossier », 2012). Enfin, les scénaristes imaginent l’histoire du jeu.
Dans le cas de notre serious game, aux scénaristes, nous pouvons ajouter les experts dans les différents domaines abordés : géologues, hydrologues, glaciologues et politiciens, ainsi que des personnes issues des milieux pédagogiques afin de parfaire la sensibilisation.
Les métiers de la création comportent le directeur créatif, chargé de coordonner le travail entre les équipes, d’établir une charte graphique afin de définir l’univers du jeu vidéo (« Anthony Lejeune, directeur artistique dans les jeux vidéo », s. d.). Nous trouvons également les game designers, chargés d’élaborer la mécanique de jeu, les règles et le gameplay (la manière de jouer)(« Game designer », 2017).
Ensuite, nous avons les métiers techniques. C’est à ce niveau que nous nous trouvons, avec les programmeurs (intégrer les différents objets graphiques, sonores, jouabilité, etc.) et les testeurs (tester le travail des programmeurs et faire remonter les bugs). Nous avons également le producer qui est chargé de faire respecter le délai de la mise en production etde s’assurer que le jeu remporte un succès (« En quoi consiste le métier de producer de jeux vidéo ? », s. d.).
La postproduction est chargée des doublages des différents personnages, de la traduction du jeu ou encore de la musique. Les métiers de la communication s’occupent, quant à eux, de la promotion, de la diffusion et de la vente du jeu.
Comme nous le voyons, il existe une multitude de métiers gravitant autour de la création d’un serious game. Selon la taille du projet, nous avons des personnes spécialisées dans chaque domaine. Il est bien entendu probable qu’une personne ait plusieurs tâches qui lui soient attribuées. Dans notre cas, nous avons dû endosser plusieurs casquettes afin de concevoir notre serious game. N’ayant pas de base graphique, ni artistique et ne connaissant aucunement l’animation des personnages, nous avons été contraints d’utiliser des assets disponibles sur le store d’Unity.

Table des matières

1. Introduction
1.1. Contexte
1.2. Objectif
2. Serious Game
2.1. Définition
2.2. Type de serious game
2.3. Utilité
2.4. Conclusion type de serious game
3. Analyse des besoins
3.1. Besoin client
3.2. État de l’art
3.2.1. Datak
3.2.2. Wasteblasterz
3.2.3. Compost Challenge
3.2.4. Les Maitres de l’Eau
3.2.5. AquaCity Game
3.3. Plateforme de développement
4. Technologie web – WebGL
4.1. JavaScript
4.2. Moteur de jeu transpilé
4.3. Technologie choisie
5. Conception de notre serious game
5.1. Scénario et mode de jeu
5.1.1. Scénario
5.1.2. Mockup
5.1.3. Quiz
5.2. Graphisme
5.3. Architecture Unity
5.3.1. Architecture des dossiers
5.3.2. Asset store
5.3.3. Audio
5.3.4. Materials
5.3.5. Prefab
5.3.6. Ressources
5.3.7. Scènes
5.3.8. Scripts
5.3.9. Tests
5.3.10. Texture
5.4. Mode de jeu
5.4.1. Solo
5.4.2. Multijoueur
5.5. Sauvegarde des données
5.5.1. Base de données – XAMPP
5.5.2. PlayerPref
5.5.3. Json
5.6. Résultat
6. Gestion du projet
6.1. Projet
6.2. Application lifecycle anagement
6.3. Documents
7. Conclusion
7.1. Conclusion du projet
7.2. Conclusion personnelle
8. Bibliographie

Télécharger le rapport complet