Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 1
AmbyNET, le réseau social d’Ambycia
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 2
Table des matièresTable des matièresTable des matièresTable des matières
INTRODUCTION..................................................................................................................................... 3
I. CAHIER DES CHARGES................................. .............................................................................. 4
1. CONCEPT DU PROJET .................................................................................................................... 4 2. PUBLIC-CIBLE ............................................................................................................................... 4 3. OBJECTIFS ................................................................................................................................... 6 4. RESSOURCES MEDIAS ................................................................................................................... 6 5. STRUCTURE ET NAVIGATION .......................................................................................................... 7 6. FORMES ET DEGRES D’INTERACTIVITE ............................................................................................ 8 7. CHOIX TECHNIQUES .................................................................................................................... 11
A. Choix techniques existants .................................................................................................. 11 B. Choix techniques d’AmbyNET ............................................................................................. 12
II. SCENARIO ................................................................................................................................... 13
1. SCENARISATION.......................................................................................................................... 13 2. INTERFACE ................................................................................................................................. 13
A. Interface de la pièce interactive ........................................................................................... 13 B. Gestion des amis ................................................................................................................. 16 C. Publications.......................................................................................................................... 17 D. Albums photos ..................................................................................................................... 18
III. STORY-BOARD ........................................ ................................................................................... 21
1. CHARTE GRAPHIQUE ................................................................................................................... 21 2. CHOIX GRAPHIQUES .................................................................................................................... 21
A. Interface de la pièce interactive ........................................................................................... 21 B. Gestion des amis ................................................................................................................. 22 C. Publications.......................................................................................................................... 22 D. Albums photos ..................................................................................................................... 22
CONCLUSION ...................................................................................................................................... 23
ANNEXES ............................................................................................................................................. 24
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 3
IntroductionIntroductionIntroductionIntroduction
Au cours de l’été 2008, nous avons entrepris la création d’un jeu vidéo de type MMORPG. Partant d’une idée de projet modeste, nous avons suivi l’UV IC05 (Technologies pour la documentation et l’indexation dans l’hypermédia - Franck GHITALLA) au cours du semestre d’Automne 08 afin de nous constituer un cahier des charges, sorte de base solide menant aux premiers fondements de notre jeu.
Grâce à cette étude, nous avons mis en évidence notre volonté d’intégrer une dimension sociale à notre jeu et d’exploiter la tendance actuelle du « Web 2.0 ».
Ce rapport présente la plus-value apportée au projet Ambycia après avoir suivi l’UV SI28. Au cours de cette UV, nous avons développé l’aspect social de notre jeu, en intégrant la relation d’amitié, la possibilité donnée au joueur de personnaliser une partie de l’interface ainsi que de produire son propre contenu.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 4
I.I.I.I. Cahier des chargesCahier des chargesCahier des chargesCahier des charges
1.1.1.1. Concept du projetConcept du projetConcept du projetConcept du projet
Le projet, entrepris au cours de l’été 2008, consistait en la conception et le
développement d’un MMORPG1 suivant deux schémas : le premier étant le schéma classique des jeux de type MMORPG et le second apportant une dimension sociologique très forte au cœur du jeu.
Ce jeu, a priori futuriste (en réalité, l’univers donné à ce jeu ne dépend que de son
design et de son histoire, eux-mêmes provisoires et interchangeables au possible, du moment que le jeu n’est pas en phase de production) confrontera des joueurs réunis en équipes à plusieurs scénarios. Ainsi, il sera possible aux équipes d’être en guerre et de combattre pour, par exemple, asservir une autre équipe ou conquérir une de ses terres, mais pas seulement : en temps de paix, chaque équipe pourra commercer et évoluer par d’autres moyens. Il ne sera pas nécessaire de combattre et de tuer pour avancer dans le jeu.
A un niveau supérieur, chaque équipe ne sera pas régie par les règles ou les
administrateurs du jeu, mais par une poignée de joueurs eux-mêmes, élus par le reste de l’équipe, et dont le rôle sera de prendre toutes les grandes décisions nécessaires à l’équipe : attaquer une équipe adverse, fixer des taxes intérieures (pour le commerce entre joueurs de l’équipe) et extérieures (pour le commerce de joueurs de l’équipe avec d’autres joueurs), solutionner les conflits, faire justice, recruter des mercenaires (joueurs ayant quitté leur équipe au préalable)… Bien évidemment, afin de ne pas frustrer les autres joueurs, il sera possible de remettre en question le gouvernement en place dès que nécessaire, et celui-ci veillera à prendre les bonnes décisions en sondant les membres de l’équipe.
Enfin, et c’est là ce qui, selon nous, devrait rompre avec le schéma classique des
MMORPG, nous tenons à créer un espace personnel appartenant au joueur que nous qualifierons de « social ». Chaque joueur aura un réseau d’amis sélectionnés, qui auront eux aussi un compte joueur. Notre intérêt premier, et qui ira ensuite vers une amélioration de notre système, sera d’observer la frontière entre le monde virtuel et le monde réel : les joueurs communicant au travers de leur espace personnel et personnalisable baseront-ils leurs interactions sur le contenu du jeu lui-même ou bien cet espace sera-t-il au contraire un moyen d’entretenir un contact entre les joueurs au-delà de l’univers irréel du jeu ?
2.2.2.2. PublicPublicPublicPublic----ciblecibleciblecible
Grâce à ce jeu, nous espérons captiver l’attention de trois publics différents, tous
nécessairement intéressés par le monde du jeu vidéo dans son utilisation (et plus
1 Jeu de rôle en ligne massivement multijoueur
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 5
précisément du monde du MMORPG car il s’agît bien d’un type de jeu suffisamment singulier pour qu’il ait ses adeptes et ses détracteurs) :
Les « Enfants » ou jeunes adolescents : la tranche d’âge collégienne est en effet la
plus encline à jouer pour jouer uniquement, sans chercher la stratégie du rang hiérarchique ou l’interaction sociale que le jeu pourra leur procurer.
Les « Adolescents » : s’il est vrai que beaucoup de jeunes gâchent leur scolarité dans des jeux vidéo immersifs (voire addictifs !) et temps-réels tels que World Of Warcraft2, on remarque que de plus en plus de jeunes se tournent vers des sites de réseaux sociaux, à tel point que cela devient, là aussi, une accoutumance démontrée.
Les « Adultes » : ici leur but n’est pas de jouer sans réfléchir ni chercher à se faire de
nouveaux amis, mais bien de concevoir une réelle stratégie pour évoluer et se faire un nom. Dans ce cas, le rôle du leader et de son équipe de dirigeants correspond parfaitement à ce type de public.
Une grande précaution est néanmoins à prendre à l’égard des deux dernières
catégories : on observe aujourd’hui un engouement certain aux réseaux sociaux de la part de toutes les tranches d’âges, et plus particulièrement la tranche des 18-34 ans (qui représentent ⅔ des utilisateurs de Facebook aux Etats-Unis3) mais également les plus de 55 ans qui représentent à ce jour la croissance la plus rapide de Facebook4. On constate ainsi que la dernière catégorie de public est tout à fait disposée à utiliser un tel réseau social au travers de notre jeu. De plus, la classe intermédiaire aura forcément un intérêt à vouloir diriger et contrôler une équipe, ce qui rend nos deux derniers types de publics visés hybrides, il se peut donc qu’ils cherchent à atteindre les mêmes objectifs.
Enfin, plusieurs difficultés peuvent s’imposer étant donné la largeur conséquente de tranches d’âges que nous visons : la faculté d’adaptation des uns et des autres n’étant pas la même, il convient que chacun puisse prendre en main ce jeu d’une manière la plus homogène qui soit en leur proposant un didacticiel complet, et en révélant les différents modules accessibles aux joueurs de manière incrémentale (un novice n’aura pas d’actions ni d’options aussi minutieuses qu’un vétéran !). De plus, il faut faire attention, car chercher à courir après trop de joueurs d’origines et de caractéristiques différentes, on risque de n’en séduire aucun. Nous devrons donc nous recentrer et nous remettre en question assez souvent. Pour finir, pour beaucoup le phénomène très actuel de réseaux sociaux n’est qu’une mode qui finira par passer comme toutes les autres, et là encore il faudra savoir prendre du recul pour ne pas persister dans une voie sans issue mais plutôt apprendre à réutiliser nos créations et compétences en les remettant « au goût du jour ».
2 Les ravages des MMORPG : http://www.01net.com/editorial/298974/hospitalises-pour-addiction-aux-jeux-en-ligne/ 3 Utilisateurs Facebook américains par tranche d’âge au 1er février 2009 : http://www.insidefacebook.com/wp-content/uploads/2009/02/20090201fbdemopie.png) 4 http://fr.insidefacebook.com/2009/02/03/tranche-demoraphique-a-la-croissance-la-plus-rapide-sur-facebook-les-femmes-de-plus-de-55-ans
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 6
3.3.3.3. ObjectifsObjectifsObjectifsObjectifs
Notre objectif à travers l’UV SI28 est de développer les parties dites « sociales » du
jeu. En effet, actuellement, les fonctionnalités opérationnelles et accessibles sont assez basiques (même si elles nous ont tout de même pris plusieurs mois de travail régulier) mais néanmoins vitales au bon fonctionnement du jeu : déplacements, attaques entre joueurs, évolution du niveau et des caractéristiques du joueur, messagerie embarquée au sein même du jeu, sac à dos et commerce entre joueurs de son contenu, … On remarque ainsi que, sur ces différents modules, aucun d’entre eux ne pourrait être qualifié de « social » (hormis peut-être la messagerie qui, elle, crée bien une communication entre deux joueurs ou plus mais cela n’est en rien suffisant).
Pour développer l’aspect social du jeu, l’idéal serait de créer un espace interactif qui serait personnel à chaque joueur et grâce auquel il pourrait communiquer et partager. Cet espace se composerait, par exemple, d’une pièce virtuelle modulable par le joueur. A travers cette pièce ; nous souhaitons permettre des interactions entre les joueurs dont le fonctionnement pourrait ressembler à celui d’un site de réseau social tel que Facebook ou MySpace. Le joueur aurait une liste d’amis avec lesquels il pourrait exécuter des actions particulières. Toujours en gardant l’idée d’une pièce interactive, nous pourrions y placer par exemple :
Un tableau ou un écran qui afficherait les messages laissés par les autres joueurs ; Un poste de radio/chaîne hifi où le joueur pourrait, par exemple, mettre des playlists
Deezer ; Une console de jeux-vidéos qui permettrait d’accéder à des minis-jeux ; Un livre dont le contenu, écrit par le joueur lui-même, conterait l’histoire de son
avatar ; …
Le but sera donc de proposer au joueur un univers qu’il pourrait moduler à son goût
et à travers lequel il pourrait partager autre chose que le jeu et son contenu direct.
4.4.4.4. Ressources médiasRessources médiasRessources médiasRessources médias
Afin de produire le jeu, il sera nécessaire de produire nous-mêmes le contenu média
de la pièce interactive, ou bien de s’approprier les éléments librement mis à disposition par des infographistes indépendants.
Nous aurons notamment besoin de :
Images, textures et graphiques : utiles au « background » de la pièce, et des éléments qui la composent ;
Sons et musiques : dans le cas de mini-jeux, de contenu d’une chaîne Hi-Fi.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 7
Pour l’instant, aucun contenu vidéo ne nous est utile ou nécessaire.
Le jeu devant, à terme, être disponible à tout un chacun, la production de ces ressources médias ne pourra passer par l’assimilation d’œuvre d’autrui. Cette difficulté nous poussera très probablement (au moins tant que notre réseau social est en construction) à travailler sans son, ce qui est en plus préférable pour du contenu Web aujourd’hui, en termes d’accessibilité.
5.5.5.5. Structure et navigationStructure et navigationStructure et navigationStructure et navigation
La navigation à l’intérieur de ce jeu se doit d’être la plus simple et la plus naturelle
possible. Nous avons donc décidé de « placer » dès le départ le joueur sur la page principale du site, le tableau de jeu, en lui laissant la possibilité ensuite de se diriger où bon lui semble.
Notre jeu respecte en outre la règle des trois clics5, étant donné que chaque partie
importante du site est accessible depuis n’importe où via le menu principal, présent sur toutes les pages. Chaque sous-partie, page moins importante ou contenu de section est accessible en deux ou trois clics maximum. Certaines informations ne peuvent cependant pas respecter ce principe. Par exemple, pour accéder à un message du journal de bord datant de plusieurs mois, il faudra revenir en arrière page par page, ce qui peut engendrer jusqu’à 10 clics. Cependant, il vaut mieux structurer ce journal de cette façon car tout afficher sur la même page surchargerait la page, d’autant plus que peu de joueurs iront lire leurs très vieux messages ! Enfin, chaque action importante que peut effectuer un joueur sur un autre (attaquer, commercer, …) peut être déclenchée en un seul clic à partir du tableau de jeu, à condition que les deux joueurs soient proches l’un de l’autre.
Nous pouvons synthétiser de manière très sommaire le principe de navigation de
l’univers d’Ambycia par le schéma suivant :
5 http://fr.wikipedia.org/wiki/Règle_des_trois_clics
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 8
6.6.6.6. Formes et degrés d’interFormes et degrés d’interFormes et degrés d’interFormes et degrés d’interactivitéactivitéactivitéactivité
Comme tout réseau social, l’interactivité d’AmbyNET passera par la
possibilité de « laisser sa trace » sur le réseau. Il sera ainsi possible de publier tout type de contenu, de le partager avec ses amis, … Ce fonctionnement est présenté de manière non-exhaustive sur le schéma suivant :
Accueil
Jeu Messagerie
Chambre virtuelle
Journal de bord
Dormir / Se réveiller
Joueur de la carte
Attaquer Dérober
Sac à dos
Contacter
Commercer
Jeter
Utiliser
Porter
Se déplacer
Attaquer
Joueur ami
Visiter la chambre
…
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 9
Ce réseau social sera accessible par l’intermédiaire de sa chambre personnelle, qui contiendra les divers éléments de ce réseau.
Cette chambre personnelle est visible par tous ses amis, mais uniquement personnalisable par le propriétaire. Celui-ci aura la possibilité de manipuler les éléments de sa chambre. Le joueur peut ainsi décider de la présence ou non des objets mis à sa disposition (sauf pour les objets servant de lien vers la galerie photo, l’histoire du joueur,…). Il peut ensuite placer ces objets dans l’espace qui lui est attribué. Une autre partie importante de la personnalisation est celle concernant les couleurs et l’ambiance lumineuse de la pièce. Le joueur peut choisir la couleur des murs, du sol, du plafond mais aussi de deux types de lampes mises à sa disposition.
Lorsque la chambre est visitée par un ami du joueur, la partie personnalisation n’est pas accessible par celui-ci. Il verra donc la pièce telle que le propriétaire l’a laissée.
Pour le moment, le joueur peut manipuler (changer une ou plusieurs de ses propriétés, sa position, …) les objets suivants :
Mur : Le joueur choisit la couleur de ses murs, il a aussi la possibilité de choisir un décor parmi un certain nombre de choix (deux pour le moment).
Joueur courant
Joueur ami
Publier
Commenter
Message du journal de bord
Publication
Approuver / Désapprouver
Visiter la chambre
Personnaliser sa chambre
Texte libre
Albums photo
Graphes d’amis
Son histoire
…
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 10
Sol : C’est le même principe que le mur.
Toit : En plus du choix de la couleur, le joueur peut choisir d’afficher le toit ou non. S’il choisit de l’enlever, le toit disparaît avec une animation, laissant apparaître un ciel en mouvement. Ce ciel changera selon l’état du joueur (éveillé ou endormi) et éventuellement aussi selon l’environnement dans lequel il se trouve.
Fenêtre : Le joueur peut choisir d’utiliser de 0 à 3 fenêtres qu’il place où il le désire
sur les murs. La taille de ces fenêtres n’est pas paramétrable, elle varie en fonction de leur position sur le mur pour garder l’impression de profondeur. Les fenêtres laissent ainsi apparaître le ciel.
Lampe murale : Cette lampe n’est qu’une décoration. Elle se place sur le haut des
murs et tout comme la fenêtre, sa taille varie en fonction de sa position. Sa couleur est également paramétrable. Il est aussi possible de l’allumer, de l’éteindre, mais aussi de basculer en « mode clignotant ».
Lampe d’ambiance : Cette lampe est incrustée dans la jointure des murs supérieurs.
Elle laisse apparaître un halo de lumière sur les murs et elle change la luminosité et la teinte générale de la pièce.
Bibliothèque : cet objet est un lien amenant à l’histoire du joueur. Elle se place contre
un mur.
Ecran : sur cet écran défileront les dernières publications du joueur. En cliquant sur cet écran, les publications et leurs commentaires apparaîtront sous l’application Flash.
Tableau : Il est placé sur le mur et sera composé d’une photo. Celle-ci est chargée
aléatoirement parmi les photos contenues dans les albums du joueur. Ce sera un lien vers ses albums photos.
Pour synthétiser, on remarque ainsi qu’AmbyNET offre à l’utilisateur une
interactivité sur 3 niveaux :
Interactivité de navigation : le joueur peut accéder à tout ou partie du réseau et du jeu lui-même (sous réserve qu’il ait préalablement débloqué les éventuelles « zones cachées ») et peut surtout accéder à la pièce de ses amis et naviguer parmi ses éléments constitutifs ;
Interactivité de manipulation : le joueur a la possibilité de moduler l’espace de sa
pièce à son gré, de choisir la disposition de ses photos dans ses albums, …
Interactivité de production : le joueur peut introduire ses propres données, à un degré limité cependant. En effet, même s’il peut prendre ses photos, les publier et les
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 11
commenter, il ne peut proposer une photo qui n’ait de rapport avec le jeu. Enfin, tout joueur peut laisser un commentaire ou une évaluation sur une publication chez l’un de ses amis.
7.7.7.7. Choix techniquesChoix techniquesChoix techniquesChoix techniques
La réalisation d’Ambycia ayant débuté avant ce projet SI28, certaines
décisions techniques avaient déjà été prises.
A.A.A.A. Choix techniques existantsChoix techniques existantsChoix techniques existantsChoix techniques existants
Langage du site
L’affichage et la mise en page du site sont gérés conjointement en XHTML 1.0 Strict et CSS 2, choisis pour leur stabilité et leurs standards.
La dynamique du site est, elle, programmée en PHP5, qui offre énormément de liberté et de modularité au code.
Les données (profils des joueurs, journaux des actions, …) sont stockées en base de
données MySQL 5 , simple d’utilisation et rapide d’accès.
Un moteur de templates : PHPLib
Afin de séparer totalement le code PHP et la mise en page, nous avons implémenté à notre jeu une gestion de templates grâce à un moteur de templates très connu : PHPLib .
Les templates agissent comme des patterns, des patrons ne contenant que la mise
en page HTML, sur lesquels le PHP agit comme une surcouche, modifie et affiche le contenu des templates dynamiquement.
Développement collaboratif
La création d’un site Web collaboratif apporte son lot de difficultés. La plus flagrante vient du fait qu’un site est codé sur un certain nombre de pages, et que plusieurs personnes sont susceptibles de travailler sur la même page au même moment, même si les objectifs des 2 codeurs diffèrent. Ce problème majeur peut s’expliquer simplement. Mise en situation :
Deux codeurs A et B travaillent sur la page index.php. A implémente un système de connexion à un espace joueurs, B réalise le menu personnalisé du joueur. (En pratique, ces deux systèmes sont réalisés sur deux pages différentes, mais le problème est analogue : il existe toujours des pages communes à deux codeurs ou plus.) Tous deux travaillent sur la même page initiale index.php. Si A termine sa modification et livre sa page index.php sur un serveur FTP classique, lorsque B livrera sa version, elle viendra écraser sans concession celle de A.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 12
Nous avons décidé, pour solutionner ce problème, d’utiliser un serveur Subversion plutôt qu’un serveur FTP standard. Son fonctionnement est plus complexe mais, lors de la livraison de pages existantes, le serveur modifiera en temps réel les pages pour ne rien supprimer. De plus, le serveur intègre une gestion de versioning, et il est possible de revenir en arrière à tout moment en cas d’erreur.
B.B.B.B. Choix techniques dChoix techniques dChoix techniques dChoix techniques d’’’’AAAAmbymbymbymbyNETNETNETNET
Le réseau social AmbyNET est composé de différents modules. Afin
d’obtenir un rendu le plus convivial possible, il était convenu de choisir les technologies à employer en fonction du contenu de chaque module plutôt que d’adopter une technologie unique. En effet, nous voulions au départ utiliser une animation Flash unique pour la chambre dans sa totalité, en incluant son contenu. Il s’est avéré qu’après réflexion, il valait mieux adopter une stratégie différente.
La chambre personnalisable est effectivement développée en Flash, qui offre un
niveau de personnalisation et d’interactivité maximal. Cela permet au joueur de définir l’ambiance et le caractère de sa chambre au gré de ses envies, avec pas ou peu de limitations (il peut placer ses objets ou bon lui semble, alors qu’une autre technologie lui aurait probablement proposé une liste finie de choix).
Cette chambre sera le point central du réseau, à partir duquel il sera possible
d’accéder à divers modules. A partir de là, il est possible de lister les modules accessibles aujourd’hui, mais il n’est pas possible d’en faire une liste exhaustive : notre système est évolutif mais surtout amené à évoluer ! Cependant, les modules existant sont :
Gestion complète des amis ; Affichage de publications et de leurs commentaires et évaluations ; Consultation d’albums photos et de leurs commentaires et évaluations.
Ces 3 modules, bien que différents et assez distants les uns des autres, utilisent tous
la même technologie PHP. Cela leur offre un dynamisme total mais pas temps-réel, en permettant un stockage des informations en base de données, élément vital de notre jeu.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 13
II.II.II.II. ScénarioScénarioScénarioScénario
1.1.1.1. ScénarisationScénarisationScénarisationScénarisation
La mise en scène de notre réseau social AmbyNET a déjà été évoquée
plus haut, il s’agit de laisser à l’utilisateur l’impression de se connecter à une chambre interactive, comme s’il se déplaçait à des années-lumière de chez lui mais qu’il pouvait tout de même y pénétrer et en modifier son contenu, par quelque technologie futuriste possible. Ce niveau d’abstraction nous est permis par le caractère global de notre jeu. En effet, il est à la fois facile d’alimenter un jeu futuriste en donnant l’impression au joueur que tout est possible (car, après tout, on ne sait pas de quoi demain sera fait), et à la fois difficile car c’est à nous d’imaginer et de créer ce futur.
Depuis cette pièce, il est donc possible d’accéder aux éléments importants du
joueur : albums photo, publications personnelles, … Cette pièce apparaît donc comme le point nodal d’un réseau auquel doit se connecter l’utilisateur afin de rejoindre sa communauté d’amis et « socialiser » avec eux. Bien sûr, ce réseau sera toujours disponible car, dans le futur, les connexions réseaux seront accessibles n’importe où et n’importe quand, sans craindre une coupure comme on les connaît aujourd’hui !
2.2.2.2. InterfaceInterfaceInterfaceInterface
A.A.A.A. Interface de la pièce interactiveInterface de la pièce interactiveInterface de la pièce interactiveInterface de la pièce interactive
En ce qui concerne la pièce interactive, la séquence de chargement de l’application
Flash sert d’introduction. Elle simule une étape d’authentification au réseau afin de faire patienter le joueur.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 14
Le A de AmbyCIa se noircit au fur et à mesure du chargement. Il clignote lorsque
l’application est complètement chargée.
L’interface de personnalisation de sa pièce permet de paramétrer les éléments en un minimum d’actions. Pour cela, un menu a été créé sous la pièce. Le menu d’accueil permet d’ajouter ou de supprimer des éléments en cliquant sur leur miniature. Les objets sont triés selon leur catégorie.
Pour déplacer un objet, il suffit d’utiliser un « Drag&Drop » sur l’objet en question.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 15
Pour accéder aux options d’un objet, un clic sur l’objet en question fera apparaître son menu dédié, à la place du menu d’ajout/suppression d’objets (on peut facilement retrouver celui-ci en cliquant sur « Retour », toujours en haut à droite des autres menus).
Les objets paramétrables apparaissent en surbrillance au passage de la souris. Cela permet de mieux distinguer ce que l’on peut ou non configurer.
La partie menu s’adapte en fonction de l’élément sélectionné.
Les menus de configuration des objets se présentent tous sous une même forme. En
haut à gauche, on retrouve le titre du menu. Sous ce titre, il y a une zone de boutons permettant d’activer/désactiver certaines options. Le rectangle central permet de choisir la couleur de l’objet. En glissant la souris sur ce panneau, la couleur de l’objet change en direct pour avoir un aperçu du résultat. On sélectionne la couleur par un simple clic. A droite, une zone indique l’ancienne couleur (celle que l’objet avait au moment où on a affiché ce menu). Une seconde zone indique la nouvelle couleur choisie. En glissant la souris sur ces deux zones, il devient facile de comparer l’ancienne et la nouvelle couleur. Enfin, un bouton « Valider », en bas à droite, permet de confirmer tous les réglages effectués et qui seront visibles par les joueurs « amis ».
Pour guider l’utilisateur, une zone de texte dynamique est utilisée au-dessus du menu. Celle-ci précise quelques informations supplémentaires, comme d’appuyer sur le
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 16
bouton « Valider » quand des modifications on été effectuées, de cliquer sur un élément pour le paramétrer ou bien encore qu’il est possible de déplacer l’objet par « Drag & Drop ».
B.B.B.B. Gestion des amisGestion des amisGestion des amisGestion des amis
Comme tout réseau social, AmbyNET offre certaines fonctions et privilèges
aux amis qu’un joueur a décidé de considérer comme tels. Il est donc possible d’inviter un joueur à devenir son ami et, réciproquement, d’accepter ou de refuser une invitation, afin d’accéder à sa chambre virtuelle et à son contenu.
On peut également apercevoir, dans ce gestionnaire, un graphe représentant ses
amis proches et les relations qu’ils entretiennent entre eux.
La forme du graphe des amis peut être choisie circulaire ou calculée aléatoirement.
A terme, AmbyNET se distinguera des autres réseaux sociaux par la
diversité de ses relations ; il sera par exemple possible d’être ennemi avec un joueur, et pourquoi pas d’être amoureux d’un autre joueur…
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 17
C.C.C.C. PublicationsPublicationsPublicationsPublications
Un joueur doit pouvoir publier, à la manière de Facebook, ce que bon lui semble selon son humeur actuelle. L’interface des publications apparaît donc comme un blog où chacun peut exprimer ses pensées, les commenter, les évaluer…
Les publications les plus récentes apparaissent en premier,
contrairement aux commentaires.
Comme le laisse apparaître l’écran-type ci-dessus, tout joueur peut laisser un commentaire et évaluer le post d’un ami afin d’en critiquer le contenu.
Cette interface se doit d’être simple et agréable. Il est donc aisé d’accéder à la chambre d’un ami, en cliquant sur son avatar ou son pseudo, et toute action possible sur ce panneau est assez intuitive. De même, l’ergonomie est soignée : si la date d’une publication ancienne est sous la forme présentée plus haut (« jj/mm/aa à hh:mm »), la date d’une publication plus récente aura une forme plus proche du langage naturel (« Ce matin à
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 18
hh:mm », « Hier à hh:mm »). Cette forme permet en outre une appropriation du contenu plus rapide. Enfin, ce système est unifié sur la totalité du site et il est très facile de le modifier (en ajoutant, par exemple, des phrases-types pour les 7 derniers jours, ou en « dénumérisant » l’affichage : « Il y a longtemps », « il y a 3 jours environ », …). Toujours en termes d’esthétisme, plusieurs gadgets s’ajouteront à l’interface. Il est d’ores-et-déjà possible de modifier à la volée la taille des avatars à l’écran et d’autres possibilités verront le jour, dans le but de permettre à l’utilisateur de pouvoir personnaliser complètement l’affichage, sans pour autant le surcharger.
Cette page offrira enfin plusieurs types de publications aux joueurs. En plus de
pouvoir publier des messages personnels, il sera possible de publier le contenu de son journal de bord ainsi que ses photos.
D.D.D.D. Albums photosAlbums photosAlbums photosAlbums photos
Les albums photos doivent contenir tout type de photo qu’a pu prendre un joueur : photo prise « sur le terrain » (un instantané du jeu du moment et de l’endroit où il se trouve), les graphes de ses amitiés avec les autres joueurs qu’il souhaite immortaliser, … Le contenu de ces albums, contrairement aux autres réseaux sociaux, doit donc être étroitement lié à
l’univers d’Ambycia.
A la prise de photo, on demande au joueur de la classer dans un album.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 19
Chaque photo doit être nommée et peut être attachée à une légende. Elle doit
également être classée dans un des albums du joueur, album existant auparavant ou créé pour l’occasion. Le tri par album permet une navigation plus fluide lorsqu’un ami accède aux albums du joueur. Si le joueur quitte le jeu après avoir pris la photo mais avant de trier cette photo, celle-ci n’est pas supprimée mais se classe d’elle-même dans un dossier « à trier ». Cette photo n’apparaît pas sur le réseau, il faut la trier pour la publier.
Un album est représenté par son nom, une miniature
et le nombre de photos qu’il contient.
Les albums apparaissent tous au même endroit. L’album des photos à trier est géré de la même manière qu’un album classique, hormis l’affichage des photos en taille réelle.
Les miniatures sont triées par date croissante, la première étant la représentante de l’album.
Chaque album liste une série de miniatures présentant son contenu et il est possible
de cliquer sur l’une des miniatures afin de visualiser une image en taille réelle.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 20
Les photos apparaissent par onglet comme dans un portfolio, de manière intuitive
La navigation se fait alors par les touches directionnelles du clavier, ou par simple clic
sur les onglets des miniatures. De la même manière que les publications, une photo peut être commentée et évaluée par les amis du joueur.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 21
III.III.III.III. StoryStoryStoryStory----boardboardboardboard
1.1.1.1. Charte graphiqueCharte graphiqueCharte graphiqueCharte graphique
Notre réseau social AmbyNET étant pleinement intégré dans une interface
existante, la charte graphique à respecter comportait déjà son lot de contraintes. Cela a pour avantages de nous fournir un panel de couleurs et d’images prédéfini, mais a pour inconvénient de nous restreindre et de nous imposer certains choix.
L’ambiance générale du jeu arbore un bleu-gris, alors que les bordures de pages ont une texture métallique (dont l’aspect définitif n’est pas encore établi). D’une manière encore
plus générale, Ambycia dispose d’un graphisme orienté futuriste et l’aspect social du
jeu implique de s’orienter au fur et à mesure vers un design stylé « Web 2.0 » (comme par exemple, le design de Deezer, garni d’ombres, d’effets 3D, …).
Au niveau de la forme, le site existant est disponible sous 2 formats :
L’affichage « avec menu droit » L’affichage « sans menu droit »
Le point commun de ces 2 affichages est qu’il y a toujours un menu gauche qui
contient, lorsqu’un joueur est connecté, toutes les informations de son avatar. Le menu droit, quand il existe, intègre des informations sur ce qui ne concerne pas directement le joueur (informations sur un autre joueur, sur un bâtiment, …). Le panneau central, lui, contient le reste de l’affichage, qui se veut être l’essentiel d’une page.
2.2.2.2. Choix graphiquesChoix graphiquesChoix graphiquesChoix graphiques
A.A.A.A. Interface de la pièce interactiveInterface de la pièce interactiveInterface de la pièce interactiveInterface de la pièce interactive
La pièce devant s’intégrer au sein même du site, elle se devait de respecter la charte graphique existante. Ainsi, les couleurs choisies pour le fond et pour les éléments du menu de l’animation Flash s’accordent avec le reste de la page. Les boutons utilisés sont une
reproduction des boutons utilisés sur le site d’Ambycia. En ce qui concerne le style de graphisme utilisé pour la pièce et ses objets, il reprend l’univers futuriste du jeu. Le décor extérieur, de jour comme de nuit, évoque l’espace et une planète éloignée. Les fenêtres possèdent des contours avec un petit reflet donnant un aspect 3D. Le toit ouvrant, l’écran ainsi que la lampe d’ambiance sont clairement futuristes.
La pièce est représentée par une fausse 3D, la taille et l’inclinaison des éléments
variant en fonction de leurs coordonnées. Quant à l’aspect animation, certains éléments sont animés pour rendre plus vivante la pièce (comme le décor de fond, la lampe ou l’écran dont les messages changeront dynamiquement).
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 22
B.B.B.B. Gestion des amisGestion des amisGestion des amisGestion des amis
Les amis sont accessibles par l’intermédiaire du menu droit. On a une distinction visuelle entre un joueur connecté et un joueur non connecté : un joueur non connecté apparaît semi-transparent et se fait ainsi oublier par le joueur. Sur la page principale du réseau, seuls les joueurs connectés apparaissent, en petit nombre (on peut alors naviguer entre les pages des joueurs connectés). Enfin, les amis sont représentés par leur avatar (une info-bulle contenant les informations du joueur apparaît au survol) encadrés de la couleur représentative de leur équipe. On peut cliquer sur un avatar pour accéder à sa pièce personnelle.
Concernant le graphe des amis, le principe est le même, hormis le fait que les avatars ne sont pas cliquables (le graphe est généré en PHP et ne permet donc pas de définir de zones cliquables. Une relation d’amitié est représentée par un trait gris entre les 2 joueurs concernés.
C.C.C.C. PublicationsPublicationsPublicationsPublications
Les publications ne bénéficient pas d’un design particulier. Elles sont intégrées à l’interface existante et partagent donc le design global du jeu. Cependant, les commentaires sont affichés sur des fonds de couleurs différents : un commentaire sur deux apparaît en gris foncé, le reste en gris clair. Cette alternance des couleurs améliore la lisibilité et l’aspect global de la page.
Les évaluations profitent de couleurs significatives : une évaluation positive est
marquée verte, une négative est marquée rouge (de la même manière que les boutons associés à ces évaluations).
D.D.D.D. Albums photosAlbums photosAlbums photosAlbums photos
Le rendu final des photos est ici plus soigné. En effet, à la prise de la photo, l’image est générée. Cette image contient systématiquement un cadre, créé auparavant. Il y a ainsi une liste de cadres choisis aléatoirement et il est très simple de créer de nouveaux cadres selon un modèle, afin d’augmenter le caractère aléatoire de ce choix de cadre.
Une fois la photo générée, elle doit être classée dans un album. Chaque album est
représenté par une miniature, et un roll-over sur une miniature distingue visuellement l’album (par un encadrement noir). Une fois dans l’album, l’affichage des miniatures suit le même fonctionnement. Enfin, en taille réelle, les onglets non sélectionnés sont mis en arrière-plan grâce à une ombre, alors que l’onglet sélectionné est mis au premier-plan par un léger dégradé clair.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 23
ConclusionConclusionConclusionConclusion
La progression ainsi que la réflexion menées en SI28 auront permis de créer la
dimension sociale recherchée pour Ambycia. Les joueurs, via leur personnage,
peuvent désormais entretenir des relations plus complexes et plus interactives. Il leur est dorénavant permis de publier des messages, de les commenter ainsi que de prendre et de publier des photos. Tout cela est relié via la pièce virtuelle dont le contenu est modulable par le propriétaire. Cette pièce virtuelle, même si elle n’est pas reliée à la base de données pour le moment, est le centre social du jeu, autour duquel tous les échanges sont organisés.
L’espace social créé est une partie importante du jeu. Il est donc amené à être amélioré et à évoluer au cours de la suite du développement du jeu, tout en gardant la ligne définie en SI28.
Au-delà de tout cela, même si ce travail sur l’aspect social a avancé de manière considérable, le jeu en lui-même est encore loin d’être terminé. Il reste de nombreux modules et de nombreuses fonctionnalités à implémenter pour parvenir au résultat escompté.
Nous tenons enfin à remercier M. BOUCHARDON pour son regard externe et éclairé, qui nous a permis d’apporter une solution à bon nombre de problèmes.
ASTORI Jérémie – GI02 BRUNET Nicolas – GI02
SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 24
AnnexesAnnexesAnnexesAnnexes
Annexe 1Annexe 1Annexe 1Annexe 1 :::: Compte-rendu de la réunion du Mercredi 18 Mars 2009
Ambycia Compte-rendu de la réunion du Mercredi 18 Mars 2009
● 1/4
� Ambycia � Compte-rendu de la réunion du Mercredi 18 Mars 2009
Date : 19/03/09, 19 - 22h Lieu : UTC, Compiègne Intervenants : ASTORI Jérémie BRUNET Nicolas WACHEUX Jérémy
Ordres du jour : Etat d’avancement des travaux Prises de décisions quant à la suite du projet
Ce document rend compte des travaux et projets évoqués par les intervenants lors de la réunion du jour. Elle fait état des travaux en cours et des modifications à apporter incessamment sous peu. C’est notamment lors de cette réunion qu’un nom a été fixé pour le jeu.
Jérémy WACHEUX – Web Designer
1. Travaux en cours de réalisation
Le travail effectué n’est à ce jour pas en ligne. Ceci fait l’objet du gros du travail à effectuer. Dans un premier temps, le design général sera réalisé, afin d’obtenir un rendu homogène et exploitable. Les designs plus particuliers seront réalisés plus tard et/ou par un second designer.
- Cadres des sous-menus gauches et droits refaits (haut, bas, côté) � à mettre en ligne
- Cadres supérieur & inférieur du tableau de jeu � à mettre en ligne - Barres évolutives (santé, énergie, …) � à découper puis mettre en ligne - Grades � utilité non définie à ce jour - Bannière des lieux � A mettre en ligne au-dessus du tableau de jeu, après
adaptation du code - Fil du pseudo � A mettre en ligne , en lieu et place de la bordure basse
Ambycia Compte-rendu de la réunion du Mercredi 18 Mars 2009
● 2/4
2. Bugs à corriger
Ces bugs gênants n’apparaissent que sous Internet Explorer. Ils ont été ignorés un certain temps mais il est désormais impossible de passer outre.
- Sous-menu en positionnement relatif � positionnement absolu - PNG 24 bits : transparence et couleurs mal gérées sous IE6 � GIF
3. Travaux à effectuer
Ces travaux devront être réalisés le plus rapidement possible, car la liste sera susceptible d’être allongée assez rapidement. Elle met notamment en exergue l’évocation d’un second designer, dont la fonction principale sera la réalisation d’éléments dits « particuliers », à savoir les éléments qui ne font pas partie de l’aspect global du jeu. Aucun nom n’a pour le moment été mis en avant, nous devrons donc rechercher un designer dans les plus brefs délais.
- Terminer les travaux en cours dès que possible - Terminer les cadres des éléments principaux (cadre actions, chat, …) - Rose des vents à « futuriser » - Messagerie - Journal de bord à changer - Design particulier (item, images des personnages, …) � second codeur ? - Boutons d’action - Silhouette du menu gauche & indices de port d’équipement - Textures du tableau de jeu - …
Nicolas BRUNET – Développeur PHP / MySQL
1. Travaux en cours de réalisation
Les récents travaux effectués ont essentiellement touchés à l’amélioration de messagerie et à l’élaboration du mini-chat, situé sous le tableau de jeu. Le premier est désormais globalement terminé et il ne reste désormais que quelques détails à régler. Le second est un peu plus en chantier, et quelques décisions ont été prises à ce sujet. Le chat prend ainsi en charge 3 types de messages, qui sont affichés différemment suivant leur provenance ; chaque joueur qui écrit un message dans le chat a le choix de l’envoyer à :
- tous les joueurs présents sur le tableau de jeu (mode public) - les joueurs de son équipe uniquement (mode semi-privé) - un des joueurs présents sur la carte (mode privé)
Ambycia Compte-rendu de la réunion du Mercredi 18 Mars 2009
● 3/4
Le module de chat gère une couleur de texte, qui peut être choisie par le joueur au moment où il poste, mais également dans les options où il peut choisir sa couleur par défaut. Des smileys sont également gérés, mais leur activation reste à implémenter, en JavaScript.
2. Bugs à corriger
Les bugs connus inhérents à la messagerie ont tous été corrigés.
La sécurité du chat n’a, elle, pas été mise à l’épreuve par le reste de l’équipe cependant, il y a déjà un bug important qui a été référencé : un message déposé est attaché à l’expéditeur et non un destinataire, ce qui a pour conséquence une disparition de tous les messages envoyés par un joueur si celui-ci quitte la carte (éloignement, mort, …). Une solution envisagée sera de stocker les messages reçus par le joueur dans une variable temporaire attachée au joueur (appelée variable de session). Cette solution sera implémentée prochainement, et nous pourrons donc revenir dessus et discuter de son efficacité.
3. Travaux à effectuer
Deux points seront à modifier dans le futur, concernant la messagerie : - Gérer les messages sans objets : pour le moment, il est impossible d’envoyer un
message si l’on n’a pas spécifié un objet. - Messages de confirmation : lors de la suppression d’un message, …
Jérémie ASTORI – Développeur PHP / MySQL
1. Travaux en cours de réalisation
Dans le cadre de l’UV SI28, nous réaliserons une pièce interactive accessible à chaque joueur. Cette pièce sera le cœur de notre réseau social car chaque joueur pourra accéder à la pièce de ses amis et en consulter et modifier son contenu, mais également personnaliser la sienne. Les travaux actuels réfèrent donc à la réalisation du « pattern » de cette pièce, autrement dit le contexte dans lequel sera intégrée cette pièce. Une totale gestion des amis (vision des amis en ligne avec pagination, invitation, …) est en cours d’implémentation. Un « status update » (message personnel pour afficher son statu) devrait également voir le jour prochainement.
2. Bugs à corriger
La plupart des bugs connus étant corrigée, il ne reste qu’à régler un problème interne : les autres membres du projet n’accèdent pas à la page d’administration des items, page qui ne se livre pas sur le serveur Subversion.
Ambycia Compte-rendu de la réunion du Mercredi 18 Mars 2009
● 4/4
3. Travaux à effectuer
Voici ce qui a été décidé quant à la future pièce interactive : - Personnalisation de la pièce : choisir ses éléments et les placer, changer sa guise
les couleurs et textures de la pièce, un arrière-plan (style ciel visible au-travers d’une vitre) défilera, et changera selon que le personnage est éveillé ou endormi.
- Liste d’éléments susceptibles de composer cette pièce (la réalisation de ces éléments sera susceptible de changer leur description) :
• Un tableau ou écran pour laisser des messages écrits ou manuscrits
• Un journal intime ou un livre où chaque joueur pourra, sans modération, raconter son histoire
• Un album photo dont le contenu pourra être composé de 2 types d’images : � Des screenshots générés automatiquement � Des photographies fictives de monuments réels, comme si les photos
avaient été prises au sein même du jeu. • Une console avec des mini-jeux : un tel système offre l’avantage d’être
énormément évolutif, et encore plus si l’on implémente un jour la possibilité au joueur d’uploader ou de créer ses propres mini-jeux.
• …
Après la réalisation du contexte du réseau social, et pendant la réalisation de la pièce interactive, certains modules (tout ou partie de ces modules en réalité) devront être réalisés :
- Commerce entre joueur et personnage non jouable (appelé commerce PvPNJ), qui intégrera pour la première fois des personnages non jouables
- Cambriolages entre joueurs quand un joueur est endormi - Modification du profil joueur - Intégration de la hiérarchie interne aux équipes (mots-clés : suffrages, taxes, salaires,
chef d’équipe, ministre de la justice, ministre des finances) - Compétences expertes déterminées en fonction d’une spécialisation du joueur à un
certain niveau - Mercenaires - Création d’un compte joueur + didacticiel (réalisés en dernier à cause de l’intégration
en BDD)