On A Mission

Scroll ↓
Cyberpunk

Brief

Cadre du projet
Prototype réalisé en 7 jours (projet personnel).
Moteur & Outils
Raylib (C++) — Unreal Engine (Blueprints) — Figma
Pitch
Jeu d'infiltration tactique en vue du dessus axé sur l'interaction avec l'environnement et l'UI.
Parties abordées
UI/UX et intégration du terminal : Conception du HUD ambré au style vectoriel, intégration du terminal de chat en temps réel et gestion des menus d'interaction contextuels sur les objets
Systèmes de gameplay & Infiltration : Logique de ligne de vue, réseau de distractions pour dévier l'attention des gardes et détection.
Game Flow et boucle de jeu : Progression dynamique des objectifs jusqu'à l'écran de fin (Mission Complete) avec calcul des statistiques (temps, infiltration, données extraites).
Palette de couleurs
#E8A020
Hexa
#1e1e1e
Hexa
#E084D1
Hexa

Le projet est présenté ci-dessous sous forme de "Site Vitrine". Les vidéos sont hébergées sur YouTube afin d'éviter d'alourdir la page.
Pensez à mettre la qualité de la vidéo en 1080p dans les réglages en haut à droite lorsque vous cliquerez sur une vidéo.

UI/UX

Pour réaliser la carte 2D interactive, au lieu d'utiliser une Scene Capture 2D classique (qui permet de prendre une capture de la scène 3D vue de haut), j'ai préféré inverser les rôles et utiliser une caméra orthographique, pointant vers le bas de la scène 3D.

Le principal avantage pour un prototype est que le joueur contrôle directement cette caméra, ce qui améliore grandement la fluidité, le gamefeel même pour un prototype, ainsi que l'interactivité en général car pour déplacer l'agent sur le terrain, le jeu récupère facilement sous forme de vector la position sélectionnée dans le monde.

Le plan en 2D est donc simplement la représentation minimaliste de la vraie map, en 3D posé directement sur le "vrai" level faisant office de plafond.

Game map showing rooms like lobby, meeting room, hallway, stairwell, vault, warehouses, and mission chat window.
Play
Communication IA

L'agent sur le terrain peut réagir à son environnement. Que ce soit lorsqu'il interagit avec un élément et qu'il détecte un son, ou pour donner des précisions lorsque le joueur lui demande de se diriger vers un endroit.

Il sert de relais afin d'informer le joueur, par message, via sa caméra ou par l'affichage de la mini-carte, sur l'univers dans lequel il évolue.

Il peut également, dans certains cas, poser des questions au joueur, que ce soit pour être rassuré, ou plus simplement lorsqu'il souhaite avoir son avis. Cela permet de rendre l'agent sur le terrain plus vivant.

Gameplay

La mécanique principale de ce jeu est la distraction : le but est de compléter les objectifs de la mission sans que l'agent sur place ne se fasse repérer. Pour ce faire, l'agent peut compter sur l'Opérateur (vous-même) pour l'aider à passer les différents obstacles.

Le joueur a la possibilité de pirater à distance les différents objets interactifs visibles. Il existe deux types d'objets interactifs :
L'un étant identifié sur la carte 2D à l'aide d'une icône représentant l'objet en question (caméra, imprimante...). L'autre étant identifié par des points d'interrogation. Dans l'exemple ci-dessous, un des « ? » représente simplement une maquette budgétaire à voler, tandis qu'un autre représente un levier ouvrant l'accès à la salle des serveurs.

Pour réaliser ce système d'interaction basé sur l'objet sélectionné, j'ai utilisé un système d'interface où j'appelle la même fonction (nommée ici ExecuteAction avec un paramètre de type integer pour savoir quelle action le joueur a choisie) et chaque objet exécute sa propre action en conséquence (notamment une fonction TriggerNoise qui permet à n'importe quel objet d'émettre un son de distractionchaque classe enfant peut l'override pour y mettre ses propres paramètres, son propre son, cooldown...).

IA et State Trees

Afin de réaliser le système d'intelligence artificielle, j’ai utilisé les State Trees. Concrètement, cela permet de créer une logique facilement compréhensible, légère en termes de performances, tout en améliorant la modularité ainsi que la maintenance.

Ci-dessous, vous trouverez deux vidéos :
L'une montrera la logique globale utilisée à l'aide des State Trees pour les ennemis. Vous retrouverez les états principaux de l'IA (patrouille, état d'alerte, lorsqu'elle entend un bruit...) ainsi que la logique dans chaque état.

La seconde montrera la manière dont est géré le système de détection visuelle de l'agent. Le principe est plutôt simple : à l'aide d'une interface que possèdent les ennemis, lorsque l'AIPerception de l'agent se met à jour, il vérifie si l'acteur possède l'interface. Si oui, il appelle une fonction sur l'acteur qui le fait apparaître sur la minimap. Si l'agent perd de vue l'ennemi en question, un délai de recharge (ou temps d'attente / compte à rebours) de 15 secondes se déclenche ; à la fin de celui-ci, si l'agent n'a pas revu l'ennemi, l'icône de l'ennemi disparaît.

Boucle de jeu

À la fin de la partie, un résumé de celle-ci est affiché à l'écran. Pour le réaliser, j'ai créé l'animation complète dans l'UMG d'Unreal Engine, et au niveau des statistiques, elles sont toutes stockées de base dans le GameMode ou le GameState.

Notamment pour le temps passé, je stocke le temps de départ, puis je récupère le temps d'arrivée et, en soustrayant les deux, j'obtiens le temps passé en secondes qu'il ne me reste qu'à formater.

Également au niveau de l'objectif bonus, si le joueur l'accomplit, j'appelle depuis une interface sur le GameMode la fonction SetBonusDone, ce qui me permet à la fin de savoir si oui ou non le joueur a réalisé l'objectif bonus.

Mission Complète

Découvrez la mission complète de ce premier prototype ci-dessous :

Autres Projets

Pour explorer les autres projets, sélectionnez le bouton Précédent ou Suivant.