Zomb’IstiA est un jeu multijoueur en ligne, intégré dans un site web, en temps réel et dans un monde persistant. Sur le site web, les utilisateurs peuvent s’inscrire, se connecter, et jouer. Dans ce jeu, ces derniers peuvent explorer l’IstiA modélisé en 2D, interagir avec beaucoup d’items, fouiller et se cacher. Il y a trois équipes, et le but de chaque équipe est d’accumuler le plus grand nombre de points, en trouvant des objets précieux ou en combattant d’autres joueurs.
Le but de ce projet tuteuré d’EI4 consiste à créer ce site, avec le jeu, en 5 mois. Pour réaliser ce projet, beaucoup de compétences ont été utilisées : développement web, programmation objet, algorithmie et administration linux. Ce fut un challenge, car beaucoup de travail fut nécessaire pour développer cette application web. Les technologies utilisées étaient inconnues par les membres du groupe et il fut nécessaire d’apprendre et comprendre assez vite.
Pour réussir, un développement en cascade fut nécessaire, en découpant chaque tâche : analyse, conception, développement, et tests. De plus, les tâches de développement devaient être intelligemment distribuées entre les développeurs. Chacun avait sa spécialisation : interfaces utilisateurs, traitements ou base de données.
A la fin, Zomb’IstiA a été déployé sur un serveur personnel, connecté à l’Internet et peut être visité par n’importe qui avec son ordinateur et un navigateur web. Les interfaces graphiques ont été retravaillées afin d’être plus attractives et ergonomiques.
CreateJS est un ensemble de librairies et d’outils pour la création d’interfaces riches et interactives. Ces librairies sont modulables et peuvent être utilisées ensemble ou séparément selon les besoins des développeurs. Il utilise la technologie HTML5 et est principalement utilisé pour enrichir et améliorer le contenu des canvas.
Twitter Bootstrap, est une collection d’outils utiles à la création de sites web et applications web. C'est un ensemble de composant qui contient des codes HTML et CSS, des formulaires, boutons, et autres éléments interactifs, ainsi que des extensions JavaScript en option. On y obtient, grâce à son utilisation, un site ergonomique et esthétique.
Utilisant le langage Javascript, NodeJs permet de faire des requêtes asynchrones, ce qui permet une gestion des entrées/sorties de manière non bloquante, très pratique pour les applications qui ont besoin de “temps réel”. Utilisé en tant que serveur web, NodeJs permet des applications bien plus performantes que apache.
Créé en 2009, MongoDB (inspiré du mot "humon gous" qui signifie “énorme”) est un système de gestion de base de données NoSQL, orienté documents. Chaque document conserve les informations suivant un tableau associatif (clé => valeur). MongoDB est très facilement exploitable avec Node.js parl’intermédiaire de la librairie Mongoose.
HTML (désormais en version 5), pour Hyper Text Markup Language, est un langage de balise permettant d'organiser le contenant d'une page Web. Il est toujours accompagné de CSS (désormais en version 3), pour Cascading Style Sheets, qui permet de personnaliser une page HTML, et de créer une charte graphique.
Javascript est un langage de script "léger", qui peut être utilisé en tant que orienté objet, connu principalement comme langage pour le développement web coté client. C'est un lanage à faible typage, très permitif, qui fait que beaucoup l'apprécie, ou au contraire le rejette. NodeJs a su lui redonner ces lettre de noblesse en l'utilisant comme langage coté serveur.
Git est un logiciel de versionning et de partage des sources, afin de centraliser le code produit par une équipe de développeurs. Les outils de ce genre (comme Subversion) sont indispensables lors du travail en équipe, et disposent de puissantes fonctionnalités. On citera également la plateforme GitHub.com, utilisé pour l'hébergement public des sources
Aptana est un environnement de développement intégré (abrégé IDE) basé sur le logiciel libre Eclipse. Il est doté de plusieurs plugins qui facilitent le développement web, et dispose d'outils accompagnant le développement du logiciel.
En temps qu’application Web, le projet peut être découpé en trois parties distinctes :
Le client : contient le site web et le plateau de jeu. Ce ne sont que des interfaces, qui communiquent avec le serveur et affichent les données. Elle offre à l’utilisateur une interface pour qu’il puisse agir sur ces données.Utilisation de HTML5 (en particulier la balise canvas avec les libraires de CreateJs) et Bootstrap.
Le serveur : traite les données. Utilisation de NodeJs afin d’assurer le temps réel nécessaire au jeu.
La base de données : stocke les données. Utilisation de la base de données NoSql MongoDB.
Afin de produire un code clair et faciliter le travail en équipe, l’application fut décomposé en 5 couches distinctes
Persistance : Lecture et enregistrement des données en base de données. Cette couche fait également office d’ORM entre le serveur et cette dernière.
Models : Regroupement de tous les objets de l’application, comme “Utilisateur”.
Managers : Gestion de ces objets. C’est une couche métier qui s’occupe du traitement des données et définie toutes les règles de gestion de l’application.
Coordination : Composé d’un seul et unique fichier : app.js, qui gère également les configurations du serveur. La couche coordination joue le rôle d’une interface de communication entre le client (Vue) et la couche des traitements (Managers)
Vue : Ensemble des interfaces coté client, visualisables à l’aide d’un navigateur web. Elle n’effectue aucun traitement, elle se contente d’effectuer les demandes au serveur et d’afficher les données et résultats à l’utilisateur.
Cycle de vie
Afin d’être certain de respecter les délais imposés et être sur que chaque étape du projet soit validé avant de poursuivre, un cycle de développement en cascade nous paraissait plus sûr, et nous a permis de prendre le temps de bien réfléchir avant de nous lancer. Chaque tâche était prévue à l’avance, balisée (date de début, durée), et attribuée suivant la spécialisation de chacun.
Gestion des sources
Durant le développement en équipe, nous étions obligés d’avoir un lieu où centraliser toutes nos sources. Nous avons donc choisi d’utiliser le logiciel Git, auquel nous maitrisons désormais, ainsi que la plateforme GitHub.com pour l’hébergement.
Cette phase s’est effectuée à partir de la conception réalisée. Chacun des membres de l’équipe était spécialisé dans une couche ou plusieurs couches afin de bien séparer le travail, et ne pas avoir de problèmes de conflits sur les sources.
Ce développement, d’une durée d’environ 4 mois, nous a permit de construire une application solide et temps réel. Les joueurs peuvent s’inscrire, se connecter et jouer. Tout le jeu est en temps réel, car chaque action d’un joueur à des conséquences immédiates sur les autres. C’est grâce à la puissance de NodeJs et sa programmation événementielle que nous sommes parvenu à se résultat, ainsi qu’en portant une attention particulière au traitement des données dans la couche Manager.
Ces semaines de développement ont porté leurs fruits, et l’application dispose de multiples options : pages de tchats, pour la communication entre les joueurs et une page de classement, pour comparer les scores.
Sur le jeu, les joueurs dirigent un personnage qui peut se déplacer dans l’IstiA modélisé en 2D, de salles en salle, les fouiller pour trouver des objets, les ramasser, s’en équiper (armes/armures) ou les consommer (potions, nourriture), se cacher, attaquer les zombies ou les autres joueurs.
Pour reproduire le coté “Jeu de rôle”, tous les personnages disposent de points de vie, action, mouvement, faim, poids, qui influent sur leurs stratégies. Ils ont également une compétence propres à eux, qui influent sur les éléments cités ci dessus.
C’est donc au final un jeu par navigateur, unique dans son genre par l’utilisation de la balise canvas pour créer un jeu de ce type.
Abdelmounaim BELGHALEM : Designeur web à l’aide de bootstrap & développeur coté serveur
“Zomb’Istia ce sera pour moi le premier de mes meilleurs projets. Déjà avant de commencer, j’étais très excité à l’idée de développer un jeu à nous, dans lequel on pourrait mettre ce que l’on veut et comme on le veut. Et bien évidemment avec un groupe comme celui-ci, nous avons décidé de nous imposer certains défis, comme découvrir le NodeJs ou encore MongoDB.
Mais le plus intéressant a été tout de même les apprentissages imprévus comme par exemple la programmation asynchrone dont je ne me doutais pas que nous allions en entendre parler au début du projet. Pour finir, je dois bien entendu parler de la satisfaction que j’ai tiré à travailler avec un tel groupe de discuter sur nos idées et de chercher une solution qui plaise à tout le monde.”
Johan BRUN : Chef de projet & concepteur/développeur du serveur NodeJs suivant un modèle en couches
“Zomb’IstiA fut un vrai défi pour nous, et nous l’avons voulu comme cela.
Adepte des challenges, ce projet fut vraiment l’occasion de me donner à fond, d’approfondir mes compétences de développement. Techniquement, j’ai beaucoup appris : NodeJs, bootstrap, programmation événementielle, asynchrone… Tout cela m’était inconnu et j’ai aimé découvrir ces technologies.
Mais ce fut le coté humain que j’ai le plus apprécié : l’entraide, apprendre de l’autre, et traverser ensemble les phases difficiles, mais également de joie. J’ai pris très à coeur mes responsabilités de chef de projet, et j’ai surtout aimé travailler avec mon équipe, j’en garde un très bon souvenir.
Cela m’a également conforté dans mon projet professionnel, devenir développeur mais également y intégrer en parallèle un peu de management, car j’apprécie énormément ce coté humain et gestion de projet qui en ressort. ”
Brendan GOUIN : Designeur web à l’aide de bootstrap & conception/intégrateur de la base de données MongoBD
“I’d to like build a better world.
Passionné de karaté avec un fort caractère, j’ai toujours aimé les défis, c’est pourquoi au vu de la charge de travail qu’il y avait a réaliser dans ce projet j’ai tout de suite su que je voulais en être. A force d’entraide, de détermination et de motivation nous avons pu mener ce projet à terme et je suis fier d’avoir pu contribuer au développement de Zomb’IstiA.
« Lorsque tu fais quelque chose, sache que tu as contre toi ceux qui veulent faire la même chose, ceux qui veulent faire le contraire et l’immense majorité de ceux qui ne veulent rien faire. » – Confucius”
Florian HARDY : Designeur de l’interface de jeu avec Canvas(HTML5) et CreateJs & concepteur de la modélisation 2D de l’IstiA
“Transform your desires in priorities, and your life will be a success.
Ayant pratiqué de nombreux sports collectifs, l’esprit d’équipe est une chose primordiale, qui permet de relever les challenges les plus fous. L’expérience Zomb’IstiA m’a permis de renforcer mes compétences de travail en équipe, d’entraide et de partage de connaissances.
Techniquement, j’ai appris à concevoir une interface graphique avec la puissance de Canvas HTML5, ainsi que les librairies de design CreateJs et à me servir d’outils graphiques. J’ai également acquis les notions de programmation asynchrone et événementielle avec NodeJs. Ce projet a été révélateur de mon intérêt pour le développement d’application web, et j’aimerais par la suite en réaliser d’autres, et pourquoi pas m’y spécialiser dans mon avenir professionnel.
« Coming together is a beginning, staying together is progress, and working together is success. » – Henry Ford”
Soutenance de projet
Document .pdf tiré du site Prezi présentant notre projet durant la soutenance tenue le 25 Avril 2014. Retrouvez le Prezi original ici.
ConsulterRapport de projet
Détaillant le travail effectué, il aborde en profondeur chaque étape du cycle de vie, ce qui a été réalisé, ainsi que l'organisation du projet au sein du groupe.
Consulter