Ghosts Smash

Case Study

Si vous voulez en savoir plus sur mon Side Project

Introduction

Voici la fin d’année qui approche et avec elle, le fameux TFA! Les objectifs de ce projet? Démontrer que je suis apte à passer en troisième, et du coup m’aider à trouver un stage pour l’année prochaine dans une entreprise qui me corresponde le plus possible.

Ci-dessous, toutes les étapes qui m’ont conduite vers la réalisation de ce dossier.

Phase de recherche

Au début de l’atelier du TFA, nous avons reçu un questionnaire pour nous aider au mieux à bien commencer notre projet.

Quelle sera ta stratégie? Tu la définis, tu choisis l’histoire, le contenu, le scénario. Tu fais des recherches sur ton « agence » parce qu’elle va faire des recherches sur toi. Que veux-tu qu’elle trouve?

Pour vous c’est l’occasion de: savoir où vous en êtes dans votre formation; imaginer un projet qui vous intéresse; développer et mettre en avant vos compétences; travailler pour vous; vous amuser, mais aussi de: préparer votre entretien de stage; montrer de l’envie par rapport à votre futur métier; afficher clairement vos motivations et vos compétences; montrer ce que vous pouvez apporter en stage; donner envie de croire en vous.

Tout en tenant compte de ce que je venais de lire et du briefing, j’ai réfléchi à ce que je voulais faire comme projet de fin d’année. Ce qui me plaît le plus dans ce domaine, c’est le code, que ce soit en front-end ou en back-end. Je me suis donc penchée sur un projet plus porté sur le code que sur le design.

Pour la fin de l’après-midi, j’avais un projet en tête: un jeu pour smartphone fait presque entièrement en JavaScript. C’est ainsi que « GHOSTS SMASH », un jeu où il faut écraser le plus de fantômes possible, est né.

Phase d’inspiration

Une fois le projet défini et le thème validé par mes professeurs, je me suis mise à chercher des inspirations pour mon futur jeu. J’ai commencé large en prenant des images qui n’avaient rien avoir avec le web mais qui me plaîsaient par rapport aux couleurs et à l’atmosphère.

Quand l’ambiance générale que je voulais donner à mon jeu a été plus ou moins définie, j’ai affiné ma recherche d’inspiration. J’ai commencé à regarder des designs de jeux, des applications, des illustrations de fantômes, …

Après tout cela, je voyais déjà beaucoup plus clair dans mon projet: où je voulais aller et ce que je voulais en faire. Malgré que je n’ai pas fait du design une priorité dans ce travail, j’ai veillé au fait que mon jeu soit agréable et ergonomique, comme vous pourrez le voir dans la phase suivante.

Phase visuelle

La phase d’inspiration finie, je me suis penchée sur la partie visuelle du projet. Comme c’est la branche du métier qui m’inspire et qui me plaît le moins, j’avais quelques appréhensions. Mais finalement, cela s’est agréablement bien passé car j’étais motivée par ce travail.

J’ai décidé d’un set de couleurs de base pour le fond de mon jeu, des couleurs pep’s et dynamiques. J’ai également opté pour un dégradé en oblique vertical qui donne pas mal de mouvement dans le fond.

Couleurs utilisées pour le fond

Ensuite, j’ai dessiné mes fantômes sur illustrator. Afin de varier dans le design du jeu et de sa page de présentation, j’en ai créé 4. Pour ne pas que ça flashe de trop avec les couleurs du fond, les fantômes sont travaillés sur 3 couleurs.

Couleurs utilisées pour les fantômes

Pour la typographie, j’en voulais une qui ne soit ni trop ronde, ni trop carrée non plus. J’ai donc fait pas mal de recherche et la police Khand m’a tapé dans l’oeil.

Illustrations des différents fantômes Illustrations des différents fantômes

Phase de conception

Après la mise en place du côté visuel, j’ai commencé à créer les wireframes finaux. C’était une étape révélatrice dans mon projet étant donné qu’elle dresse vraiment une vue d’ensemble de ce à quoi mon jeu va ressembler.

Une vision claire et nette dès le début, c’est bien plus facile pour développer par la suite. Plus besoin de chipoter, les détails sont là et on ne pense plus qu’au développement.

Pour les boutons, je suis restée dans le même style graphique que le jeu et la page de présentation. C’est à dire, un dégradé dans la couleur des fantômes et le texte qui reprend les nuances de couleurs du fond.

Phase de développement

Place à l’intégration!

Tous les visuels et wireframes étant créés, je peux concentrer l’entièreté de mes forces sur la partie que j’attendais le plus dans ce travail. Ce pourquoi j’ai choisi de faire ce projet, ce que j’aimerais faire le plus possible durant mon stage mais également plus tard si j’ai la possibilité de travailler dans le web: le développement.

J’ai commencé à coder simplement en JavaScript, mais j’ai rencontré quelques difficultés. Après quelques recherches sur le net et en parlant à d’autres étudiants qui, comme moi, faisaient des jeux, j’ai décidé d’utiliser Pixi.js pour m’aider.

Une vraie révélation pour moi, j’en ai pris connaissance et lu la documentation en une soirée. Le lendemain, avec Pixi.js, j’ai refait en une matinée, tout ce que j’avais fait en trois jours de simple JavaScript.

Mon jeu est à présent terminé, il ne me reste qu’à fignoler à tête reposée quelques points de détail. C’est vraiment un projet que j’ai apprécié faire du début à la fin.

Un grand merci à tous mes professeurs qui m’ont aidée dans ce projet, ainsi qu’à mes amis et à ma famille qui m’ont soutenue tout au long de l’année!