2

Sommaire

Introduction Présentation de l’équipe

Problématique

Contexte

Serious Game ?

Nom du jeu

Cible

Benchmark

Gameplay But du jeu

Étapes du gameplay

Use case didacticiel

Use case multijoueur

Charte Graphique Logo

Typographies

Couleurs

Teaser Scénario

Montage et animations

Interfaces Eléments graphiques

Inscription

Plateau de jeu

Développement Construction des pages

Front End

Back End

Plateforme de destination

Gestion de Projet Planning

Budget

Conclusion Remerciements

3

Baptiste CottereauGestion de projet

Teaser vidéo

Programmation

Gameplay

Ghislain GuyProgrammation

Recherche technique

Design

Gameplay

Présentation de l’équipe

4

Problématique

Comment rendre une source de connaissances plus attractive et amener des joueurs à plusieurs thématiques grâce au Serious Game ?

5

Contexte

Iks’ray est une application web permettant, dans un premier temps, d’aider nos joueurs à découvrir plusieurs thématiques de lecture via une nouvelle solution proposée qu’est le serious game. Cette application web commencera son expérimentation dans la bibliothèque de l’université Paris8, mais pourra très facilement s’exporter vers tous types de bibliothèques.

Nos joueurs seront donc principalement des étudiants pour le lancement de notre application, et nous permettra ainsi de constater si oui ou non notre jeu aide les étudiants à se tourner vers des thèmes qu’ils ne connaissaient pas.

6

Cette application web permettrait ainsi de lire et jouer en communauté, aussi communément appelé « multijoueur ». Cette plateforme permettra à chaque joueur de créer son profil de lecteur, et par la suite de jouer au sein de la bibliothèque universitaire avec d’autres étudiants. C’est un jeu de recherche que l’on peut facilement rapprocher à de la course d’orientation.

Ce serious game n’est pas seulement un jeu ludique, il permettra aussi à divers étudiants, notamment grâce à l’aspect « multijoueur » de rencontrer d’autres joueurs/lecteurs et d’échanger sur les différents livres proposés par le jeu.

Pour conclure, nous espérons que tous les lecteurs, qu’ils soient adeptes de romans policiers ou de livres sur la photographie, puissent s’amuser ludiquement grâce à notre jeu et pourquoi pas, transmettre leur passion qu’est la lecture.

7

Il existe une multitude d’approches du serious gaming. En assumant les ambiguïtés et les questions que cela peut soulever, voici notre approche du serious game. La vocation d’un serious game est d’inviter l’utilisateur à interagir avec une application informatique dont l’objectif est de combiner des aspects d’enseignement, d’apprentissage, d’entraînement, de communication ou d’information, avec des ressorts ludiques et/ou des technologies issus du jeu vidéo. Une telle association a pour but de donner à un contenu utilitaire (serious), une approche vidéo-ludique (game). Elle s’opère par la mise en relation d’un scénario utilitaire avec un scénario ludique.

Scénario utilitaire + scénario vidéoludique = serious game

America’s Army, développé pour le compte de l’armée américaine et distribuée gratuitement sur Internet depuis 2002, est considéré comme le premier serious game significatif. En 2004, plus de 17 millions de téléchargements étaient recensés. Ce jeu de tir à la première personne propose de simuler des exercices d’entraînement militaire et des missions de combat. Mais sa principale vocation est de valoriser l’armée des Etats-Unis et de servir d’outil de recrutement attractif auprès des jeunes de 16 à 24 ans.À ce jour, l’utilisation du serious gaming est recensée dans de nombreux secteurs.

Sources : IDATE Consulting & Research ja.games.free.fr/ludoscience/PDF/EtudeIDATE08_VF.pdf

Qu’est-ce qu’un Serious Game ?

Editeurs et Distributeurs spécialisés

Alfa multimédia...

Acteursspécialisés dans

la défenseScript’games studio

Virtual Heroes...

Acteursspécialisés dans

la formationDaesign

PixelLearning...

Acteursspécialisés

dansla simulation

JDSolve...

Agencesde

communicationB2B

Levis numérique...

Studiosde

développementSumo-Digital

Yamago...

Rechercheuniversitaire

MITMindweavers

...

Institutionspubliqueset privées

ArmésÉcoles

