L’idée

Le projet de créer un mini-jeu m’est venu rapidement après la présentation du travail de fin d’année.

Lorsque nous avons complété le Google sheet «100projetsTFA», une idée de mini-jeu retraçant une année en DWM m’avait attirée.

J’ai choisi de travailler sur cette idée. J’ai alors commencé à étudier la faisabilité du projet: les ressources nécessaires, les connaissances requises, l’intégration, etc. Le projet me semblait abordable, je me suis donc lancé.

Son évolution

Pour le site du projet et pour le projet lui-même, je voulais un style cartoon, enfantin. J’ai commencé par réaliser des croquis du jeu, c’est celui-ci qui influencera le design du site.

Photos de croquis préparatoire du jeu

Croquis préparatoires du projet

Après quelques jours de recherche, je me suis tout doucement dirigé vers une autre histoire.

  1. Un étudiant qui essaie de réussir son année.
  2. Un étudiant qui essaie d’arriver à l’heure en cours.
  3. Un employé qui essaie d’arriver à l’heure au travail.

En comparaison avec la première, la dernière idée est plus facilement compréhensible pour les utilisateurs extérieurs à l’option DWM. Ensuite, elle demande moins de représentations abstraites. (personnification des projets réalisés pendant l’année, etc.)

Mes choix

J’ai choisi un design rétro, pixelisé, pour le mini-jeu; les images sprites sont ainsi plus faciles à dessiner et plus optimisées car, de très petite taille.

Pour la réalisation, j’ai utilisé la librairie Phaser.io. C’est une librairie open source servant exclusivement à la création de jeux. Il en existe d’autres, parfois plus simple à prendre en main, mais Phaser a l’avantage, en plus d’être open source, d’avoir une grande communauté et une longue série d’exemples.

Réalisation

J’ai commencé par la réalisation du mini-jeu. J’ai réalisé plusieurs maquettes de celui-ci en ajoutant à chaque fois de nouveaux éléments, afin d’arriver progressivement au résultat final. Vous pouvez consulter ici ces maquettes.

J’ai développé ce jeu de manière à pouvoir changer le niveau facilement. En effet, il suffit de charger un fichier JSON contenant les informations du terrain. Une seule image sprite permet de gérer tous les éléments du décor. Le jeu se présente sous forme d’une grille, pour chaque case, il faut définir, dans le JSON, l’ID de l’image à afficher. Des programmes tels que Tiled permettent de créer facilement les fichiers JSON des terrains de jeux (appelé tilemaps).

Photo de la grille du niveau

Grille de composition dans Tiled.

Logo du programme Tiled

Plusieurs éléments du développement ont été compliqués à comprendre ou à mettre en place: le système de scène Phaser (Les différents écrans: Accueil, pause, fin de partie, etc.), le système de réinitialisation du jeu, etc. La documentation Phaser n’est pas facile à utiliser et est difficile à comprendre. Heureusement, ce framework est suivi par une large communauté et des forums permettent de trouver des réponses et des solutions efficaces. Je disposais également de multiples exemples proposés par le Phaser Labs. Grâce à toutes ces solutions, j’ai réussi à surmonter ces difficultés et développer mon side-project.

Présentation

Pour présenter ce projet, j’ai réalisé ce site. Je voulais qu'il soit dans le même esprit que le projet: fun, coloré, cartoon. J’ai repris les mêmes couleurs que celles utilisées dans le jeu et j’ai voulu garder cet esprit «pixel».

J’ai donc utilisé la police Press Start 2P pour garder l’esprit du jeu, combinée avec la Roboto Slab afin de garantir une bonne lisibilité dans les paragraphes. Pour les images et les boutons, j’ai également essayé de reprendre des formes rappelant le jeu.

Conclusion

J’ai trouvé ce travail intéressant car, il m’a permis de me rendre compte de mes capacités à gérer seul un projet d’un bout à l’autre. J’ai aimé travailler sur ce projet car, le sujet me correspondait. Je suis satisfait de mon projet car, il est fonctionnel et divertissant.

Aller au projet