A NET A - UTC · 2009. 6. 9. · 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

ASTORI Jérémie – GI02 BRUNET Nicolas – GI02

SI28 – Ecriture interactive et multimédia ~ Serge BOUCHARDON • 1

AmbyNET, le réseau social d’Ambycia



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



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.



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



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



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.



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



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

…



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

…



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



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.



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.



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.



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.



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



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…



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 à



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.



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.



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.



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).



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.



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.



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


● 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


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é)


● 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é.


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


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.


● 4/4


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)

Documents

A NET A - UTC · 2009. 6. 9. · 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