...

Editeurs livresDupuis

...

MediaTF1...

InformationNews gaming

...

Acteurs jeu vidéo

BreakAway gamesNintendoUbisoft

...

Editeurs Ludo-éducatifs

MilanCocktel Vision

...

Serious Game

8

Nom du JeuPourquoi Iks’ray ?

Le choix de ce nom provient de plusieurs horizons qui définissent parfaitement notre serious game.Comme montré auparavant, le serious game était principalement utilisé dans le secteur de la défense. Nous avons donc cherché à rappeler ce secteur mais dans le lieu de notre jeu, la bibliothèque.L’alphabet phonétique de l’OTAN, utilisé par l’OACI, l’OTAN mais aussi par les services de secours utilisant les fréquences radios telles que la police, la gendarmerie, la sécurité civile, etc. Il est issu des différents alphabets radio utilisés par les forces armées des États-Unis.

Code en API intuitivement

A alpha [‘ælfa] alfâ

B bravo [‘bravo] brâvô

C charlie [‘tƒali] chârli

D delta [‘dƹlta] dèltâ

E echo [‘ƹko] èkô

...

X x-ray [‘ƹks’rei] èksrèy

Sources : Wikipédia

9

Chaque code permet de définir une position permettant aux unités de se retrouver. Nous pouvons faire un rapprochement avec le système de cote utilisé par les bibliothèques, chaque livre à une position dans un secteur et une étagère ce qui permet de retrouver chaque livre aisément. Nous avons donc dérivé le code de la position X (x-ray) pour Iks’Ray.

Rappelons que c’est un jeu de recherche, les lettres Iks évoquent « I know search », je sais chercher/rechercher. Ray pour le rayon de recherche, rayon de connaissances, mais aussi le champ de vision, l’exemple le plus concret reste le radar des sous-marins.

10

Cible

Notre plateforme est destinée aux lecteurs et plus précisément aux étudiants de l’université Paris8.

Dans un premier temps nous souhaitons créer une communauté dans l’enceinte de l’établissement Paris8 et par la suite proposer notre jeu aux autres universités et bibliothèques de la région Parisienne.

Notre cœur de cible étant les étudiants, nous ne mettons aucune barrière d’âge pour jouer à notre jeu, car celui-ci peut convenir à n’importe quel type de média et tous types d’âge si le contenu y est adapté.

11

Persona

Julie Julien20 ansÉtudiante en ArtRarement dans la BU

25 ansÉtudiant en informatiqueSouvent dans la BU

Présentation Inscription Choix d’une partie

RésultatCréationdes équipes

Inscription DidacticielRecherche dans la BU

Pose des pièces

12

BenchmarkLe design du jeu iks’Ray est inspiré d’un jeu de société appelé Tantrix.

« Tantrix est un jeu de pose de tuiles qui a eu beaucoup de succès. Le principe est simple : vous posez des tuiles qui doivent respecter les couleurs adjacentes. Divers chemins de couleur se forment alors. Le but est de parvenir à ce que le chemin de votre couleur soit le plus long. »

Nous utilisons les mêmes principes de jeu que Tantrix tout en allégeant la complexité du jeu pour que celui-ci soit compatible avec notre Serious Game.

Le slogan du Jeu Tantrix « Restez Connecté » s’applique parfaitement à Iks’Ray. Bien évidemment et comme énoncé dans les pages 4 et 5, nous voulons permettre à nos joueurs de découvrir de nouveaux thèmes de lecture et de faire évoluer leurs périmètres de connaissances.

Un lecteur aura la possibilité d’ajouter des « tags » à des livres et de faire évoluer sa description. Les « tags » permettent une implication supplémentaire mais non obligatoire de la part de nos joueurs. Ils associent donc la partie connectée et la partie communauté.

Le design d’Iks’Ray utilise l’aspect d’hexagone de Tantrix, ainsi que les différents types de lignes que celui-ci propose dans le jeu. Nous avons par ailleurs décidé de faire un code couleurs différent de celui de notre base et qui nous permet de mettre en avant le thème principal qu’est celui de la lecture.

13

14

GamePlay

15

But du Jeu

