CINE QUIZZ DARAGON Maxime TABIT Jordi VALLEE Brice SI28
TABLE DES MATIERES 1. CONCEPT... 2 2. OBJECTIFS... 2 3. PUBLIC-CIBLE... 2 4. RESSOURCES MEDIAS... 2 5. STRUCTURE ET NAVIGATION... 3 6. FORMES ET DEGRÉS D INTERACTIVITÉ... 4 7. CHOIX TECHNIQUES ET DIFFICULTÉS... 4 1. CHOIX TECHNIQUES... 4 2. DIFFICULTÉS... 4 8. BUDGETISATION... 5 9. SCÉNARIO... 5 10. STORY-BOARD... 6 1. CHARTE GRAPHIQUE... 6 2. INTERACTIVITÉ... 9 3. INTÉGRATION DU SON... 11 11. RÉALISATION... 12 1.DESIGN GRAPHIQUE ET PREMIER TABLEAU... 12 2.LES PREMIERS TESTS... 12 3.OPTIMISATION... 12 CONCLUSION... 13 1
1. CONCEPT «Ciné Quizz» est un quizz cinématographique basé sur le principe d indices-réponses en interactivité avec le joueur. Le jeu est basé sur la recherche du titre d un film à partir d indices tels que des extraits musicaux, des phrases cultes, des décors, des personnages, des accessoires Il se veut à la fois ludique et pédagogique. 2. OBJECTIFS Le contenu de «Ciné Quizz» visera un public large, une connaissance cinématographique sera requise sans demander un haut niveau et l interface du jeu devra se montrer intuitive. Ayant pour terminologie de développer une véritable dimension interactive avec les joueurs, le jeu utilisera plusieurs technologies qui permettra d interagir avec l utilisateur en sélectionnant aléatoirement un nombre de questions-réponses dans une base de données, et Flash, éventuellement JavaScript, qui permettront de dynamiser, d animer l interface de jeu. Ce test ludique obtiendra par ces technologies un côté à la fois artistique et compétitif/social. Ce quizz cherche à faire ressentir certaines émotions que l on a associées à tel film lors de sa visualisation et apporter des connaissances cinématographiques ou l envie de voir certains films. 3. PUBLIC-CIBLE Afin de rendre accessible Ciné Quizz à un maximum de personnes, le jeu visera un public large, et non uniquement une certaine «catégorie» de personnes. Plus précisément, les seules compétences requises seront de savoir accéder à la plateforme du jeu par l intermédiaire d un navigateur Web. Le jeu se montrera assez facile d accès et intuitif afin que la quasi-totalité du public puisse commencer à se divertir (tout en apprenant!) dans la minute suivant l accès au jeu. Le joueur pourra comparer ses connaissances à celles des autres grâce à un score final obtenu (sur un même ordinateur). 4. RESSOURCES MEDIAS Ciné Quizz exploitera plusieurs ressources médias, parmi lesquelles des vidéos, du son, des images et du texte. Le texte, l image et le son constituent les parties les plus importantes du jeu. En effet, c est avec ces ressources que seront présentées la totalité des films contenus dans la base. A ce stade d avancement du projet, nous pensons intégrer environ une trentaine de films à trouver. De plus, le sommaire sera pourvu d un lien permettant d accéder à une présentation générale de Ciné Quizz, les règles du jeu, et l accès au jeu. Les devinettes de film seront souvent accompagnées d animations audiovisuelles, généreusement agrémentées d images, de vidéos et de sons. 2
De la qualité des films dépendront une grande partie de la qualité et de l intérêt du jeu, car ces dernières représentent le «contenu» de cette plateforme de jeu. Concrètement, chaque film requiert un ou plusieurs «médias». Par exemple, pour chaque film vous aurez le choix entre plusieurs indices à choisir afin de deviner le film à trouver. A l aide d un extrait de film, d une bande son, d objet représentatif et d autres indices, le joueur devra tenter de deviner quel film se cache derrière les indices sélectionnés. Chaque indice aura un nombre de points attribué en fonction de l aide qu il apportera au joueur dans sa recherche. Si l indice est trop évident il coûtera beaucoup de points par contre si l indice est compliqué et qu il faut absolument avoir vu le film il coûtera moins de points. Le principe du jeu est qu à la fin le joueur a trouvé tous les films en engrangeant le moins de points possibles. Plus il aura utilisé les indices difficiles qui valent le moins de points, plus son score final sera élevé et donc meilleur. Nous attribuerons des points lorsque le joueur trouvera la bonne réponse et en fonction du niveau de difficulté le film changera de valeur de point. Les niveaux iront de facile avec 100 points attribués, moyen avec 250 points et difficile avec 500 points. Le design, l ergonomie et l interface du jeu, se veut accueillant, pratique et intuitif à l usage. Ces dernières seront réalisées grâce à de nombreuses images et illustrations. 5. STRUCTURE ET NAVIGATION Lors du lancement du jeu, le joueur découvre le logo de Ciné Quizz avec trois choix disponibles : «Jouer», «Règles du Jeu», et «Crédits». L interface permettra à la fin du jeu de retourner à la page d accueil. Pour quitter le jeu, il suffit d utiliser la commande de fermeture en haut à droite de la fenêtre. 3
6. FORMES ET DEGRES D INTERACTIVITE INTERACTIVITE FONCTIONNELLE Un «dialogue» entre le joueur et l ordinateur se met en place sous forme d indices-réponses. Trois formes d interactivité seront présentes dans Ciné Quizz : - Accéder : le joueur passe de questions en questions tout au long du jeu ; - Produire : le joueur doit entrer le nom du film ; - Manipuler : le joueur choisit un indice parmi ceux qui sont proposés avec un drag-and-drop. 7. CHOIX TECHNIQUES ET DIFFICULTES 1. CHOIX TECHNIQUES L interactivité permettant de gérer, de manière aléatoire, les indices-réponses, ainsi que la synchronisation de celles-ci avec les sons et clips vidéos (à un film particulier doit correspondre exactement son média!) sera confiée à Adobe Flash. Les indices-réponses ainsi que les liens vers les médias seront stockés dans Flash. Adobe Flash sera utilisé dans la majorité pour mettre en place le jeu, implémenter les sons et les vidéos lors des questions. Il faudra réfléchir à la question de compatibilité des versions de FlashPlayer avec la majorité des joueurs. Audacity servira à enregistrer les sons et les convertir en.mp3 pour les rendre utilisables par Adobe Flash, Adobe Photoshop sera utilisé pour la retouche d images, et Adobe Illustrator pour le design de l interface ainsi que le design des indices. 2. DIFFICULTES Aucun des membres de l équipe n a connaissance de Flash, en tant qu IDE (Integrated Developement Environment). Flash est le logiciel majeur dans la configuration de notre projet. L autre difficulté est le temps de développement en plus du temps d apprentissage. Le projet se doit d être suffisamment ambitieux (Flash, Illustrator, Photoshop, Audacity ), mais il doit avant tout rester réalisable dans le temps qu il nous est imparti. La dimension graphique est très importante dans ce jeu car c est elle qui suscitera l intérêt au jeu ainsi que la qualité des films. Nous allons essayer de pousser sur ce point-là du jeu afin de rendre plus attractif au possible notre Ciné Quizz. Enfin, le choix des films sera primordial dans la réalisation du jeu ainsi que des indices choisis pour chaque film, car la qualité des films et de ses indices influera fortement sur la qualité générale perçue de l ensemble du projet. Il faudra bien réfléchir aux rapports texte-son-image-vidéo (concurrence, complémentarité, redondance, ) : c est l intersémiotisation des médias. Le développement du projet se fait sur un semestre à l UTC ce qui laisse environ 2 mois pour la conception. 4
8. BUDGETISATION Nous ne disposerons pas de budget alloué pour ce projet. L ensemble des logiciels utilisés pour la réalisation sera ceux mis à disposition par l UTC. Ici, le budget n est pas notre souci mais dans un projet professionnel, c est celui-ci qui conditionne la réalisation du produit. 9. SCENARIO Le scénario de notre jeu se compose en majeure partie des indices proposés aux joueurs. Ciné Quizz compte environ une dizaine de films avec différents niveaux de difficulté. Chaque film a un total de points en indice de 500 points et selon la difficulté des indices ils n ont pas le même équivalent en point. Plus l indice aide à trouver le film et plus il vaut de points. Le principe du jeu est de trouver les films en utilisant le moins de points possible donc en utilisant les indices dits «plus compliqués». Chaque film comprend 6 indices avec une affectation de valeur de point selon sa difficulté. Les indices sont à chaque fois : 3 indices se plaçant sur le personnage central de l écran qui représente généralement le personnage principal du film avec les objets ou tenue qu il est susceptible d utiliser dans le film en question ; 2 indices sonores dont le morceau de la bande originale le plus connu du film et une des phrases cultes du film qui donnera tout de suite une idée du film ; 1 fond d écran représentant un lieu du film ou un moment du film permettant de situer le personnage. Les indices utiliseront des ressources visuelles, sonores et temporelles qui apportent plusieurs dimensions au jeu et donc une attractivité dans l utilisation et la pratique du jeu. Au début du jeu, nous essayerons de développer le fait que le personnage explique les règles avec une animation. Le personnage arriverait sur le plateau de cinéma en marchant et se positionnerait au centre du plateau sur l écran vert. Il expliquerait ensuite la manière de jouer et d être le plus efficace possible. Il montrerait les icônes sur lesquelles le joueur devrait cliquer pour les révéler et le but du jeu comme quoi il faut terminer avec le plus de points possible et donc utiliser le moins d indices possible. Et ensuite il laisserait place au joueur de pratiquer. A la fin du jeu, le score du joueur s affichera avec un message décrivant le niveau de sa culture cinématographique. 5
10. STORY-BOARD 1. CHARTE GRAPHIQUE a. Typographie La typographie a été choisie pour donner une unité à l ensemble du projet : La police d écriture est le Verdana pour l ensemble des textes : police sans empattement qui ne parasite pas la perception globale de l image ; Les textes des boutons de navigation sont tous en police noire sur fond jaune, en caractère majuscule ; Les couleurs ont toutes la même teinte, issue d Illustrator. Cela participe à créer une unité graphique. b. Styles graphiques Le jeu est entièrement réalisé en 2D. Ce choix a été pris car nous avons réalisé l ensemble des dessins nous-même et que nos compétences dans ce domaine ne nous permettaient pas d envisager de produire un jeu de qualité en 3D. L ensemble des éléments visibles à l écran (décors, accessoires, ) ont tous été réalisés sous Illustrator en utilisant des couleurs simples. Le but étant de donner une unité graphique au jeu. Un rendu visuel 2D type dessin vectoriel Seuls les indices background ont parfois été réalisés à partir de retouches photos. Les retouches ont été faites dans l optique de respecter au maximum l ambiance «dessin» du jeu à l aide de Photoshop. Mais nous avons essayé de créer la plupart de nos fonds pour garder l identité dessin. 6
c. Interface Exemple de retouche photo (en haut l image de départ, en bas le résultat) Mise en scène globale Nous avons traité la mise en scène de manière à ce qu elle rappelle l organisation d un studio de tournage. Le personnage est ainsi entouré d une toile unicolore, élément très utilisé en studio pour tourner les scènes à effets spéciaux. Nous avons également intégré du mobilier adapté : projecteur, réflecteur, clap de film. La zone servant à accueillir le texte rappelle aussi la devanture des anciens cinémas. Pour intégrer les différents indices, nous avons placé une étagère regroupant les indices à associer au personnage, deux enceintes projetant le son des musiques de film et les phrases cultes et le fond d écran unicolore permettant d afficher le fond du film. 7
Image de base avant révélation des indices du film Traitement particulier de la page d accueil Le logo a été créé avec une attention particulière : Couleurs verte, jaune, bleue reprenant celles de l espace de jeu ; Le Q de CinéQuizz représenté par une bobine de film, donnant une représentation visuelle du sujet de jeu ; On peut accéder aux règles du jeu, au jeu et aux noms des concepteurs. Vue de la page d accueil 8
2. INTERACTIVITE a. Traitement des indices Nous voulions faire ressortir les points attribués aux différents indices. Nous avons choisi un bleu très marqué permettant d orienter le regard du joueur vers ceux-ci lorsque l écran apparaît. Ensuite, en survolant l écran avec la souris, l utilisateur comprend intuitivement qu il doit cliquer sur les éléments graphiques associés : au survol de la souris, ces éléments grossissent et incitent l utilisateur à cliquer. Grossissement des zones cliquables au passage de la souris Quand l utilisateur décide de cliquer sur un indice, son apparition se fait directement au bon endroit (un chapeau apparaîtra sur la tête du personnage, une veste sur son torse, ). Nous laissons ensuite la possibilité de faire des drag-and-drop avec ces objets afin d offrir un contenu manipulable et donc plus attractif et interactif. Apparition des indices directement sur le personnage 9
b. Passage d un tableau à un autre Tant que l utilisateur n a pas trouvé le film ou n a pas utilisé tous les indices, il ne peut que «passer», et donc abandonner le film en cours. Lorsqu il trouve ou se décide à abandonner, un nouveau bouton lui indique qu il peut passer au film suivant. Le passage d un tableau à l autre se fait donc intuitivement. Apparition du bouton SUIVANT Aussi, un joueur n aura pas forcément besoin d utiliser tous les indices pour trouver le film. Ainsi, afin qu il ne soit pas frustrer de ne pas avoir vu tous les éléments, tous les indices apparaissent automatiquement à l écran lorsqu il trouve le nom du film mais aussi s il ne le trouve pas et est obligé de passer le film. Apparition du tous les indices 10
c. Ecran des règles Écran énonçant les règles du jeu Il a été pensé pour rester le plus simple possible : Texte limité à l indispensable ; Représentation graphique des différents éléments d interactivité. Le ton employé est lui, très jovial : utilisation des points d exclamation, de phrases courtes à l impératif La lecture des règles ne s apparente ainsi pas à «la corvée» du jeu : elle permet d appréhender en un coup d œil la jouabilité avec laquelle l utilisateur va devoir évoluer. 3. INTEGRATION DU SON a. Son d ambiance Un son d ambiance a été mis en place pour le menu, puis pour le jeu. Ces boucles auditives très simples contribuent à plonger le joueur dans l univers du jeu. b. Sons liés aux indices Chaque film a deux indices sonores : un extrait de chanson et un extrait de dialogue. Toutes ces pistes sont issues de différents enregistrements et n avaient pas le même volume de son en sortie d enregistrement. Audacity a donc été utilisé afin d égaliser le volume des différentes pistes et uniformiser l écoute des sons sans avoir à changer le volume à chaque extrait différent. 11
11.RÉALISATION Ce jeu a donc été réalisé à l aide du logiciel de la suite Adobe : Adobe Flash. Ce logiciel permet de concevoir des animations vectorielles, de les séquencer, de les mettre en forme et d en exporter une en exécutable applicatif. Cet outil impose un certain cadre de travail, celui de travailler à l aide d une «time line» (vision temporelle/séquentielle du jeu) tout en découpant les différentes vues en «scènes» (nous parlerons ici de «tableaux»). 1. DESIGN GRAPHIQUE ET PREMIER TABLEAU CinéQuizz a vu son développement commencer par l implémentation d un premier «tableau» (Le bon, la brute et le truand) permettant de mettre en place les interactions possibles avec les différents éléments d une scène, de tester plusieurs présentations de l interface à l utilisateur ainsi que de concevoir la première architecture des menus. Il y avait à ce stade un prototype fonctionnel. C est lors de cette première étape que le jeu a trouvé la plus part de son identité graphique. En effet, le tableau cité précédemment a d abord vu ses composantes graphiques déterminées avant d être conçu au sein de Flash. 2. LES PREMIERS TESTS A partir de ce tableau, des premiers tests ont été effectués sur des étudiants du TD et ont révélé que l interface comportait quelques ambiguïtés (ex : les accessoires «drags and drop» ), mais que certains éléments étaient relativement bien intégrés au décor et étaient appréciés (ex : l interrupteur de lumière). Suite à cela, des modifications ont été apportées à l interface. Une fois le code technique du script complètement implémenté (listeners, etc.), il a été possible de s attarder sur la suite du contenu du jeu. C est alors qu a débuté la réalisation de différents éléments de tableaux concernant d autres films conçus sur Adobe Illustrator - suivie de près par leur intégration au sein du projet Flash initial. La version alpha de CinéQuizz était terminée. 3. OPTIMISATION Une fois cette première version réalisée, un besoin d enrichir le jeu d un point de vue animation s est fait ressentir. C est de cela qu une réflexion est née pour décider des ajouts devant/pouvant être réalisés pour chacun des tableaux, encore une fois, d un point de vue animation pour ajouter du vivant au jeu. 12
De plus, la charte graphique ainsi que la typographie des menus du jeu ont entièrement été revues. C est suite à ces dernières améliorations visuelles que le jeu a été considéré comme terminé avant les tests finaux. CONCLUSION A travers ce semestre de conception, développement, et réalisation d un projet multimédia interactif, nous allons pouvoir nous enrichir tant au niveau personnel que professionnel. En effet, nous n avions peu ou pas de connaissance pratique sur la réalisation pratique d un projet d une telle envergure. A travers les formations de logiciels, nous avons développé notre projet au fur et à mesure tout en essayant de prendre une longueur d avance sur ces présentations étant donné que nous devons commencer la conception le plus tôt possible pour finir ce projet. Nous étions formés aux principaux logiciels de développement du monde professionnel tels qu Adobe Flash, Photoshop et Illustrator et le fait de développer sous contrainte (charte graphique, base de données) permettait de se mettre réellement dans les conditions du monde du travail. Généralement, lorsque qu un projet est confié par une entreprise, ce dernier ne part pas d une feuille blanche, et nous devons nous conformer aux exigences, en particulier techniques, de l employeur, ces dernières étant formulées plus ou moins explicitement dans le cahier des charges. Sur le plan personnel, il peut sembler évident voire inné de travailler en groupe avec des personnes que nous connaissons peu voire pas du tout mais c est aussi un avantage de se mettre avec quelqu un dont on sait que le travail est efficace ensemble. La complémentarité d un duo se connaissant en GSU et d un collègue GI a montré une grande efficacité tant sur le plan personnel que collectif. Mais ceci demande un certain apprentissage. Il faut y passer du temps, partager le travail, les responsabilités de la manière la plus équitable possible. Ensuite, il faut savoir exploiter les possibilités, facilités, et connaissances de chacun. C est concrètement le cas, en reprenant l exemple du monde du travail. Notre capacité d intégration et de travail en équipe est toujours primordiale pour une entreprise. Il est impensable aujourd hui de travailler uniquement pour soi, produire et développer quelque chose de cohérent et de concurrentiel uniquement par soi-même. 13