Vous êtes sur la page 1sur 75

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR

ET DE LA RECHERCHE SCIENTIFIQUE
UNIVERSITE DE SOUSSE

‫المعهد العالي لإلعالمية و تقنيات االتصال بحمام سوسة‬

INSTITUT SUPERIEUR D’INFORMATIQUE


ET DES TECHNIQUES DE COMMUNICATION – HAMMAM SOUSSE

Département Réseaux et Multimédia

MEMOIRE DE STAGE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme de Licence informatique


Technologies du Multimédia et du Web

Réalisation d’un Jeu 3D


« TIKKIDO »pour des fins éducatives
Réalisé par :

Fatma Bougatef
Islem Afli

Encadrée par :
Mr. Mohamed Amin Ben Amar
Mme. Asma Berriri

Société d’accueil

Année Universitaire 2021 – 2022


MINISTERE DE L’ENSEIGNEMENT SUPERIEUR

ET DE LA RECHERCHE SCIENTIFIQUE

UNIVERSITE DE SOUSSE

‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬

INSTITUT SUPERIEUR D’INFORMATIQUE

ET DES TECHNIQUES DE COMMUNICATION – HAMMAM SOUSSE

Département Réseaux et Multimédia

MEMOIRE DE STAGE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme de Licence Informatique

Technologies du multimédia et du Web

Réalisé par :

Fatma Bougatef

Islem Afli

Encadrant académique :………………………Date :………………………Signature :…………….

Co-Encadrant académique :……………………Date :………………………Signature :…………….

Encadrant technique :………………….. ……Date :………………………..Signature :…………….

Année Universitaire 2021 – 2022


Dédicace
Avec une profonde gratitude et des paroles sincères, je dédie ce
modeste travail de fin d’études

Mes chers parents, qui ont sacrifié leur vie pour mon succès

Que Dieu leur donne bonheur et longue vie.

Je dédie aussi ce travail à mes familles, mes amis, qui m’ont


beaucoup aidé,

Enfin, mais je dédie ce travail à tous mes professeurs

et à tous ceux qui me sont chers.

 Fatma
Dédicace

Je dédie ce travail

Avec une profonde gratitude et des paroles sincères, je


dédie ce modeste travail de graduation
À
Mes chers parents, qui ont sacrifié leur vie pour mon
succès
Que Dieu leur donne bonheur et longue vie.
Je dédie aussi ce travail à ma famille : Sabra, Hafedh
Achref, Hammouda et Eya , mes amis : Nour el houde
chelly , Jalila Chelly et Yosri
Tous mes professeurs qui nous ont enseigné et tous
ceux qui me sont chers.

 Islem
Remerciements

On tient tout d’abord à remercier notre encadrant Mr Mohamed Amin Ben Amar
pour son aide, son encadrement et son encouragement incessant qui m’a permis de mener
efficacement à terme notre projet.

On voulait remercier, tout particulièrement, Mme Asma Berriri, pour son attention, ses
efforts, ses conseils utiles et son encouragement incessant en nous renseignant avec toute
information demandée.

On tient à remercier, ainsi, notre encadrant Mr Atef Gaga, pour nous avoir accueillies
comme stagiaires au sein de son service et de nous avoir guidé tout le long de notre stage afin
de réaliser notre projet dans les délais accordés.

D’une façon plus générale, on tient à remercier tous ceux qui nous ont donné de leur
temps afin de nous ’éclaircir les idées sur les procédés de fabrication et sur le fonctionnement
des magasins de produit fini et de matière première. Toutes ces personnes ont contribué, par
leur disponibilité et leur bonne humeur, à rendre notre stage enrichissant et motivant.

 Fatma

 Islem
Table des matières
Introduction générale ________________________________________________________ 7
Chapitre 1 : Etude préalable __________________________________________________ 8
I. Introduction _________________________________________________________ 8
II. Présentation de la société d’accueil _____________________________________ 8
1. Définition de la mission :__________________________________________________________ 10

III. Présentation du projet ______________________________________________ 10


1. Etude de l’existant _______________________________________________________________ 10
2. Présentation du projet ____________________________________________________________ 14

I. Stratégie de marketing ________________________________________________ 17


II. Objectifs __________________________________________________________ 18
III. Planning __________________________________________________________ 18
IV. Conclusion ________________________________________________________ 19
Chapitre 2 : Spécifications et conception _______________________________________ 20
I. Introduction : _______________________________________________________ 20
II. Méthodologie de conception : UML ___________________________________ 20
1. Digramme de cas d’utilisation ______________________________________________________ 20
2. Digrammes de séquences __________________________________________________________ 22

III. Conception graphique ______________________________________________ 25


1. Charte graphique ________________________________________________________________ 25
2. Charte sonore ___________________________________________________________________ 30
3. Mood Board ____________________________________________________________________ 31
4. Story-board ____________________________________________________________________ 31

IV. Conclusion : _______________________________________________________ 33


Chapitre 3 : Design et environnement du jeu ____________________________________ 34
I. Introduction ________________________________________________________ 34
II. Eléments du jeu ____________________________________________________ 34
1. Eléments statiques _______________________________________________________________ 34
2. Eléments dynamiques ____________________________________________________________ 35
3. Eléments évolutifs _______________________________________________________________ 36

III. Conditions de victoire et de défaite ____________________________________ 38


1. Gameplay principale _____________________________________________________________ 38
2. Game Controls__________________________________________________________________ 38
3. Game Camera __________________________________________________________________ 39

IV. Boucle d’objectif de Game Play ______________________________________ 43


V. Analyse du jeu _____________________________________________________ 46
1. Analyse stylistique _______________________________________________________________ 46
2. Analyse sonore _________________________________________________________________ 47

2
3. La nouveauté ___________________________________________________________________ 47

VI. Conclusion : _______________________________________________________ 48


Chapitre 4 : Réalisation _____________________________________________________ 49
I. Introduction ________________________________________________________ 49
II. Environnements et technologies utilisées _______________________________ 49
1. Environnement matériel __________________________________________________________ 49
2. Environnement logiciel ___________________________________________________________ 50
4. Langage de programmation ________________________________________________________ 53

III. Réalisation du jeu __________________________________________________ 54


1. Création des vidéos éducatives _____________________________________________________ 54
2. Animation des éléments 3D ________________________________________________________ 57
3. Développement des scripts ________________________________________________________ 59

IV. Interfaces graphiques _______________________________________________ 61


VII. Conclusion : _______________________________________________________ 67

3
Liste des figures

Figure 1: Logo de la société CAMELSOFT _____________________________________________________ 8


Figure 2: Secteur d'activité de CAMELSOFT LLC ________________________________________________ 9
Figure 3: Les services informatiques de CAMELSOFT LLC ________________________________________ 9
Figure 4: La répartition des jeux vidéo les plus jouées, en Tunisie __________________________________ 11
Figure 5: Page d'accueil de la plateforme Takiacademy __________________________________________ 12
Figure 6: Captures du jeu" ‫ ____________________________________________________ "كلمات متقاطعة‬16
Figure 7: Valeurs ajoutés par notre jeu vidéo __________________________________________________ 16
Figure 8: Stratégie de Marketing ____________________________________________________________ 17
Figure 9: Objectifs du jeu développé _________________________________________________________ 18
Figure 10: Le cycle de développement jeu vidéo ________________________________________________ 19
Figure 11 : Diagramme de cas d'utilisation général _____________________________________________ 21
Figure 12:Diagramme de cas d'utilisation des options ___________________________________________ 22
Figure 13:Diagramme de séquence de fonctionnalité lancer le jeu __________________________________ 23
Figure 14: Diagramme de séquence guider le bus _______________________________________________ 24
Figure 15:Brillant du logo _________________________________________________________________ 25
Figure 16 : Logo TikkiDo du jeu _____________________________________________________________ 26
Figure 17:identité visuel du jeu _____________________________________________________________ 26
Figure 18:Palette du couleurs primaires ______________________________________________________ 28
Figure 19:Palette du couleurs secondaires ____________________________________________________ 28
Figure 20:Style des boutons ________________________________________________________________ 30
Figure 21:Mood Board du Tikkido ___________________________________________________________ 31
Figure 22:Envirenement de la ville ___________________________________________________________ 34
Figure 23:Avatar fillette en mouvement _______________________________________________________ 35
Figure 24:Les deux avatars de vidéos éducatives ________________________________________________ 35
Figure 25:Le bus en trois vues ______________________________________________________________ 36
Figure 26:Le mode de collision entre le bus et l'entrée de l'école ___________________________________ 37
Figure 27:Charte flow de la collision du bus ___________________________________________________ 37
Figure 28:Position de la caméra ____________________________________________________________ 39
Figure 29:Vue de la caméra ________________________________________________________________ 40
Figure 30:Angle du la vue caméra ___________________________________________________________ 40
Figure 31:Caméra par rapport à la position de la fillette _________________________________________ 41
Figure 32:Le rendu par le caméra ___________________________________________________________ 42
Figure 33:L'effet du zoome de la caméra sur le tableau ___________________________________________ 42
Figure 34:La vue de la caméra en face du sujet _________________________________________________ 43
Figure 35:Boucle d’objectif gameplay à court terme _____________________________________________ 44
Figure 36: Boucle d’objectif gameplay :répondre correctement au question __________________________ 44
Figure 37 :Boucle d’objectif gameplay : Avoir un score suffisant ___________________________________ 45
Figure 38: Boucle d'objectif à gameplay :accéder à tout le contenu informatif _________________________ 45
Figure 39:Flot et hiérarchie des menus _______________________________________________________ 46
Figure 40:Logo Adobe Photoshop ___________________________________________________________ 50
Figure 41:Logo Blender ___________________________________________________________________ 51
Figure 42: logo adobe premier pro __________________________________________________________ 51
Figure 43: Logo Unity 3D _________________________________________________________________ 52
Figure 44:Logo Visuel studio _______________________________________________________________ 53
Figure 45:C Sharp _______________________________________________________________________ 53
Figure 46:Photo du premier personnage avant et après effet dessin anime ____________________________ 55
Figure 47: Photo du deuxièmes personnage avant et après effet dessin anime _________________________ 55
Figure 48:Animation de l'avatar _____________________________________________________________ 56
Figure 49: Animation du cœur par rapport à la circulation sanguine ________________________________ 57
Figure 50: Animation de la fillette par armature ________________________________________________ 58
Figure 51: Unity Animator controller _________________________________________________________ 58

