Logo
Techniques d'intégration multimédia
Retour

Jeu web – Évasion & Frissons

Conception Intégration Médias Programmation
Capture 1 de Jeu web – Évasion & Frissons
Capture 2 de Jeu web – Évasion & Frissons
Capture 3 de Jeu web – Évasion & Frissons
Capture 4 de Jeu web – Évasion & Frissons
Capture 5 de Jeu web – Évasion & Frissons
Capture 6 de Jeu web – Évasion & Frissons
Capture 7 de Jeu web – Évasion & Frissons
Capture 8 de Jeu web – Évasion & Frissons
Capture 9 de Jeu web – Évasion & Frissons
Capture 10 de Jeu web – Évasion & Frissons

Réalisé par

Jade Mayrand

Cours

Réalisation de produits numériques interactifs II

Année

2ème année

Technologies

Adobe Animate, Illustrator, Adobe Audition, PHP, HTML5, CSS, TypeScript

Le projet

J’ai adoré travailler sur ce projet où j’avais le contrôle total sur chaque aspect du jeu! J’ai conçu tous les médias dans Illustrator, animé les personnages avec Animate et programmé les interactions entre le protagoniste et les ennemis. Dans Évasion & Frissons, vous incarnez la princesse Yuna, qui doit s’échapper de la forteresse du maître Misaki en affrontant ses élémentaires et en contournant des cristaux de glace. Le jeu propose deux niveaux : d’abord s’échapper du château, puis traverser la cour enneigée, avec un suivi du nombre d’ennemis éliminés comme défi personnel.

Étapes du projet

Un bon jeu vidéo repose toujours sur une histoire qui motive le joueur et donne un sens à ses actions. Il doit proposer un objectif clair à atteindre afin de maintenir l’intérêt et l’engagement. Dans le cadre de ce projet, certains critères devaient également être respectés afin de mettre en pratique nos connaissances, notamment la gestion de compteurs, les collisions, les projectiles, ainsi que la création, la destruction et le déplacement d’objets.

Illustration Synopsis

Tous les éléments graphiques du jeu ont été créés à l’aide d’Illustrator, incluant les personnages, les obstacles, les projectiles et les décors. Des images de référence ont été utilisées pour retracer les formes tout en limitant le nombre de détails. Chaque partie des personnages a été clairement identifiée et placée dans des calques distincts afin de faciliter l’étape de l’animation.

Illustration Création des médias

Le personnage principal ainsi que les antagonistes ont été animés à l’aide d’Animate. La princesse possède des animations différentes selon ses actions : lorsqu’elle est immobile, en déplacement ou lorsqu’elle utilise ses pouvoirs. Ses bras et ses jambes sont animés, ses cheveux et sa robe bougent au vent, et ses yeux clignent. Les élémentaires ont également été animés : le feu sur leur tête est en mouvement, leurs petits pieds bougent et ils effectuent de légers sauts lorsqu’ils se déplacent.

Illustration Animation

Avant de commencer la programmation, il est essentiel de bien structurer le code. Le jeu étant programmé en orienté objet, il a fallu déterminer les classes, les sous-classes et les classes abstraites à l’aide d’un diagramme UML. Les variables et les fonctions propres à chaque classe ont également été définies. Les flèches du diagramme représentent les différents types d’interactions entre les classes.

Illustration Structuration du code

Une fois la structure établie, la phase de programmation a pu commencer. Les obstacles et les ennemis apparaissent de façon aléatoire sur l’interface de jeu. Chacun des quatre types de projectiles doit détecter le type d’élémentaire touché et l’éliminer uniquement si le projectile correspondant est utilisé. La princesse perd une vie chaque fois qu’elle entre en collision avec un cristal ou un élémentaire. Lorsque toutes ses vies sont perdues, la partie se termine. Le jeu comprend également un compteur du nombre d’ennemis éliminés ainsi qu’un chronomètre déterminant la fin de la partie.

Illustration Programmation

Les tests constituent une étape essentielle du développement. En jouant plusieurs parties, il est possible de détecter les erreurs et les comportements inattendus. Tous les scénarios possibles doivent être testés afin de s’assurer du bon fonctionnement du jeu. Il est également utile de faire tester le jeu par des collègues ou des amis afin de recueillir leurs impressions et d’identifier les éléments à améliorer pour offrir une expérience utilisateur agréable et donner envie de rejouer. Le jeu est maintenant prêt pour la mise en ligne!

Illustration Tests

Un projet de Jade Mayrand

Je suis une personne très curieuse, toujours avide d’apprendre sur une multitude de sujets. Ce qui m’a attiré vers le programme TIM, c’est la possibilité de travailler dans des domaines variés. J’apprécie particulièrement de pouvoir mettre à profit ma créativité et mon esprit logique dans chacun des projets sur lesquels je collabore. J’aime tous les aspects du programme, qu’il s’agisse de design, de montage vidéo ou de programmation. En dehors de la TIM, je suis passionnée par les voyages, l’apprentissage de nouvelles langues et la lecture.

Conception
8/10
Intégration
7/10
Programmation
8/10
Médias
9/10

D'autres projets de Jade