Démo : lien
Table des matières
Les classes
Familiers avec la technologie orientée objet, nous avons décidé d'implémenter des classes en Javascript. Cette technologie est adaptée à ce style d'application, elle permet d'améliorer la lisibilité du code et sa modularité. Nous nous sommes aidés du cours sur le site Mozilla.
Nous avons, pendant deux semaines, recommencé notre projet encore et encore jusqu'à ce que l'organisation du code nous convienne. L'architecture du code est un des aspects les plus important que nous avons voulu mener à bien pour que le jeu soit adaptatif et évolutif.
La classe Game contient l'ensemble du jeu, c'est à dire un Environment, le Level courant et le Player.
La classe Environment contient : les décors, lumières et particules.
La classe Level contient : l'armée ennemie et les défenses.
Les classes décrivant les "objets" de notre jeu sont : les invaders, le joueur, les défenses, les balles... Elles héritent de THREE.Group. Nous construisons chaque "objet" à l'aide d'une matrice produisant un ensemble de cubes de taille unitaire que nous ajoutons au groupe.
Par soucis de performance et pour un aspect rétro du jeu, nous avons préféré cette approche au chargement de modèle.
Un dessin vaut mieux qu'un long discours :
Les détails
La performance
La performance dans un jeu est primordiale. Le jeu doit être léger sans être minimaliste. Pour trouver un compromis, nous avons du :
- Fusionner les objets (à l'aide de merge) ne nécessitant pas de précision dessus (ie. une défense se détruit petit à petit, elle ne doit donc pas être fusionnée sans quoi elle se comportera comme un bloc et se détruira comme un bloc).
- A défaut d'avoir eu le temps et la patience de trouver une alternative aux Raycaster. Nous leurs avons donnés un ensemble de Mesh cibles minimal (ie. pour le joueur : les seules cibles sont les aliens et les bunkers. Inutile donc de passer scene.children).
Le jeu tourne en moyenne entre 30 et 60 FPS.
Les tirs
Un tir est une action effectuée par un invader ou un joueur. Les particularités et les défis techniques des tirs sont :
- Le tireur peut tirer plusieurs missiles. Il suffit de créer un tableau de balles dans la classe du tireur. Ensuite, à lui de les détruire quand il le faut et de les faire avancer.
- Les balles sont éclairantes. Ce défi nous a tracassé car Three.js ne permet pas de créer de façon élégante des lumières pendant l’exécution du renderer (cf issue). Il a fallu créer une poignée de lumières sous chaque tireur.
Lorsqu'un missile part, une des lumières s'allume et le suit. Elle s’éteint lorsqu'il est détruit.
L’effet est au rendez-vous même si le WebGLRenderer classique ne supporte que 8 lumières à la fois. Cela a pour effet d'éteindre temporairement certaines lumières de l’environnement (la solution du WebGLDeferredRenderer a été explorée sans succès). - La vitesse des missiles et la cadence des tirs se gèrent aléatoirement.
L'armée
L'armée ennemie est "hiérarchisée". Elle contrôle ses bataillons qui contrôlent leurs aliens. Le principal avantage d'avoir une telle organisation est la modularité. On peut créer différents types d'aliens avec des valeurs de points différents, des mouvements différents, et les incorporer à l'armée dans des bataillons.
Un mouvement non similaire de chaque bataillon nécessite néanmoins de contrôler qu'il n'y ait pas chevauchement si un bataillon va plus vite que le suivant.
L'intelligence artificielle
Nous avons simulé une pseudo IA par les points suivants :
- Les aliens tirent à intervalles de temps aléatoire, ils diminuent en fonction de la difficulté.
- Le bataillon sélectionne l'alien le plus proche du joueur comme candidat au tir.
Le son
L'introduction du jeu se fait calmement avec une musique originale du film Interstellar : Stay.
Nous avons voulu une ambiance un peu disco, sombre et colorée. Un bon morceau de nos fameux robots Daft Punk : Veridis Quo.
Nous avons préféré des musiques complètes à celles des 8bits/game pour souligner les aspects aboutis et soignés de l'interface et du jeu.
Les limites d'implémentation
La gestion des bibliothèques : Require JS
Dans cette étape, nous devions constituer des modules à partir des différents fichiers javascript chargés depuis un fichier javascript dit "main". Le but était de réduire le nombre d'appels de script afin d'optimiser le chargement dans le fichier principal html.
Arrivés en milieu de projet, nous avons essayé d’intégrer Require.js sans succes.
Les librairies
- Please.js : Pour la gestion de couleurs automatiques et aléatoires.
- Tween.js : Pour des animations fluides et naturelles.
- Threex.js : Parce que c'est la librairie dédiée au jeu de Three.js.
- ParticleEngine.js : Parce que nous sommes dans l'espace, il fallait des étoiles.
- Buzz.js : Pour gérer la musique et les effets audio.
Quelques captures