4
Figure 52: Unity inspector, Animator _________________________________________________________ 59
Figure 53: Script du 1 er niveau _____________________________________________________________ 59
Figure 54: Script de 2 eme niveau ___________________________________________________________ 60
Figure 55: Interface d'accueil _______________________________________________________________ 61
Figure 56: Interface modifier volume _________________________________________________________ 61
Figure 57: interface du départ du bus ________________________________________________________ 62
Figure 58: Interface d’arrivé du bus à l'école __________________________________________________ 62
Figure 59:Entrée de l'avatar dans la classe de l'école ____________________________________________ 62
Figure 60: Interface continue _______________________________________________________________ 63
Figure 61: Interface du choix du cours ________________________________________________________ 63
Figure 62: Interface du cours _______________________________________________________________ 64
Figure 63: Interface de réussite question ______________________________________________________ 64
Figure 64: Interface de demande d’aide _______________________________________________________ 65
Figure 65:Interface de réussite d’un thème ____________________________________________________ 65

5
Liste des tableaux
Tableau 1: Planification du projet ........................................................................................................................ 19
Tableau 2: typographies de contenu ..................................................................................................................... 29
Tableau 3: Angle de vue Caméra par rapport à la distance focale ...................................................................... 41
Tableau 4: Nouveauté du jeu entre action et interaction ...................................................................................... 48
Tableau 5: Caractéristiques du 1er PC ................................................................................................................ 49
Tableau 6: Carréctéristiques du 2éme PC ............................................................................................................ 50
Tableau 7: Les taches du jeu ................................................................................................................................. 54

6
Introduction générale
Dans un monde, ou tous les domaines fleurissent dans la direction de l’écosystème
numérique, le système éducatif tunisien devrait faire part de cette révolution technologique, et
profiter de son pouvoir influant. On parle, spécialement, des jeux qui demeurent un besoin
vital et fondamental pour l’enfant. C’est indispensable, même, à son développement. Il
implique toutes ses capacités au fur et à mesure qu’elles se développent (sensorielles,
motrices, verbales, etc…) et n’implique pas forcement d’autres partenaires sociaux.

Le jeu n’est pas seulement un moyen de divertissement mais également d’apprentissage.


C’est pourquoi qu’on a choisi de développer un jeu vidéo éducatif qui va servir les trois pôles
du triangle pédagogique (le savoir, l’enseignant et l’apprenant). En effet ce processus
d’apprentissage suscite la motivation chez l’apprenant de même pour l’enseignant...

Nous voyons dans un premier temps qu’il est nécessaire d’établir le concept de notre jeu
éducatif concernant sa teneur ainsi que les fonctionnalités à promouvoir et les objectifs à
atteindre. De ce fait, le premier chapitre constitue une présentation de l’organisme d’accueil
pour notre stage, l’étude de l’existant, tout en mettant en relief les valeurs ajoutées de notre
projet.

On devait également tenter d’étudier la conception générale, et détaillée à travers le deuxième


chapitre.

En effet, ce chapitre analyse les fonctionnalités que fournisse notre jeu par les diagrammes de
cas d’utilisation générale, de classe. On s’intéresse, aussi, au diagramme de séquence qui
décrit le scénario de notre jeu pour terminer avec le story-Board.

Avant de, finalement, présenter les interfaces graphiques de notre jeu, dans le dernier chapitre.
On aborde sa faisabilité technique.

Et donc, le troisième chapitre, est dédié à la citation des technologies, de l’environnement


matériel nécessaire au design, montage vidéo, conception 3D et développement jeu ainsi que
les logiciels utilisés.

7
Chapitre 1 : Etude préalable
I. Introduction
On entame notre mémoire, par l’étude du projet dédiée à la présentation de l’organisme
d’accueil et de notre idée. C’est dans cet esprit, qu’on va étudier l’existant, dans le marché
tunisien, fixer nos objectifs à atteindre, autrement dit, la valeur ajoutée de notre projet. En
cherchant dans les facteurs clés de notre succès, On aboutit, à la fin, à l’adoption d’une
planification adéquate.

II. Présentation de la société d’accueil


CAMELSOFT LLC, CamelSoft It solution ou CamelSoft Entertainment est une société de
développement et de conseil numérique :

 Créée à la fin de 2017.

 Basée à Sousse et Tataouine.

 https://www.camel-soft.com/

Son secteur d’activité : Figure 1: Logo de la société CAMELSOFT

CAMEL SOFT LLC EST l’une des nouvelles entreprises actives dans les domaines
d’intégration de systèmes informatiques, de services professionnels et de développement de
logiciels en Tunisie.

En tant qu’entreprise privée, CAMEL SOFT LLC fournit des solutions informatiques par la
conception et le développement logiciels et de maintenance.

8
Figure 2: Secteur d'activité de CAMELSOFT LLC

Services :

Parmi ses services informatiques, le développement web et mobile : sur Android et IOS, le
développement jeux, en particulier, la conception graphique... comme l’indique le diagramme
ci-dessous :

Figure 3: Les services informatiques de CAMELSOFT LLC

9
1. Définition de la mission :
CAMELSOFT LLC, comme étant l’organisme d’accueil pour notre stage PFE, nous a
proposé de développer un jeu sérieux éducatif 3D sous Unity. La conception de
l’environnement 3D est par Blender. Le jeu est dédié pour les écoles primaires comme
activité complémentaire au programme pédagogique scolaire. En nous donnant la main pour
créer un scénario relatif au sujet proposé, cohérent et harmonieux avec les capacités de
l’enfant. « Il est temps de mettre au monde notre propre jeu, surtout, au profit, de nos jeunes
apprenants » comme l’a mentionné notre encadrant technique de la société.

III. Présentation du projet


1. Etude de l’existant
a. Analyse de l’existant
i. L’industrie des jeux vidéo en Tunisie
En croissance avec le développement des véritables moteurs des plusieurs secteurs,
l’industrie du jeu vidéo suscite l’intérêt des investisseurs par sa performance, son potentiel.

En Tunisie, La mentalité est consciente de la richesse qui est portée par les jeux : le juste
équilibre entre innovation technologique et la création de contenus. Ici, intervient le rôle des
acteurs dans ce domaine pour offrir des services en accord avec les attentes des joueurs.

C’est un noyau dur sur lequel l’écosystème tunisien peut compter pour créer plus tard des
entreprises. Par contre, les sociétés de développement qui créent, produisent et publient les
jeux vidéo sont généralement de taille réduite”

En Revenant sur l’évolution du secteur du gaming en Tunisie, de façon générale, les derniers
statistiques révèlent que le pays jouit d’une estimable communauté de « Gamers ». Quand il
s’agit de jeux vidéo en Tunisie, acquérir des chiffres exacts, n’est pas une chose évidente.
Non seulement le secteur n’est pas encore bien structuré, mais la communauté tunisienne de
joueurs est un peu dispersée. Cette communauté atteint les 500.000 Gamers, environ. 80% des
Gamers tunisiens jouent sur les browsers, Facebook… 45 à 50% de ces joueurs sont des
femmes. Et pour la moyenne d’âge, elle est de 26 ans.

10
53% 47% Filles
garçons des des
‘Gamers’ ‘Gamers’

Des jeux fameux ayant un succès mondial, comme StarCraft, n’ont qu’une centaine
d’utilisateurs en Tunisie, vu que ce jeu est payant, et qu’il n’existe pas de moyen pour y jouer
en LAN. La capture suivante issue des derniers statistiques, d’après Tagtun, montre les
pourcentages des jeux vidéo les plus connus en Tunisie :