Le but du jeu est simple, trouver un maximum de livres et faire la plus grande ligne pour marquer le plus de points. Pour marquer des points vous devez trouver au moins deux livres et établir une connexion, ici sous forme d’une ligne. La ligne de chacune des deux pièces devra obligatoirement faire la connexion sans quoi les points ne pourront être donnés.

Le jeu se joue en multijoueur, il faut donc chercher des livres intelligemment et communiquer avec ses coéquipiers pour avancer plus rapidement mais aussi pour ne pas être bloqué par les autres équipes présentent dans la partie.

Les points sont répartis comme ceci :

Si le thème du livre trouvé est le même que la couleur de l’équipe : 1 pts Si le thème du livre trouvé est différent de la couleur de l’équipe : 2 pts Uniquement les points de la plus grande ligne de l’équipe sont comptés.

16

Étapes du Gameplay

Pour jouer à Iks-Ray, il est nécessaire d’avoir un smartphone et d’être étudiant à Paris8. Une inscription est nécessaire et peut être faite sur notre site ou directement via l’application.

Les joueurs feront premièrement un didacticiel leur permettant de comprendre les règles et le fonctionnement du Serious Game. Ils pourront ensuite passer au mode multijoueur, plus intéressant et plus dynamique.

Le Gameplay du jeu se découpe en 5 étapes qui vont être expliquées dans un didacticiel pour que chaque joueur puisse par la suite jouer aisément et avoir du plaisir en jouant à Iks’ray.

17

Use Case Didacticiel

1ère étape

L’affichage du plateau, dans le didacticiel, est seulement composé de sept livres à chercher.

18

2ème étape

Il faudra sélectionner un des sept livres (hexagones) par un simple touch sur votre écran.

Les informations concernant le livre vont s’afficher et grâce à celles-ci, le joueur aura toutes les informations nécessaires pour rechercher le livre dans la Bibliothèque Universitaire.

Les informations affichées sur l’écran sont propres au livre et permettent de voir à quoi il ressemble et où le joueur va pouvoir le trouver. Ainsi, la couverture du livre, la salle où le livre se trouve, la collection, la cote, l’auteur du livre et le type de document apparaîtront à chaque sélection de pièce.

3ème étape

Grâce à toutes ces informations, le joueur devra chercher dans la bibliothèque universitaire le livre sélectionné.

19

20

4ème étape

Une fois le livre en main, le joueur devra utiliser la fonction de comparaison ( icône appareil photo ) et devra « flasher » le code-barres du livre. Cette étape sert à savoir si le joueur a trouvé le livre demandé. Une réponse de l’application sera là pour informer le joueur de sa réussite ou de son échec.

21

5ème étape

C’est ici que la partie stratégie du jeu intervient. Le joueur devra choisir le type de ligne qu’il veut et qui facilitera la recherche des futurs livres pour que sa ligne soit la plus grande possible.

Le premier choix à faire, est de choisir l’angle de la pièce (ligne droite, petit virage ou grand virage). La sélection de la ligne s’effectuera par un clic.

Le deuxième choix est de tourner la pièce, afin de créer une ligne.

22

MultijoueurLe principe du jeu reste le même en multijoueur.Chaque participant d’une partie devra donc faire les 5 étapes précédemment évoquées.

Un choix d’équipe et de « zones » de jeu sera nécessaire. Dans la bibliothèque universitaire les zones (ou salles) de couleur correspondes à des thèmes, comme le Droit et l’Art par exemple. Grâce à un clic sur la zone voulue, le joueur pourra alors choisir le thème avec lequel il souhaite jouer.

Une fois la salle choisie (ici l’Art), les joueurs devront choisir une équipe (les équipes sont les sous-thèmes de la salle, pour l’art : Cinéma, Peinture, Musique etc.)

À noter, une partie peut contenir 25 joueurs maximum et est bien sur dynamique (le nombre de livres à trouver dépend du nombre de joueurs dans la partie). La carte peut donc être grande et les choix des lignes vont être important pour le décompte des points. L’actualisation se fait en temps réel, chaque joueur peut donc voir quel livre il lui reste à découvrir et pourra suivre l’avancement de la partie dans son intégralité.

23

Chaque joueur devra choisir une équipe et pourra donc se reconnaitre sur la carte grâce à la couleur de sa ligne.

