ANICOTTE Guillaume GUFFROY Matthieu LIMA Juliette SALLOUH Chamsseddine CAHIER DES CHARGES SI 28 AUTOMNE 2013
SOMMAIRE Synopsis de projet 3 Concept 3 Public cible 3 Objectifs 3 Ressources médias Structuration du contenu Formes et degrés d interactivité Choix techniques 4 5 6 7 HTML5 / CSS3 7 Canvas 7 Communication 7 Choix graphiques 8 Style général 8 Création du Logo 8 Choix des couleurs 9 Couleurs de l interface 9 Couleurs de l écran de jeu 9 Choix des formes 10 Zonings 11 Maquettes 12 Maquettes de la version mobile 12 2
Synopsis de projet Concept Notre projet propose aux utilisateurs de vivre ensemble une expérience musicale interactive et ludique. A partir de leurs smartphones, les utilisateurs se lancent des formes graphiques représentant des objets sonores, qu ils doivent intercepter pour créer la mélodie et marquer des points. Public cible Notre projet cible les détenteurs de smartphones adeptes de mini-jeux. Objectifs Les différents objectifs de notre projet sont: 1. Ludique : Le jeu doit permettre aux utilisateurs de s amuser. 2. Social : L aspect multijoueur permet de s amuser à plusieurs. 3. Démonstratif : En utilisant les dernières technologies du web, encore en cours de normalisation, notre projet permet de démontrer les possibilités de celles-ci. 3
Ressources médias Dans notre projet, nous avons décidé d utiliser principalement des ressources sonores. Pour créer une expérience musicale ludique, il est important d avoir un fond sonore ajouté à notre application. Ce sera une boucle musicale neutre permettant l ajout de petites mélodies correspondant aux notes que l utilisateur joue. Nous utilisons également des formes géométriques réalisées en canvas pour représenter ces mélodies sonores. Ces formes sont générées aléatoirement au moment de leur création. Chaque forme correspond à un type de mélodie jouée avec l instrument préalablement choisi par l utilisateur, qui sera jouée au moment de l explosion de cette forme. Ces sons sont créés via le logiciel Audacity. Le fond sonore est composé de mélodies déjà existantes qui sont retravaillées pour correspondre à notre besoin. Les courtes mélodies sont ensuite créées pour correspondre à ce fond sonore. Puis elles sont adaptées au son de chaque instrument de musique. Nous utilisons peu de ressources textuelles dans ce projet. La structure n étant pas très développée, nous avons simplement quelques boutons, des écrans de personnalisation du joueur et un écran de scores à la fin de la partie. 4
Structuration du contenu Nous avons souhaité recentrer au maximum la structure de cette application sur la fonctionnalité importante de l application qui est le jeu. Nous n avons donc qu une possibilité sur l écran d accueil, le bouton «Jouer». L utilisateur accède ainsi à un écran où il peut choisir un nom, une couleur qui lui sera associée tout au long de la partie et un instrument de musique de prédilection parmi une demidouzaine. Après ce jeu, nous avons une animation rapide marquant la fin du jeu et une redirection vers un écran des scores permettant de créer un classement des joueurs. Enfin, l utilisateur pourra retourner sur le menu principal, ou rejouer. 5
Formes et degrés d interactivité Notre jeu est basé sur deux formes d interactivité. Tout d abord, il est important de rappeler que les joueurs participent à une expérience musicale collaborative, où l intérêt est de construire ensemble une mélodie. On a souhaité ajouter un esprit compétitif au projet en créant un système de points positifs et négatifs marqués. Cet aspect n est pas antagoniste avec le côté collaboratif du jeu, au contraire il encourage les joueurs à être en rythme et à construire une mélodie harmonieuse. Chaque joueur interagit avec son propre appareil (smartphone, tablette) et participe à part entière à l expérience en pouvant : Créer des formes (représentant des sons potentiels) Lancer les formes à ses adversaires Exploser la forme et jouer le son correspondant Pour cela, nous avons décidé d implémenter différents gestes qui sont principalement adaptés aux tablettes et smartphones. Pour créer une nouvelle forme, il faut simplement cliquer sur le fond du jeu. A partir de ce moment, un décompte associé à la forme est lancé et un halo de couleur rouge s affiche autour de la note. Lorsque ce halo passe de la couleur rouge à la couleur verte, il faut double cliquer sur cette note pour qu elle explose. Si l on explose la note au mauvais moment, nous perdons des points. Le dernier mouvement possible est le sélectionner / glisser ou «swipe», qui permet de déplacer une forme et de la lancer sur l écran d un de nos adversaires. Si la note se termine sur notre écran et que le halo était rouge à ce moment là, des points nous sont également retirés. 6
Choix techniques HTML5 / CSS3 Outre le fait que c est l un des objectifs de base du projet que de faire la démonstration de ces nouvelles technologies, les périphériques cibles sont des smartphones et des tablettes. Il n est donc pas possible de s orienter vers du flash. Si l on se passe des technologies web, il faudrait faire différents développements dans différents langages de programmation pour s adapter aux différentes plateformes. Canvas Le canvas sera utilisé pour la gestion de l interface graphique et des animations. Cette technologie est apparue avec le HTML5 et permet de réaliser du dessin vectoriel et des animations assez facilement. Il a aussi l avantage d être reconnu par la majorité des navigateurs actuels. Communication Pour établir les communications entre les clients (et le serveur), il n est pas possible d utiliser les anciennes technologies du web, car on a besoin d une latence très faible pour ne pas pénaliser le gameplay. Deux technologies s affrontent pour l instant: - websocket (Permet une communication client/serveur rapide) - webrtc (Permet une communication client/client rapide) Nous utilisons finalement les websocket au final, car le webrtc est encore en cours de standardisation, et n est malheureusement pas encore complètement (ou pas de la même façon) implémenté sur tous les navigateurs. 7
Choix graphiques Style général Dans tous les choix graphiques réalisés pour cette application, nous avons tenté de rester très sobres afin de correspondre aux tendances du minimalisme actuel. Le fond noir permet de travailler des contrastes de couleur plus importants et nous paraissait plus adéquat au monde du jeu sur mobile. Nous avons également fait le choix de n utiliser qu une typographie dans toute l application, un type d Helvetica Neue Extended. Cette uniformité nous permet de garder un champ d originalité pour d autres points du graphisme. Celle-ci est également sobre et moderne, pour s intégrer correctement avec le reste des éléments graphiques. Création du Logo Ce logo utilise donc la même typographie que tous les éléments du jeu. Les couleurs ont été choisies pour créer un grand contraste entre le bleu et le noir. Toutes les couleurs des éléments principaux de l application sont dérivées de cette teinte de bleu. Nous avons fait un rappel aux formes utilisées dans le jeu en remplaçant le «O» par la forme circulaire. Cela permet de différencier le logo et de permettre à l utilisateur de reconnaître l application. 8
Choix des couleurs Couleurs de l interface Dans toute l interface, nous utilisons une gamme de bleu qui permet de créer du contraste dans l interface. En utilisant certaines de ces couleurs en tant que bordures des éléments, nous apportons une structure générale et pouvons également créer des illusions de profondeur, notamment sur nos boutons. Couleurs de l écran de jeu Sur l écran de jeu, nous avons voulu faire attention à bien différencier les couleurs des différents joueurs tout en gardant l idée joyeuse de l application à l aide de couleurs vives. Nous avons légèrement désaturé celles-ci afin que le contraste ne soit pas douloureux pour l œil dans le cas d une utilisation prolongée de l application. 9
Choix des formes Nous utilisons pour ce jeu des formes géométriques pour deux raisons principales. La première est qu une forme géométrique est facilement reconnaissable. Cette démarche s inscrit dans notre choix de sobriété graphique explicitée précédemment. De plus, ces formes sont plus facilement manipulables en canvas et permettent la création d animations plus intéressantes à nos yeux. Nous avons ajouté des jeux de bordures qui permettent d ajouter de l originalité graphique à ces formes. 10
Zonings Pour nous aider dans la conception de la structure graphique de l application, nous avons dessiné des zonings correspondant à chacune de ses pages. Nous nous sommes ensuite basés sur ces images pour créer des maquettes. 11
Maquettes Maquettes de la version mobile 12
Conclusion Ce projet a été très intéressant pour nous tous parce qu il a demandé de l organisation dans les étapes de conception pour avoir un système de jeu logique et réalisable techniquement. Grâce à nos profils différents, nous avons pu apporter de la diversité dans le projet et proposer une solution ludique. Dans la création de l interface graphique, il a été difficile de toujours rester simple. Il y a eu plusieurs étapes de graphisme qui, finalement, ont mené à une version qui transmet exactement le message que nous imaginions à l origine. Le choix des technologies utilisées s est imposé à nous rapidement. Nous avons pu, à l aide d outils comme Git, travailler en collaboration et partager nos avancées. Ce projet reste pour nous un challenge technologique. Finalement, cette expérience nous a permis de travailler avec des personnes aux profils hétérogènes et de d apprendre à communiquer avec des personnes plus ou moins novices dans nos domaines de prédilection. C est cette collaboration que nous retiendrons principalement. 13