Figure 4: La répartition des jeux vidéo les plus jouées, en Tunisie

« Le jeu vidéo est le logiciel le plus complexe à mettre en place, non seulement il doit bien
fonctionner mais aussi il doit plaire émotionnellement parlant ». Et, donc, faute de formation
et manque d’information dans ce domaine, l’affranchissement du secteur des jeux vidéo est
encore difficile à l’égard des boites de productions.

ii. L’apprentissage numérique en Tunisie


A travers ce titre, On traite la question du numérique à l’école en Tunisie. En mai 2015, le
ministère tunisien de l'éducation a lancé un programme appelé « Solutions numériques pour

11
tous » dans le cadre d'un ensemble de réformes plus larges. Le programme vise à améliorer la
qualité de l'enseignement et s'adresse aux élèves et enseignants du primaire et secondaire.
L'objectif est de faciliter l'intégration des outils numériques dans le processus d'apprentissage,
de rendre les ressources numériques accessibles à tous les élèves et d'utiliser les technologies
numériques pour la réussite scolaire, avec une méthodologie d’éducation innovante. Mais,
paradoxalement, il s’agit d’une faible application réelle qui émane des écarts significatifs
observés entre les politiques annoncées et les usages observés.

Considérons l’exemple de TakiAcademy, qui est une plateforme d’enseignement en ligne, la


plus fameuse, en Tunisie. Fondée en 2013 et compte plus que 80 enseignants. Elle enseigne
les élèves de la 4ème année primaire jusqu’au Bac. Les cours sur cette plateforme se font
principalement à travers des vidéos encadrées par un groupe de professeurs et éducateurs
d’une manière synchrone, ou asynchrone.

b. Critique de l’existant

Figure 5: Page d'accueil de la plateforme Takiacademy

Pour accéder au contenu éducatif de la plateforme, il faudrait s’inscrire à l’un des


abonnements proposés par payement d’un tarif mensuel, comme l’indique la figure si dessus.

Ces vidéos sont sous forme des explications et des résumés de cours, ils sont étroitement liées
au programme éducatif et se contentent à leurs niveaux. D’où l’activité de la plateforme
connait une régression, vers la fin de chaque année scolaire.

De plus, les enfants de moins de dix ans ne sont pas concernées par la plateforme.

12
L’absence d’interaction entre l’apprenant et l’enseignant : Néanmoins, la visualisation non
interactive ne s’avère pas efficace et même ennuyante surtout pendant des longues durées
d’études.

c. Solutions ajoutées
D’après ce qui précède, on constate que Taki Academy se base sur l’éducation verticale. Elle
est répressive car l’élève reçoit l’information par l’écoute du cours sans aucune interaction.

Notre solution est un jeu éducatif basé sur l’éducation horizontale : la condition interactive a
été jugée plus active et plus stimulante par les apprenants en situation individuelle.

On adopte le concept de « ludification », dans notre jeu pour permettre aux apprenants
d’associer les nouveaux apprentissages à différents stimulus. Jouer pour des fins éducatives
augmente la motivation intrinsèque et favorise la mémorisation à long terme. En effet, le jeu
qui provoque des interactions potentielles avec le joueur-apprenant, conduit à une expérience
amusante dont le plaisir faisant partie intégrante du jeu. Le diagramme suivant souligne
l'importance d'un haut niveau d'interactivité pour ce type de matériel d'apprentissage. La
solution apportée par notre jeu met en relief toutes ces parties intervenantes :

13
2. Présentation du projet
a. Concept des jeux sérieux
i. Les jeux sérieux éducatifs
Les jeux sérieux, dans leur contexte pédagogique, donnent naissance à des rétroactions en
temps réel en fonction des choix du participant. Cette scénarisation de l’apprentissage dans un
jeu suscite la concentration et le plaisir. Le jeu reste toujours un moyen et non une finalité :
Cela implique, au préalable, un scénario pédagogique détourné à des fins utilitaires.

Pour être "sérieux", les jeux vidéo doivent être conçus pour véhiculer un message
pédagogique, en utilisant le code d'un jeu vidéo classique. Lorsqu'il est utilisé dans le cadre
d'un module d'enseignement donné pour réviser, appliquer le contenu d'un cours ou introduire
de nouveaux concepts qui seront abordés plus tard en classe, il devient un jeu éducatif
sérieux. Souvent considérés comme une perte de temps, les jeux vidéo, dévoile la violence et
l’agressivité, et influent négativement le comportement des enfants (en cours de
développement personnelle et psychologique). Avec la disparition des jeux dits « sérieux »,
de nos jours, c’est important de mener une activité pédagogique intégrant les TIC : à titre
d’exemple les jeux sérieux éducatifs.

Les jeux sérieux se différentient. Par exemple, les jeux d’entraînement et de simulation qui
permettent d’apprendre à exécuter une manœuvre précise. Prenons l’exemple des simulateurs
de vol, certains programmes militaires ou logiciels pour le domaine de la santé, comme la
médecine ou la pharmacie. Aussi bien, les jeux publicitaires (les Advergames) qui cherchent à
promouvoir l’image d’une marque. Pensons à Mentaliser conçu par Microsoft pour
promouvoir ses produits.

Dans notre contexte, Les enseignants du primaire seront sans doute davantage intéressés par
les jeux de type ludo-éducatif. Leurs intentions pédagogiques sont nombreuses et la cible
qu’elles visent l’est tout autant. Des sciences à l’histoire en passant par le développement de
compétences et d’attitudes sociales, ils pouvaient répondre à tous les goûts. On peut venir au
secours de la planète, sensibiliser ses élèves aux crises humanitaires, mieux gérer leurs
budgets, explorer les métiers ou développer leur estime de soi. Certains jeux ciblent le corps
et le mouvement.

Outre que l’accroissement de la motivation de l’élève, le jeu vidéo offre la possibilité à


l’apprenant de s’impliquer directement dans un apprentissage, de développer ses capacités
cognitives…Le jeu vidéo favorise ainsi la réflexion et la créativité.

14
ii. Vidéos éducatives pour une meilleure pédagogie
L’utilisation d’animations multimédias interactives pour apprendre devient de plus en plus
fréquente dans différentes disciplines. Motivantes et inspirantes, les animations semblent
particulièrement adaptées pour favoriser et concrétiser de façon réaliste la compréhension et
l’apprentissage des nouveaux concepts. Portant sur des processus dynamiques, Les vidéos
éducatives décrient des phénomènes complexes et invisibles en sciences naturelles,
expérimentales et en technologie.

A quelle mesure ces animations interactives sont-elles vraiment efficaces pour notre système
éducatif tunisien ? A cet égard, et d’après nos recherches réalisées dans les efforts
technologiques fournis pour répondre aux attentes des élèves tunisiens, On opte pour
l’utilisation pédagogique d’un nouveau format dynamique et interactif de construction des
connaissances : Celui réunit entre la diffusion de l’information (sous formes des vidéos
informatifs) et le pratique du jeu en donnant la main au joueur apprenant de répondre aux
questions équivalentes.

b. Source d’inspiration
i. Jeux ‫كلمات متقاطعة‬
Parmi les jeux sérieux les plus populaires, sur l’échelle arabe, vue sa capacité d'améliorer les
fonctions exécutives du cerveau. Les mots croisés améliorent le vocabulaire, car le fondement
de toute langue est ses mots. Tout en permettant de faciliter l'élocution et de stimuler les
zones cérébrales du langage et de l'esprit, l’application porte sur des tas de mots croisés.
Chaque niveau contient des quiz sous formes des questions, ou images représentées comme
indices. Une fois toutes les questions, mises en jeux, sont résolus, un niveau plus supérieur
(de point de vue difficulté) sera débloqué.

15
Figure 6: Captures du jeu" ‫"كلمات متقاطعة‬

c. Valeurs ajoutées
Toutefois, il semble que notre système éducatif qui est recensés par les répertoires populaires
permet davantage d’exercer cet esprit de jeu : Calculer ses multiplications plus rapidement,
enrichir son vocabulaire, travailler sa mémoire … Et le fait de réviser ses cours (à travers des
questions complémentaires au programme éducatif tunisien) seraient les points forts de notre
jeu.

Notre jeu implique l’enfant élève dans un monde 3D simulée à son environnement scolaire.
Familiarisé avec les personnages de son livre, Il les regarde, animées, parlantes dans des
vidéos informatives explicatives.

Afin de bien mémoriser les informations présentées, l’élève passe à la pratique de ses
connaissances, en répondant à la question relative à chaque vidéo.

Figure 7: Valeurs ajoutés par notre jeu vidéo

16
Parmi les avantages de notre jeu, on cite aussi :

 Chacun à son propre rythme : le joueur peut travailler en partie à son propre rythme il
est possible de prendre tout son temps pour répondre si la réflexion de l’infant est un
peu plus lent.
 Le développement stratégique des capacités à comprendre un problème, à prendre des