Il ne vous reste plus qu’à rencontrer les personnes de votre équipe et commencer à jouer.

Une fois la partie terminée, les joueurs auront accès à leurs statistiques et pourront voir les livres qu’ils ont trouvés pour ajouter s’ils veulent des annotations aux livres qu’ils ont lu.

24

25

26

Charte graphique

27

LogoLes différents formats et utilisations du logo.

IcôneMax : 8 cmMin : 2 cm

Max : 12 cmMin : 3 cm

Taille minimum : 10 cm Min : 6 cm

Légende :Zone de protection

28

LogoLes versions monochromes et sur fond sombre.

29

Hexa

# 452c1b

# ffffff

# 47c0eb

# faaf3a

# c6c6c6

Textes / Titres

Fond principal

Titres / boutons / fond

secondaire

secondaire

R

69

255

71

250

198

V

44

255

192

175

198

B

27

255

235

58

198

C

30

0

64

0

0

M

70

0

1

38

0

J

85

0

0

82

0

N

80

0

0

0

30

Couleurs

30

PiècesLe code couleur des différentes thématiques : Les lignes colorées représentent les équipes. La couleur de fond des hexagones, représente les livres.

Une ligne colorée, peut se retrouver sur n’importe quel fond.

31

Titres : RawengulkSansTitres secondaires : Comfortaa BoldTitres secondaires : Comfortaa BoldTitres secondaires : Comfortaa Bold

Textes principaux : Comfortaa RegularTextes gras : Comfortaa Bold

Typographies

Boutons : Comfortaa Bold

32

Teaser

33

ScénarioNous avons réalisé un teaser d’environ 1 min pour présenter le Serious Game Iks’Ray. Son format est court et laisse le spectateur en suspens pour lui donner envie de jouer et de découvrir par lui-même l’application sans trop en dévoiler.

Notre application étant un jeu, nous avons pris la décision de créer un teaser uniquement fait d’animations qui reflètent, à la fois le côté numérique et son côté dynamique. On y voit donc un iphone affichant notre jeu ainsi que les grandes lignes proposées par iks’Ray, quelques écrans du gameplay, avec des animations de mouvement qui affirment la mobilité qu’aura le joueur via notre application.

Montage et Animations

Teaser d’une minute tout en animation.

Le montage de la vidéo s’est fait sur Adobe Première Pro et les effets spéciaux sur Adobe After Effect.

34

Interfaces

35

Les éléments graphiques

Pour une harmonisation graphique des différentes interfaces de l’application, nous avons mis en place des éléments graphiques récurrents.

Les couleurs dominantes restent le bleu, le brun et l’orange, couleurs du logo.

Appareil photo Le blason d’une équipe. Représente

une ligne sur un hexagone.

La sélection d’une pièce avec le

bouton de rotation.

La sélection d’une pièce avec le

bouton appareil photo.

36

Inscription

Chaque joueur pourra s’inscrire via cette interface. Un joueur aura donc un pseudonyme et devra renseigner le mot de passe voulu, ainsi qu’une adresse mail pour confirmation. De plus, l’adresse nous servira à informer les joueurs des quelques évènements que pourra offrir le jeu.

37

Plateau de jeu

L’interface d’une partie est faite d’hexagones qui remplissent ensemble la fonction plateau de jeu. Chaque hexagone est une pièce qui doit afficher le livre d’une liste.

38

Développement

39

Construction des PagesIks’Ray est un Serious Game qui se doit d’être dynamique compte tenu du contenu du jeu. Nous avons fait le choix d’une structure simple mais accessible rapidement par les utilisateurs. Pour le développement, nous avons utilisé, côté serveur, le PHP. Côté front-end, le javascript et les bibliothèques Jquery et D3.js. Le Framework Bootstrap, pour l’affichage responsive, ainsi que le langage JSON.

Iks’Ray est un site où la manipulation des données doit être strictement structurées. Les utilisateurs seront amenés à manipuler peu de données néanmoins la base de données devra elle faire un gros travail en amont, pour se faire, nous avons utilisé le langage SQL pour le contenu des joueurs et du Json pour le jeu (affichage de chaque détail de chaque livre pendant une partie). De ce fait, le JSON nous permet de gagner en rapidité et en fluidité pour nos joueurs. La solution technique retenue et la plus pertinente est de mettre en place une partie FRONT-END et une partie BACK-END pour bien séparer les différentes parties et les différentes fonctions.

