LATENCY : UI-UX

Mise en place des différents UI du jeu
- Interface Utilisateur (UI) :
  - Conception et création des interfaces in-game pour une expérience fluide et intuitive.
  - Mapping des contrôles pour une prise en main facile et efficace.
  - Création des menus, y compris le menu principal, les menus de paramètres, de sélection des niveaux, etc.
  - Sélection minutieuse de la police d'écriture pour une lisibilité optimale et une esthétique cohérente avec le thème du jeu.
- Interface in game
  - Voici une capture d'écran dans laquelle je vais détailler les différents éléments sur lesquels j'ai travaillé :

Dans le coin supérieur gauche :
- Interface de Ressources :
  - Affichage du nombre de ressources du joueur en temps réel, représenté en bleu.
  - Icône d'ADN pour symboliser les ressources.
  - Indication dynamique du nombre de ressources ajoutées toutes les 10 secondes, affichée en blanc avec un signe "+" à côté.
  - Animation de l'affichage et de la disparition progressive du chiffre toutes les 5 secondes pour éviter une surcharge visuelle.
Dans le coin supérieur central :
- Timer :
  - Timer qui va décroitre au fil du temps.
Dans le coin supérieur droit :
- Représentation des Zones :
  - Affichage graphique d'une zone avec la série "0 / 9".
  - Le premier chiffre indique le nombre de zones actuellement possédées par le joueur.
  - Le deuxième chiffre indique le nombre total de zones dans le jeu.
  - NB : Se réfère uniquement au nombre de zones du joueur, pas à celles de son adversaire.
- Indicateur de Bouclier de Base :
  - Indique si le bouclier de la base principale du joueur est actif.
  - Donne également la même information pour le bouclier de la base adverse.
  - Le bouclier adverse disparaît du UI une fois que le joueur a conquis les 9 zones.
Dans le coin inférieur droit :
- Mini-map :
  - La base du joueur est représentée en vert, tandis que la base ennemie est en rouge.
  - Les 9 zones non conquises sont affichées en gris.
  - Les zones conquises par le joueur prennent l'icône de la base principale et deviennent vertes, celles conquises par l'adversaire deviennent rouges.
  - Les unités du joueur sont représentées par des petits ronds verts, tandis que celles de l'adversaire sont en rouge.
  - Lorsqu'une unité entre dans une zone vide, des cercles concentriques s'affichent pour indiquer que la prise est en cours.

UI de prise de contrôle des zones** :
- Une jauge se remplit progressivement à mesure que l'unité reste dans la zone.
- Le visuel est conçu pour être facilement compréhensible par le joueur.
- Les playtests ont validé l'efficacité de ce design.

UI du magasin :
- Nom de l'unité.
- Texte descriptif concis.
- Affichage des 5 statistiques de l'unité : vie, vitesse, attaque, portée et prix d'achat.
- Utilisation de l'icône d'ADN pour représenter le prix d'achat.
- Disposition ergonomique pour une lisibilité optimale.

Mapping des contrôles
- Contrôles manette :
  - Défi de taille car le jeu se joue uniquement à la manette.
  - Mapping précis des commandes.
  - Conception du UI dédié aux contrôles manette.
  - Discussions en équipe pour définir les meilleures configurations.
  - Tâche difficile en raison du nombre important de contrôles à intégrer.
  - Sobre mais compréhensible pour les joueurs.
  - Inspiré par le mapping de Halo Wars pour une expérience familière.
  - Chaque touche de la manette est détaillée et va à l'essentiel.

Menu du jeu
- Menu principal

Conception sobre pour une compréhension rapide du jeu
Utilisation de la carte du jeu avec une caméra proche du sol et la lune en arrière plan
Placement de deux monstres aux extrémités de l'écran pour que chaque joueur puisse en voir un
Titre du jeu positionné à chaque extrémité pour une visibilité par les deux joueurs
Boutons d'options (lancer le jeu, ouvrir les contrôles, quitter) placés du côté du joueur 1 pour lui donner le contrôle
- Menu victoire / défaite

Conception sobre avec un fond noir et des effets de "neige" en arrière-plan.
"VICTOIRE" affiché d'un côté et "DÉFAITE" de l'autre pour une clarification rapide.
Deux boutons disponibles : un pour retourner au menu principal et un pour quitter le jeu.
Contrôle des boutons attribué au joueur ayant subi la défaite, lui permettant de choisir de prendre sa revanche ou de quitter le jeu.
Création du tutoriel
- Création du Tutoriel :
  - Difficulté principale : Les joueurs avaient du mal à comprendre les mécanismes de base du jeu lors des playtests.
  - Tâche attribuée : Élaboration d'un tutoriel pour expliquer les mécanismes essentiels aux joueurs.
  - Contraintes temporelles : Disponibilité limitée d'une semaine pour créer le tutoriel
- Approche choisie :
  - Cinématique d'introduction : Création d'une séquence visuelle concise qui se déclenche au début de chaque partie.
  - Objectif : Offrir une explication rapide et visuelle des éléments de gameplay clés aux joueurs.
- Test en direct :
  - Utilisation des membres de l'industrie présents lors de la remise finale comme premiers testeurs.
  - Pas d'intervention verbale pendant le test pour éviter tout biais.
  - Résultats : Les deux testeurs ont compris les mécanismes du jeu et ont pu jouer efficacement, démontrant l'efficacité de la cinématique/tutoriel.

EN CONCLUSION
- Mon travail au niveau du UI-UX m'a permis d'amener les différentes mécaniques de jeu que je souhaitais, tout en favorisant la compréhension du joueur face aux dites mécaniques. Je me suis vraiment rendu compte de l'importance du design UI dans un jeu vidéo, et surtout à quel point ce dernier est important pour que le joueur ne soit pas perdu lorsqu'il arrive dans une partie, et surtout, qu'il prenne du plaisir !

Retour