décisions et à poser des hypothèses de solutions.
 Des encouragements fréquents au joueur-élevé par attribution du score, par exemple
lorsqu’il réussit une mission ou en amassant des points, Ceci augmente la confiance en
soi chez le joueur en jouissant d’un sentiment de satisfaction.
 Le jeu est riche en termes d’animations avec des vidéos informatives animées.
 Une charte graphique harmonieuse (couleurs vifs, fonts clairs...) et une ambiance
sonore cohérente.
 Un design ergonome pour mener une expérience utilisateur simple et bien guidée, sans
avoir besoin d’aide de l’un de ses parents.
 La gratuité.

I. Stratégie de marketing
Ici, on parle de l’étape de post production. De ce fait, on devait étudier notre stratégie de
marketing : La promotion de notre jeu doit passer par une communication finement étudiée et
pensées pour valoriser son contenu et cibler le maximum d’audience.

Figure 8: Stratégie de Marketing 17


II. Objectifs
On peut cerner les objectifs de notre jeu dans les points suivants :

 Susciter un intérêt accru chez l’enfant par rapport à une activité d’apprentissage.
 Favoriser le développement d’habiletés cognitives et psychomotrices.
 Varier les stratégies pédagogiques employées en misant sur l’action et l’interaction.
 Cibler les écoles publiques et privées par notre jeu pour enrichir l’activité scolaire des
élèves.

Figure 9: Objectifs du jeu développé

III. Planning
Dans l’industrie du jeu vidéo, on se base sur un procédé qui permet de valider toutes les
étapes du cycle de développement jeu. Chaque phase est ponctuée d’une validation, une date
butoir aussi appelée « Milestone » (jalon). D’une manière générale, la production jeux doit
passer par les étapes représentées dans la figure suivante :

18
Figure 10: Le cycle de développement jeu vidéo

L'intelligence c’est d'en faire un projet réaliste, et la volonté c’est de voir ce projet mené à
bien. Pour cela, un plan d'action unifié doit être établi. Les étapes de planification provisoires
sont importantes afin qu’on puisse identifier une liste des tâches à accomplir pour estimer

quand chacune sera terminée. Le tableau suivant divisera nos chronologies estimées au cours
de la réalisation de notre projet.

Tableau 1: Planification du projet

IV. Conclusion
Dans un premier temps, On a présenté le cadre de l’idée de notre projet en fonction des
problématiques et des solutions proposées. D’où la naissance de notre jeu, de ses objectifs à
viser, en s’appuyant sur les facteurs précités, dans ce chapitre, comme des facteurs clés de
succès. Dans un second temps, nous avons souligné notre intention d’assurer une bonne
promotion de notre projet à travers une stratégie de marketing. On a clôturé par le plan qu’on
commence à le concrétiser, réellement, à partir du chapitre suivant.

19
Chapitre 2 : Spécifications et conception
I. Introduction :
Après avoir présenté dans le chapitre précèdent la phase d’analyse et de spécification des
besoins, dans un premier temps, on va détailler la modélisation graphique et conceptuelle du
notre jeu, en se basant sur les langages de modélisations UML. Dans un second temps, On
élabore notre charte graphique et sonore pour bien fixer le thème mis en scéne. Et pour
procéder au scénario du jeu, On établit le Mood-board et le story-board.

II. Méthodologie de conception : UML


En raison de sa forme relativement simple, la conception sera modélisée à l'aide du langage
UML (Unified Modeling Language). C'est un langage rationalisé par OMG (Object
Management Group) qui peut Concept graphique de modèle. UML décrit différents modèles
de représentation du système, pour notre projet nous avons choisi des diagrammes de cas
d'utilisation.

1. Digramme de cas d’utilisation


A l'aide de ce schéma, nous allons répondre aux questions suivantes :

Qui est l’utilisateur système ? Et, comment interagisse-il avec lui ?

De ce fait, on identifie l’acteur du jeu et ses cas d'utilisation, c'est-à-dire les fonctions du
système.

20
Figure 11 : Diagramme de cas d'utilisation général

Le premier niveau de bienvenue se résume dans la description suivante : afin d’arriver à


l’école, le joueur doit guider le bus. Cette action se fait par le déplacement dans les différentes
directions à travers les généralisations suivantes :

 Marcher en avant, tourner à gauche, reculer en arrière et tourner à droite.

Après l’arrivée à l’école, le joueur peut jouer le deuxième niveau de base. Celui est introduit
par une relation d’inclusion entre « choisir le cours » et « jouer le niveau 2 ». Par contre, pour
regarder les vidéos, et répondre à la question équivalente pour chaque niveau, il doit choisir le
cours.

21
Figure 12:Diagramme de cas d'utilisation des options

Parmi les actions permises au joueur, la fonctionnalité « Modifier le volume ». A travers


laquelle il peut soit augmenter le volume du son, soit le diminuer.

2. Digrammes de séquences
D’une façon générale, le diagramme de séquence représente la séquence de messages entre
des objets au cours d'une interaction. Il est constitué d'un ensemble d'objets représentés par
des lignes de vie, et des messages que ces objets échangent lors des interactions.

Aussi bien, le diagramme de séquence représente une séquence de messages transmis entre
des objets. Ils peuvent également représenter des structures de contrôle entre des objets.

Dans le but de mieux comprendre notre jeu, nous détaillons les principaux cas d’utilisations
que nous avons identifiés dans le diagramme de cas d’utilisation qui précède.

On a choisi deux fonctionnalités de diagramme de cas d’utilisation :

22
a. Diagramme de séquence de la fonctionnalité « Lancer le jeu » :

Figure 13:Diagramme de séquence de fonctionnalité lancer le jeu

Afin de commencer le jeu, le joueur doit cliquer sur le bouton « ‫» لنبدا‬, pour que l’interface
suivante soit affichée.

23
b. Diagramme de séquence pour la fonctionnalité « guider le bus » :

Figure 14: Diagramme de séquence guider le bus

Pour réussir le premier niveau et garantir le passage au deuxième, le joueur doit positionner
correctement le bus au parking, devant l’école. Après, se fait le choix de la partie à jouer.

24
Pour passer d'un niveau à l'autre, le joueur doit répondre correctement à chaque question. Il
peut soit changer les lettres, soit demander de l’aide s’il a un coin supérieure à 20 coins.

III. Conception graphique


1. Charte graphique
a. Logotype
i. Logo et slogan du jeu
Un logo doit être reconnaissable, inoubliable qui inspire confiance à l’enfant. Dans ce
contexte, on a choisi le nom Tikkido considéré comme une onomatopée. Il est composé du
mot rythmé : Tikki et Do pour passer à l’action.

Pour bien représenter l’essence de notre jeu enfantin, On a

Imaginé cet échantillon qui est le premier brouillon de notre logo :

Figure 15:Brillant du logo

La nature humaine, en général, est, naturellement, attirée par la symétrie, En effet, nous avons
tendance à percevoir les objets comme des formes symétriques autour d’un point central.
Cette théorie de Gestlat, est bien exprimée dans notre logo.

Pour créer un design élégant, le nom et le slogan de notre jeu sont entourés par des couleurs
énergétiques, stimulantes et apaisantes.

25
Figure 16 : Logo TikkiDo du jeu

De même le slogan doit être concis et frappant à l’esprit de l’enfant, et donc, la phrase
percutante qu’on a choisis c’est «‫» ت ع لم ب مرح‬. Ce message incisif qui exprime l’objectif de
notre jeux (entre joie et savoir) en quelques mots.

Figure 17:identité visuel du jeu

26
b. Palette des couleurs
Après l’harmonisation des couleurs de notre logo, il est temps de définir notre palette
chromatique. Ceci sert, surtout, à réviser le processus de création du jeu tout en appliquant
notre charte graphique. Le logo est coloré par ses couleurs primaires alors que les éléments du
jeu sont colorés par les couleurs secondaires.

Pour bien apporté à l’enfant le sentiment d’unité, d’ordre et de stabilité, on a recourt à des
couleurs équitablement répartis qui se balayent entre couleurs chaudes et froides.

Notre palette est composée du :

 Jaune :

Le jaune est une couleur stimulante qui représente l'optimisme et l’énergie. Cette couleur
capte l’attention et touche à l'esprit. Le jaune du soleil nous procure la joie et l’énergie, tout à
fait, comme le jaune employé dans notre jeu qui favorise la concentration et l'apprentissage.

 Bleu :

Le bleu est principalement accordé au ciel et à la mer : leurs étendus et infinités renvoient vers
la relaxation ainsi que la fraicheur. C’est un choix idéal pour rafraîchir l’imagination, susciter
la méditation même à l’enfant.

 Orange :

L'orange est souvent associée à la communication et à la créativité, c'est une couleur chaude
qui inspire et insuffle un vent de bonne humeur.

Elle est d'ailleurs, avec le jaune, la digne représentante du dynamisme et de l'ouverture


d'esprit.

 Rose :