40

Front-EndD3.js avec le plugin Hexbin nous permet de générer les hexagones et de créer le plateau de jeu.

Pour la gestion des différents écrans (smartphone, pc, tablette) nous avons utilisé le framework Bootstrap qui permet de générer notre plateforme en responsive design.

Nous avons également utilisé phoneGap pour compiler notre application Web et utiliser sa fonction de scan des code-barres.

Inscription

Profil Partie Tag

Consulter - Profil - Statistiques

Jouer - Didacticiel - Multijoueur

Ajoutd’un tag à un livre

Actions Actions Actions

Hexbin

41

Back-EndL’hébergement web

Pour notre hébergement nous choisissons OVH. Il propose des tarifs raisonnables. Il serait ainsi la solution la plus adéquate financièrement et techniquement. Nous avons retenu l’offre HEBERGEMENT PRO avec 250Go d’espace, 100 comptes Email de 5Go et 4 bases de données avec un nom de domaine offert.

La base de données

Nous avons développé une base de données qui contient sept tables définies ci-contre. Cette base de données a été mise en place sous phpMyAdmin avec un serveur web local : WampServer.

Plateforme de destination

Iks’Ray est avant tout une application web et donc tout particulièrement adaptée aux smartphones et tablettes (avec appareil photo). Iks’Ray est disponible sous Android et nous espérons qu’il soit disponible sous iOS sous peu.

42

Gestion de ProjetPlanning

43

Gestion de ProjetBudget

Budget sur les revenus de l’équipe :

Chef de projet/développeur :temps pleinWebdesinger/développeur :temps plein

Durée estimée pour la réalisation du projet : 7 mois et demi. De mi-novembre 2015 jusqu’à début juin 2016

«Les différents revenus seront basés sur le tarif journalier d’un freelance.»

Durée Pers. €/J TotalConception

Conception 25j 2Rédaction 15j 1

SOUS TOTAL : 0Communication

Teaser 25j 2Tournage 3j 2 500 1500Montage 2j 1 540 1080

Animation 10j 1 450 4500Musique 1j 1 200 200

Interfaces 2j 2 400 400SOUS TOTAL : 7 680

DesignCharte graphique 10j 2 450 4500

Interfaces / Maquettes 17j 1 400 6800Modifications 7j 1 75 525

SOUS TOTAL : 11 825Développement

Plateau de jeu 20j 1 400 8000Base de données 7j 1 350 2450

Intégration 7j 2 350 2450Modifications 2j 2 150 300

SOUS TOTAL : 13 200TOTAL 32 705

44

ConclusionNos impressions

Baptiste :

Je suis ravis d’avoir pu travailler sur le projet Iks’Ray. L’idée de travailler sur un Serious Game m’a directement emballé. C’est un projet pour notre université et j’espère qu’il pourra être utilisé sous peu.

Ghislain :

Comme je connaissais le jeu Tantrix, iks’Ray était le projet qui avait attiré en premier mon attention, même si on a mis longtemps avant de s’apercevoir de tout le potentiel de l’idée. Je pense que ce Serious Game sera autant intéressant à jouer que cela l’a été pour le développer.

Notre conclusion

Nous avons finalement réussi à créer un serious game intéressant, en s’inspirant des règles du jeu de société Tantrix tout en réfléchissant à comment nous pouvons jouer dans une bibliothèque, ou tout lieux source de connaissances.

Remerciements

Guillaume Besacier conseils techniques

Claude Yacoub conseils en gestion de projet

Samuel DelfantiMehdi Kahtane

conseils pour la réalisation du teaser

Remerciements particuliers

Catherine Nyekiconseils en design

Samuel SzonieckyPour son idée originale et ses conseils techniques.

45

Webographie

Qu’est-ce qu’un Serious Game ? IDATE Consulting & Researchja.games.free.fr/ludoscience/PDF/EtudeIDATE08_VF.pdf

Alphabet phonétique de l’OTANWikipédiahttps://fr.wikipedia.org/wiki/Alphabet_phon%C3%A9tique_de_l%27OTAN

page 7

page 8

46