Le rose est synonyme de grâce et tendresse, Il exprime, en faveur, l'envie de plaire, d'être
aimé. Dans d'autres concepts, il exprime la reconnaissance et le remerciement. Ce sont les
valeurs qu’on voudrait exprimer à travers notre jeu.

i. Couleurs primaires
Ce sont les couleurs principales du logo, présentés dans la palette suivante :

27
Figure 18:Palette du couleurs primaires

ii. Couleurs secondaires


Pour enrichir l’ambiance chlorométrique dans l’environnement du jeu, on ajoute les couleurs
secondaires suivantes : Ils sont issus des dégradés des couleurs essentiels du logo

Figure 19:Palette du couleurs secondaires

c. Typographie
La typographie, plus communément appelée police de caractères donne une forme visible à
une idée écrite. C’est un procédé de composition et d'impression sur les formes employées, en
relief, qui a pour but principal de contribuer à une harmonie thématique crée dans le jeu.

i. Police de titre
On estime que chaque police a sa propre personnalité. Dans ce sens, la typographie du logo
doit être les plus lisible et remarquable avec un effet Gras.

Police Anton

28
ii. Police de contenu
Ils sont basés sur les empattements qui sont des petites extensions terminant les extrémités des
caractères de diverses polices d’écriture. Ce style est employé surtout dans le textuel des
boutons, le texte-info, les questions et les réponses.

Police Markazi Text Police Amiri

Police Tajawal

Tableau 2: typographies de contenu

d. Ligne graphique
i. Styles des boutons
Sur l'exemple illustré par la capture ci-dessous, nous disposons d'une série de trois types de
boutons différents. Ils se distinguent par leurs formes, leurs couleurs. En effet, les boutons de
même fonctionnalité porte le même style. A propos le style employé, c’est le « matériel
design » qui renvoie à l’effet bombé du 3D, avec une texture d’éclat de lumière.

On a stylé aussi l'état de survol pour donner un feedback visuel à l'utilisateur quand l'état du
bouton change, par la réduction d’opacité de ce dernier.

29
Figure 20:Style des boutons

2. Charte sonore
C’est l’équivalent musical de la charte graphique. La charte audio facilite la reconnaissance
de notre jeu par le joueur enfant, pour garantir sa mémorisation, et ajouter une dimension
affective. On parle surtout de l’ambiance rythmée qui est ajoutée tout au long du jeu, connu
sous le nom logo sonore. C’est une variation d’un thème musical long qui crée un univers
musical original et identitaire.

Des effets sonores sont associés aux animations des éléments du jeu. Leur impact est favorisé
par la surabondance des messages visuels. De même effet que l’olfactif, l’auditif est un sens
qui a une grande qualité de résonance, en réveillant des sentiments uniques spécifiées à
chaque mouvement. L'environnement sonore joue un rôle essentiel dans le sentiment
d'immersion du joueur, a part qu’il peut servir à annoncer l’apparition ou la modification
d’une information visuelle donnée.

Dans le cadre de l’apprentissage interactive, Le fond musical employé suscite l’énergie, la


bonne humeur et la concentration du joueur apprenant. Ceci favorise la stimulation des
différentes zones du cerveau, entre autres la mémoire, l’attention, l’organisation de la pensée
et la capacité de l’enfant à contrôler certains comportements.

30
3. Mood Board

Figure 21:Mood Board du Tikkido

4. Story-board

Le joueur commence à jouer Il guide le bus vers l’avant suivant les flèches

31
le bus s’oriente vers le gauche Le bus avance tout droit

Le joueur possitionne correctement le bus Il réussit le premier niveau

La caméra s’arréte au niveau du tableau


L’entrée du joueur dans la classe de l’école
numérique pour lancer la partie suivante

32
Il regarder la video éducative animée puis
Le joueur choisit le cour déplace les lettres pour répondre au question par
le mot équivalent.

Une fois, le joueur termine toutes les questions,


On le félicite pour déclarer la fin du niveau.

IV. Conclusion :
Ce chapitre a porté sur la modélisation conceptuelle et graphique de notre jeu ce qui nous
permet de passer à l’analyse approfondie de notre jeu design et description de jeu.

33
Chapitre 3 : Design et environnement du jeu
I. Introduction
Après avoir établi la conception de notre jeu. On définit, dans ce chapitre, les éléments
graphiques, statiques et dynamiques du jeu. Et pour mieux décrire notre GamePlay, on
analyse les conditions de victoire et de défaite afin d’aboutir aux challenges à relever.

Et donc ce chapitre répondait à ces analyses en détail. D’une part, Il réside d’une description
détaillée des composants du jeu, d’autre part il établit le gameplay principal avec toutes ses
manifestations.

II. Eléments du jeu


Ils constituent tous les éléments intervenant dans l’environnement du jeu. Ces éléments ont
plusieurs manifestations, notamment, sous forme textuelle, ou graphique de type vectoriel, en
deux dimensions, isométrique, ou en trois dimensions.

Il existe également différents objets qui peuvent être décomposés en deux types d'éléments
principaux. On les classifie suivant deux types : statiques et dynamiques qui sont présentés
juste après.

1. Eléments statiques
Ce sont les premiers éléments que nous avons mis en place. Ils sont les fondements de chaque
scène de jeu.

On peut citer : l’école, la classe, la cité, l’arcade…

Figure 22:Envirenement de la ville

34
2. Eléments dynamiques
Ce sont les éléments dynamiques au cours du jeu tel que

- Le bus, l’avatar fillette, les tas de lettre, la caméra…

Figure 23:Avatar fillette en mouvement

Les vidéos éducatives : comme étant un élément dynamique, chaque vidéo présente un
personnage parlant du jeu. Par sa réplique, il diffuse des informations relatives à la question
proposée. Le vidéo change selon le concept de question, il dévoile un design variable qui
répond au concept du question.

Figure 24:Les deux avatars de vidéos éducatives

35
3. Eléments évolutifs
La théorie à laquelle basée notre jeu n'exige pas des joueurs qu'ils agissent de manière
rationnelle, mais seulement qu'ils aient une stratégie.

Les stratégies sont sous formes des traits qui contrôlent l'action du l’élément du jeu.

Le joueur contrôle le mouvement du bus qui est soumis à une gravité, influencé par sa masse
et sa vitesse dans un environnement qui subit aux lois physiques : la cité. Le joueur, va
parcourir tout le chemin tracé par les flèches (qui mène à l’école) afin d’y arriver. Le passage
au niveau suivant est conditionné par la réussite de la mission de conduite du bus.

Figure 25:Le bus en trois vues

Ses caractéristiques :

 Vitesse du mouvement : 1.5

 Gravité : 20

 État initial du bus : Le bus est en état de repos (de pause), positionné sur le bon
chemin, orienté vers la direction de l’école.

 État du bus (au cours du jeu) : Le bus subit le contrôle de saisie du joueur.

36
 Déplacer : le bus se déplace, en avant, à droite, à gauche pour changer de direction et
arriver à sa destination. Cette action se déclenche, une fois le joueur prend le contrôle
des boutons claviers, associée à ces actions.
 En pause : Lorsque le joueur relâche le contrôle des boutons.
 Bloqué : Lorsqu’il existe une collision avec un obstacle de la cité.

Figure 26:Le mode de collision entre le bus et l'entrée de l'école

Figure 27:Charte flow de la collision du bus

37
III. Conditions de victoire et de défaite
Cette partie consiste à connaitre les deux scénarios d’échec ou de réussite.

L’objectif : L’objectif principal du jeu basé sur la découverte, le passage d’un niveau à autre
jusqu’à compléter tout le niveau et fêter sa réussite.

Défaite : elle correspond, en général, à la perte de toutes les présences d'un esprit, la
destruction ou bien la mort du caractère du jeu.

Pour le 1er niveau : le joueur prend tout son temps pour découvrir la cité, et arriver à sa
destination. Il a la main de manipuler la direction du bus, même si il se dévie de son chemin,
il peut retourner et trouver sa route.

Pour le 2éme niveau : pour le concept de l’apprentissage numérique, l’enfant apprenant joue à
son rythme, prend tout son temps pour répondre. Il essaye et réessaye jusqu’à trouver la
bonne réponse.

1. Gameplay principale
Le gameplay Correspond à plusieurs facteurs du jeu tel que l’ergonomie, la façon dont on y
joue et la fluidité avec laquelle on accomplit certaines actions, etc...

Il regroupe l'acquisition d'informations sur la démarche et la situation in-game, notamment,


l’intuitivité des commandes et plus généralement la façon d'effectuer des actions que le joueur
accompli dans le jeu.

Le gameplay considéré, en relief, le nombre, le type et l'éventuelle évolution de ces actions.

Contrairement au roleplay, on s'intéresse ici presque uniquement à l'interface homme-


machine et à la façon dont elle permet l'immersion du joueur dans l'univers de l'œuvre.

2. Game Controls
1ére niveau : Le contrôle du bus se fait par les flèches directionnelles du clavier. Le joueur
utilisé les boutons droit, gauche, avant et arrière pour guider le bus et arriver devant l’école.

2éme niveau : il interagit avec les questions par l’insertion des lettres formant la réponse à la
bonne case. Ceci est contrôlé par le « Mouse Move » de la souris du joueur, notamment, le
click gauche enfoncé : pour placer les lettres dans le champ correcte.

38
3. Game Camera
A travers l’œil de la caméra, le monde du jeu est capturé, pour être vue par le joueur. En
personnalisant et en manipulant la caméra, On vise à présenter l’environnement suivant
l’angle de vue désirée.

1ér niveau : En effet, la caméra est positionnée au niveau des yeux du joueur (vue à la
première personne) : comme dans notre cas. Elle est relative au mouvement du bus, en se
pivotant suivant les saisies utilisateur. Cette technique est simulée à la technique de
« travelling » dans la cinématographie. On pouvait avoir un nombre illimité de caméras dans
la scène. Mais, On se contente pour une seule pour ne pas perturber l’attention du joueur-
enfant. La caméra peut être configurée pour s'afficher dans n'importe quel ordre, n'importe
où : sur l'écran ou seulement dans certaines parties de l'écran, Pour notre sujet, on a essayé
d’afficher l’intégralité de l’écran. Dans notre jeu, la caméra nous donne un plan en
mouvement, elle suit le bus jusqu'à ce qu'il atteigne l'école.

Figure 28:Position de la caméra

39
Figure 29:Vue de la caméra

Figure 30:Angle du la vue caméra

Deuxième niveau : A l’annonce du deuxième niveau, la caméra se lance automatiquement


pour traverser la classe. Une fois, on se croise avec le personnage de la fillette, la caméra
s’arrête à son niveau pour cadrer son mouvement (saluer le joueur). En arrivant au tableau
situé au fond de la classe, La caméra, en mode Zoom, permet de simuler un rapprochement
tout en agrandissant sa distance focale.

40
Tableau 3: Angle de vue Caméra par rapport à la distance focale

A cet instant, la caméra devient immobile, pour donner un plan fixe : celui du tableau
numérique. Tout au long de la partie du jeu, la caméra est fixée à un point frontal de la scène
indépendant du personnage (qui est vue à la première personne).

Figure 31:Caméra par rapport à la position de la fillette

41
Figure 32:Le rendu par le caméra

Figure 33:L'effet du zoome de la caméra sur le tableau

42
Caméra

Figure 34:La vue de la caméra en face du sujet

IV. Boucle d’objectif de Game Play


Par la boucle de gameplay, nommée aussi, « gameplay loop », pour conserver l'intérêt du
joueur, et aussi lui donner ce sentiment d'accomplissement quant à la fin d'un niveau, ou après
la résolution d'une énigme.

Une fois l'objectif réalisé, le joueur obtiendra une récompense : est la base de la progression
d’un jeu. C’est en quelque sorte la représentation schématique de la motivation du joueur.
Une boucle de gameplay est toujours constituée de 3 éléments :

Objectif : Pour susciter l'intérêt du joueur il lui faut un objectif plutôt, un but à atteindre : c’est
l’élément vers lequel la motivation du joueur est tournée. Dans ce contexte, on joue sur la
curiosité de l’enfant, pour dépasser le niveau actuel et découvrir le niveau suivant. De même,
pour la résolution des questions, il débloque, à chaque fois, une nouvelle vidéo portant
l’information sur la question suivante. A la fin, le joueur fête sa réussite, en répondant
favorablement à toutes les épreuves.

Challenge : Pour l'atteindre, il devra traverser des épreuves qui constituent « le challenge ».
C’est le défi ou l’épreuve auquel le joueur sera confronté comme l’arrivée à l’école,
placement de la lettre dans la bonne case, la constitution du mot exacte répondant à l’épreuve
en question. Notre challenge crée, est constitué de l’ensemble des bonnes actions (savoir
quand utiliser le Joker pour ne pas gaspiller son score),et des épreuves que le joueur doit
surmonter pour atteindre la fin du jeu.

Rewards : C’est l’objet mérité par l’effort du joueur. Satisfaire sa curiosité, est l’élément
stimulant qui va pousser le joueur à continuer de jouer. Une ambiance de félicitation

43
(animation des guirlandes avec une formule d’encouragement) se déclenche à la fin du
passage correct de chacun des deux niveaux. Ainsi, un score de (3O coins) lui est accordé.

Objectif à court terme : Guider le joueur pour aller à l’école

Figure 35:Boucle d’objectif gameplay à court terme

Objectif à moyen terme

Répondre à la question

Figure 36: Boucle d’objectif gameplay :répondre correctement au question

44
Figure 37 :Boucle d’objectif gameplay : Avoir un score suffisant

Objectif à long terme

Figure 38: Boucle d'objectif à gameplay :accéder à tout le contenu informatif

45
Flot et hiérarchie des menus

Figure 39:Flot et hiérarchie des menus

V. Analyse du jeu
Pour analyser notre jeu vidéo suivant les objectifs qu’on s’est fixé auparavant, on peut
considérer différents éléments :

1. Analyse stylistique
En fait, presque chaque type d’analyse passe plus ou moins par une analyse stylistique.

On se posera, d’abord la question: quelles sont les caractéristiques formelles remarquables


(images, sons, règles, jouabilité, interface matérielle, etc.) qui captent l’esprit du joueur?

46
On crée une harmonie visuelle, en termes de couleurs, puisque notre charte graphique
associée au logo, est appliquée aussi aux boutons et tout le texte affiché dans le jeu. Aussi, on
emploie un thème joyeux enfantin, de sorte que le joueur soit familiarisé avec le jeu même s’il
change d’environnement.

On a conservé la même ligne graphique des formes arrondies et fines pour exprimer la
flexibilité employé dans le jeu. On s’inspire, toujours, du logo, dans l’emploi des mêmes
couleurs vifs et apaisantes.

2. Analyse sonore
On s’intéresse aussi, au rôle du son, dans l’expérience utilisateur, afin d’accompagner le
joueur avec une ambiance rythmé. Le fond musical employé est de tonalité énergétique. La
voix-Off des vidéos informatives est bien optimisée avec une élocution verbale bien claire,
tout en respectant le temps de repos, entre une phrase et autre. L’effet sonore des boutons
aussi est harmonique avec chaque clic et la fonctionnalité qu’il déclenche, ensuite.

Analyse cognitive

L’analyse cognitive, cherche à comprendre de quelle manière le joueur interagit face à


plusieurs situations. Ceci joue un rôle important quant à la cognition du jeu. Il permet alors de
réfléchir à la manière dont une scène est construite pour créer certaines attentes chez le
joueur.

C’est l’un des intentions principales du jeu. Le joueur soumis à un environnement conditionné
où il doit répondre correctement à l’épreuve mise en question pour atteindre les questions
suivantes.

3. La nouveauté
La diversification de l’environnement du jeu, est un point fort de notre jeu. Ceci n’était pas
arbitraire mais plutôt, liée à un scénario hiérarchique :( le départ c’est la cité, l’arrivée à
l’école, l’entrée à la classe, la poursuite du tableau numérique). La complexité du jeu ensuite
augmente proportionnellement à l'évolution de la réponse du joueur aux questions d'un niveau
à l'autre. Le score qui lui est attribué (de base), s’incrémente automatiquement après chaque
bonne réponse, mais, se décrémente à chaque utilisation du Joker. Ce dernier lui propose une
lettre qui constitue la bonne réponse.

47
Acteur Interaction Conditions Action Utilité

La découverte de
Avancer avec le bus par Le joueur conduit
l’environnement du
Joueur Guider le bus les boutons du clavier. le bus
jeu.

Acheminer le bus
Suivre le bon chemin L’arrivée du bus
en le positionnant
Joueur Arriver à l’école jusqu’à l’arrivée. devant l’école.
correctement

Le bus traverse le
Collusion avec le Le passage au niveau
parking de
Bus Collusion périmètre de l’école. suivant.
l’école.

Le joueur apprend
Il peut regarder la l’information et se
Utiliser le click souris
Regarder la vidéo vidéo à plusieurs renseigne de la
Joueur « Mouse Events »
éducative. reprises. question en regardant
la vidéo éducative.

Le joueur accédé à
L’avatar place les
toutes les vidéos en
Placer les lettres avec le lettres
répondant
Répondre aux click gauche de la correctement dans
Joueur correctement aux
questions. souris. les champs
questions pour réussir
équivalents.
tout le niveau.

Tableau 4: Nouveauté du jeu entre action et interaction

VI. Conclusion :
Cette section a été consacrée à la description, l’analyse de notre jeu, y compris,
l’environnement, les caractères, les éléments visuel et sonores mises en scène. On a mis en
valeur, le gameplay avec ses objectifs et ses challenges.

A travers cette étude, nous sommes arrivés à calculer notre capacité de production, à fixer
notre stratégie de jeu, en vue du scénario périvisuel réalisé.

48
Chapitre 4 : Réalisation
I. Introduction
On a procédé à la mise en œuvre du jeu, par l’étude détaillée de sa faisabilité technique.
Comme le titre de ce chapitre l'a déjà indiqué, nous citons l'environnement matériel et logiciel
utilisé avant de clôturer notre mémoire.

En demandant surtout de la rigueur et de la méthode, en validant, également, la conformité


entre nos choix techniques et le travail réalisé, On détaillait, dans ce chapitre, les étapes de
réalisation pour notre développement jeu.

II. Environnements et technologies utilisées


Dans cette partie on va citer le matériel et les logiciels utilisé au cours de développement de
jeu.

1. Environnement matériel
Durant tout le processus de notre projet, nous avons utilisé deux ordinateurs portables ayant
les caractéristiques suivantes :

Caractéristique Ordinateur portable


Marque ASUS
Processeur Intel Core™ i3 CPU 8th Gen avec SSD
RAM 8.00 Go
Carte Graphique NVIDIA GeForce Mx110
Système exploitation Windows
Type de système 64 bits
Tableau 5: Caractéristiques du 1er PC

Caractéristique Ordinateur portable


Marque Acer
Processeur Intel Core ™ i7 10th Gen
RAM 8.00 Go
Carte Graphique NVIDIA GeForce Mx 230 avec 2GB VRAM
Système exploitation Windows

49
Type de système 64 bits
Tableau 6: Carréctéristiques du 2éme PC

2. Environnement logiciel
Le choix de l'environnement logiciel est un challenge car il nécessite l'utilisation de différents
logiciels tels que des logiciels de traitement d'images, logiciel de montage vidéo, logiciel de
modélisation, logiciel de développement, et enfin des moteurs de jeux.

a. Design graphique
i. Photoshop :
Photoshop est un langage d'édition, de traitement et de dessin assisté par ordinateur par
Adobe. Il est principalement utilisé pour le traitement des photos numériques. Il fonctionne
essentiellement avec des images raster car l'image se compose d'une grille les points sont
appelés pixels. Le but de ces images est de reproduire des dégradés subtils couleurs. Nous
utilisons ce logiciel principalement pour crée le logo de notre jeu et de transformé notre avatar
en dessin cartoon.

Figure 40:Logo Adobe Photoshop

b. Conception et animation 3D
ii. Blender :
Blender est un logiciel gratuit de modélisation, d'animation et de rendu 3D créé en 1998.
Actuellement développé par la Fondation Blender.

Depuis 2019, le logiciel Blender est de plus en plus reconnu par les entreprises du domaine de
l'animation 3D, comme Epic Games, Ubisoft et NVIDIA2,3,4.

Il fournit des capacités de modélisation avancées (y compris la sculpture 3D, la texturation


UV et le dépliage, etc.), l'animation 3D (rigging, Blend, shapes) et le rendu (sur GPU et
CPU). Il gère également le montage vidéo non linéaire, la composition, la création de
matériaux nodaux et diverses simulations physiques telles que les particules, les corps rigides,

50
les corps mous et les fluides. Ses fonctionnalités sont également très extensibles grâce au
système de plugins (plugins). Nous avons choisi ce logiciel car il est gratuit et open source.
Blender est un excellent choix pour les débutants qui souhaitent apprendre à utiliser un
logiciel graphique 3D. Parce qu'il permet aux débutants de commencer à apprendre des tâches
graphiques 3D. En outre ce logiciel, nous permet également exporter des fichiers Blender vers
d'autres formats.

Figure 41:Logo Blender

c. Montage vidéo
iii. Adobe Premiere Pro :
Adobe Premiere Pro est la suite de logiciels de montage vidéo d'Adobe. Il fournit des
fonctionnalités avancées pour éditer et retoucher des vidéos pour faire des montages. Premiere
Pro est l'un des outils de référence pour les éditeurs vidéo, utilisé par de nombreux
professionnels du cinéma, de la télévision et du web.

Cette application d'édition est idéale pour combiner des vidéos. On peut également
synchroniser des pistes audios et traiter l'audio dans Premiere Pro. Nous avons utilisé ce
logiciel afin d'éditer les vidéos éducatives.

Figure 42: logo adobe premier pro

51
d. Développement jeux
i. Unity :
Unity3D est un puissant moteur 3D multiplateforme et un environnement de développement
convivial. Assez simple pour les débutants et assez puissant pour les experts. Cette unité nous
intéresse nous-même et tous ceux qui souhaitent créer facilement des jeux et des applications
3D ou 2D pour mobile, ordinateur de bureau, Web et console.

Nous avons choisi Unity 3D pour 3 raisons :

 Unity est la meilleure application pour le développement de jeux. Très efficace lors du
rendu de scènes 3D. En cette ère de plaisir visuel, U fonctionne bien pour le rendu
d'images 3D. La qualité offerte est également relativement bonne par rapport aux autres
applications.
 Le moteur de jeu Unity est également plus facile à utiliser que de nombreuses autres
technologies. Il existe de nombreuses autres techniques complexes qui deviennent plus
difficiles lorsque nous les utilisons. Il est une exception ici.
 Unity est un endroit idéal pour interagir avec d'autres utilisateurs et développeurs.
Unity dispose également d'une énorme base de données de didacticiels et de
documentation pour nous permettre de rechercher les différentes fonctionnalités que
nous pouvons utiliser pour développer notre jeu.

Figure 43: Logo Unity 3D

ii. Visual code studio :


Visual Studio : Pour écrire les scripts de jeu, nous avons utilisé Microsoft Visual Studio,
l'environnement de développement intégré (IDE) de Microsoft. Il est utilisé pour développer
des programmes informatiques. Visual Studio utilise les plates-formes de développement de
logiciels Microsoft telles que l'API Windows, Windows Forms, Windows Presentation
Foundation, Windows Store et Microsoft Silverlight. Il peut générer du code natif et du code
managé.

52
Figure 44:Logo Visuel studio

4. Langage de programmation
C#” Sharp” : est un hybride de C et C++, c’est un langage de programmation Microsoft
développé pour concurrencer le langage Java de Sun. C# est un langage de programmation
orienté objet utilisé avec les services Web basés sur XML sur le. NET et conçu pour
améliorer la productivité dans le développement d’applications Web et le développement de
jeux.

Figure 45:C Sharp

53
III. Réalisation du jeu

Tableau 7: Les taches du jeu

1. Création des vidéos éducatives


a. Conception et animation des avatars
Les illustrations sont de plus en plus utilisées pour créer un univers graphique ludique et
engageant. Tout à fait comme les bandes de dessins animés, On a conçu nos propres avatars
pour ajouter de nos personnalités et de l’originalité à note jeu. A partir de nos photos réelles
en mode portrait, on a recopié nos traits de visage ligne par ligne, ensuite, on a replissé les
formes avec les teints équivalents. Et, pour raffiner nos graphiques, on a ajouté de l’ambre, et
l’effet de lumière pour un résultat plus authentique. La transformation graphique est présentée
dans les figures suivantes :

54
Figure 46:Photo du premier personnage avant et après effet dessin anime

Figure 47: Photo du deuxièmes personnage avant et après effet dessin anime

b. Montage vidéo et Motion Design


Donner vie à nos avatars, était vraiment un défi pour nous. Ça demande de la précision et la
rigueur, surtout, quant ’à la synchronisation du voix-Off avec la locution verbale et
dynamique des avatars. A différentes reprises, On réalise l’animation de la bouche et yeux par

55
interpolation de mouvement. Cette technique est appelée motion Design, qui est appliquée
aussi sur la silhouette du visage pour un résultat parfait, plus réel.

Figure 48:Animation de l'avatar

L’étape suivante, est d’ajouter toute une scène graphique pour la vidéo informative. En
répondant au sujet mis en question, qui est dans cet exemple à propos la circulation sanguine.
Pour mieux décrire ce processus et synchroniser le visuel avec l’information parlée. On crée
l’animation représentée par les figures ci-dessous :

56
Figure 49: Animation du cœur par rapport à la circulation sanguine

2. Animation des éléments 3D


a. Animation par Blender
On cite l’exemple du mouvement de l’avatar fillette qui salue le joueur à son entrée dans la
classe. Pour cela, on fusionne l’armature au sein du corps de l’avatar fillette, on ajoute
« l’Os’ » à sa main afin d’appliquer les transitions du mouvement par « images clés ». En

57
modifiant les paramètres d’origine armature, position des os par rapport à la main, de rotation
partielle des doigts, L’avatar effectue avec réussite, le mouvement de salut.

Pour de l'organique, la complexité réside dans technique dont les articulations de l'armature
vont déformer le maillage qui les habilles. Il faudra que ce maillage ait une certaine élasticité
pour simuler, le plus possible, le comportement mécanique de la main conçu en 3D.

Figure 50: Animation de la fillette par armature

b. Animation par Unity


Après avoir importé les animations depuis Blender, par l’outil d’importation d’Unity. Le
composant Animator prend comme argument le contrôleur Animator. Celui est un fichier qui
contrôle la transition entre l’animation de marche à l’animation d’exécution ou l’animation
inactive.

Figure 51: Unity Animator controller

58
Figure 52: Unity inspector, Animator

3. Développement des scripts


a. Script du 1 er niveau
La conduite du bus par les saisies utilisateurs se fait au niveau du script suivant, qui permet de
contrôler sa vitesse et ses directions.

Figure 53: Script du 1 er niveau

59
b. Script du 2ème niveau
Ce script permet de vérifier les lettres de mot formé afin de valider ou non la réponse du
joueur.

Le code suivant est un extrait de la fonctionnalité du Joker, il est exécuté lors de la demande
du Joker, on vérifie si le joueur avait suffisamment de score. Si c’est le cas, le système lui
affiche la première lettre de la réponse, sinon un message de non disponibilité du Joker, sera
affiché.

Figure 54: Script de 2 eme niveau

60
IV. Interfaces graphiques
L’interface d’accueil, comme étant la vitrine de notre jeu, dispose d’un logo, slogan et trois
boutons paramétrables. Ces boutons : Audio et Exit ont les actions suivantes : modifier le
volume du son et quitter le jeu.

Figure 55: Interface d'accueil

Figure 56: Interface modifier volume

Les deux interfaces suivantes dévoilent notre premier environnement de jeu : la cité, d’où on
donne la main au joueur de conduire le bus à fin d’arriver à l’école.

61
Figure 57: interface du départ du bus

Figure 58: Interface d’arrivé du bus à l'école

Une fois, il arrive, l’animation de son entrée à la classe, se lance automatiquement.

Figure 59:Entrée de l'avatar dans la classe de l'école

62
Là, ou commence le deuxiéme niveau, en se rapprochant du tableau numérique. On donne
l’accés, de nouveau, au joueur qu’on le nomme à cette étape par « l’enfant entrepreneur ».
Tout d’abord, il lance ce niveau en cliquant sur le bouton représenté si-dessous.

Figure 60: Interface continue

Ensuite, Il choisit le thème qu’il voulait pour accéder à ses leçons en répondant à ses
questions.

Figure 61: Interface du choix du cours

La première leçon portante sur la circulation sanguine commence, la vidéo présente une
simulation graphique animée du processus. Ceci est commenté par notre avatar parlante, qui
pose sa question à la fin de la vidéo.

63
Figure 62: Interface du cours

Une fois, que le joueur place correctement les lettres qui expriment la bonne réponse,
son score de base (qui était 50 coins) s’incrémente avec ce même chiffre. Et, donc l’animation
suivante s’apparait dans la même interface.

Figure 63: Interface de réussite question

Face à une épreuve difficile, le joueur peut faire recourt au Joker. Pour cela il lui faudrait (au
moins 20 coins) pour que cette solution soit fonctionnelle.

64
Figure 64: Interface de demande d’aide

A la résolution de toutes les épreuves du même thème mise en jeu, le joueur est félicité pour
ses efforts en lui invitant à jouer un autre thème. L’animation mise en jeu est représentée dans
l’interface ci-dessous :

Figure 65:Interface de réussite d’un thème

65
VII. Apports et Evaluations
1. Apports
Ce projet de fin d’études nous a éclairci et approfondi pas mal de connivences et concepts que
nous avons acquis tout au long de nos études à l’ISITCOM :

 Etude du langage de conception UML


 Savoir développer des sites web dynamiques par l’acquisition du langage HTML,
CSS, Javascript, Java, Angular, SpringBoot et du langage SQL pour la base de
données.
 S’avoir utilisé le logiciel 3ds Max et Unity 2d.
 Design graphique et montage vidéo.

D'autre part, nous enrichissons notre apprentissage par la recherche et l'expérience initiée au
sein de l'entreprise SOFT Camel Solution :

 Créez des jeux vidéo à l'aide du moteur de jeu Unity3D.


 Modéliser et animer des éléments 3D avec Blender.
 Coder en du langage C Sharp.
 Rencontrer des personnes qualifiées dans le domaine développement de jeu.

2. Evaluations
L'évaluation est une étape importante dans la création d'une bonne application ou d'un bon
jeu. L'évaluation est divisée en évaluation quantitative et évaluation qualitative, je vais donc
commencer par une évaluation qualitative.

a. Evaluation qualitative
En réalisant ce jeu, nous avons pu appris et élargi nos connaissances en surmontant certaines
difficultés dans le moteur Unity, en maitrisant le langage de développement C#,la
modélisation, l’animation 3D, et en implémentant du son et de la musique dans notre jeu.

66
b. Evaluation quantitative
Dans notre projet nous avons créé :

4 Animations : avatar, camera zoom ,2 animation quiz

7 Scènes : scènes composées d’éléments 3D/2D, de texture, d’éclairage.

25 Scripts C#

2 Levels, 3 Menu

3 Caméras

9 Audios sources

2 Effets

VIII. Conclusion :
Dans ce chapitre, nous avons présenté l’environnement matériel et logiciel de notre travail, en
décrivant les principales interfaces du jeu.

ON clôture enfin par la présentation nos apports et une évaluation porté à ce projet.

67
Conclusion Générale
Notre formation réunit entre les technologies du web et multimédias. Dans ce contexte, et à la
première occasion d’un projet de fin d’études, on a choisis de développer un jeu 3D pour des
fins éducatives. Vu que le développement de jeux vidéo est le processus de combinaison entre
l’art médiatique et le développement, de la conception graphique, informatique, et la
conception 3D, on passe par le montage des vidéos éducatives, vers la programmation et le
test du jeu vidéo.

Notre jeu ramène l’enfant-apprenant dans une aventure équilibré entre la pratique du jeu et la
théorie des vidéos éducatives. Dans une simulation en 3D de la ville qui la traverse, l’enfant
conduit le bus pour arriver à l’école: On lui donne la main à découvrir l’environnement du
jeu. Comme le jeu est conçu d’une manière hiérarchique, une animation l’accompagne, dès
son entré à la classe, jusqu’à son arrivé devant le tableau numérique. Là où commence le
deuxième niveau, qui dévoile le concept de base de notre jeu. C’est l’apprentissage numérique
par réception de l’information diffusé sous forme des vidéos animées. L’enfant apprenant
répond aux questions mises en jeu par la formation du mot correspondant, à travers les lettres
proposées. Pour motiver le joueur à continuer toutes les vidéos de chaque thème, on lui
attribue un score qui s’incrémente automatiquement lors des bonnes réponses. Néanmoins, ce
score se décrémente à chaque recourt au Joker. En fait, Le joker, à chaque utilisation, dévoile
une lettre de la réponse correcte. De ce fait, les solutions existent toujours mêmes face aux
épreuves difficiles. Vers la fin de notre mémoire, nous voulons mettre en valeur le travail
réussi de point de vue étude de projet et ses nécessités, conception graphique, informatique et
sonore, réalisation jeu et vidéos. Ceci nous a menés à bien maitriser ce domaine, en plein
essor, et assumer une certaine responsabilité professionnelle lors de notre stage. On vise, par
la suite, à adapter notre jeu au programme scolaire du niveau primaire et enrichir note contenu
informatif animé pour que cette solution soit appréciée par les instituteurs et jouée par les
élèves en quête de savoir.

68
Bibliographique
[1] https://www.academia.edu/ Le numérique à l’école de Tunisie

[2] https://thd.tn/gaming-en-tunisie/ Le futur du développement jeu en Tunisie

[3] https://www.semanticscholar.org/ La conception d'un jeu vidéo

[4] http://www.wittywings.fr/ La production du jeu vidéo

[5] https://www.logicieleducatif.fr/ Efforts technologiques fournis dans le domaine éducative

[6] https://blender.com/ Blender

[7] https://unity.com/ Unity

[8] https://www.adobe.com/fr/products/photoshop.html/ Photoshop

[9] https://www.adobe.com/products/premiere.html/ Adobe premiére

[10] https://www.sounds-resource.com/ Ressource du son exploité dans le jeu

69
Résumé
Ce travail s’inscrit dans le cadre de l’accomplissement de notre stage de fin d’étude à Institut
supérieur de l'informatique et des technologies de la communication (ISITCOM). Le stage a
eu lieu dans la société Camel Soft ayant comme objectif la réalisation d’un jeu vidéo 3D
pour des fins éducatives. Notre objectif principal c’était l’intégration des vidéos éducatives
dans un environnement de jeu complémentaire aux motivations de l’enfant-apprenant.

Mot clé : Jeu vidéo ,3D, vidéos éducatives , enfant entrepreneur.

Abstract
This work is part of the completion of our end-of-study internship at the Higher Institute of
Information Technology and Communication Technologies (ISITCOM). The internship took
place in the company CamelSoftwith the objective of creating a 3D video game for
educational reasons. Our main objective was the integration of educational videos in a play
environment complementary to the motivations of child learning.

Key words : video game ,3D, educational videos, child learning.

70

Vous aimerez peut-être aussi