Semaine 02 - David Bouchard-Gagnon

Voici en quelques images et descriptions le travail que j'ai effectué lors de la semaine 02 de ce projet de contrainte.

Mes tâches étaient principalement les suivantes:

- Vérifier comment fonctionne UMG (outil de UI) dans UE4
- Vérifier comment brancher le Blue Print pour faire fonctionner le UI
- Faire des croquis pour trouver la direction artistique du UI
- Penser au HUD du jeu (immersif ou non)
- Conclure la DA des UI pour produire les Mock Ups la semaine prochaine
- Vérifier si la DA est respectée



Fonctionnement de UMG / Blue Print pour le UI

En gros, UMG est le nouvel outil pour les interfaces apparu avec la nouvelle version 4.5.1 de UE4. L'outil permet de placer des boutons rapidement dans l'écran et voir les possibles résultats. Il permet également de créer un UMG_WIDGET qui permet d'avoir un Blue Print directement dans le UI créé.

Voici quelques images montrant mes tests avec UMG.

Cet écran représente l'écran selon la résolution choisie. On peut glisser des boutons dedans qui apparaitront sur l'écran lorsque le UI sera activé.

Blue Print qui permet d'appliquer une image qui varie selon le nom d'un Dynamic Material Instance et de l'image appliquée au bouton.

Ce Blue Print détecte le statut des costumes (activé, désactivé et bloqué). Selon le statut, la texture du matériel change pour une version colorés, désaturée et silhouette. 

Croquis pour la DA des interfaces / HUD / Conclure la DA

Plusieurs tests ont été fait pour trouver la direction artistique du UI dans le but d'avoir un interface qui appuie bien le game play. La grosse question  était de savoir si on faisait un UI immersif ou présent dans le HUD. Voici donc en premier lieu les tests pour un UI dans le HUD du joueur.

Roulette pour illustrée le D-Pad pour faire comprendre que chaque flèche permet de sélectionner un personnage différent. Au centre un coeur avec le chiffre dans le but de montrer l nombre de vie restant avant de mourir. En haut a gauche, les espaces pour les billes à collectionner et la clé à récolter (à noter que chaque bille a un emplacement précis).

Mêmes éléments que l'image précédente, mais une différente disposition. La roulette doit absolument être à gauche pour ne pas confondre avec les autres boutons de la manette (A,X,B,Y) mais bien les identifier au D-Pad qui est à gauche.

Interface avec la tête tu personnage actif en haut et sa couleur également en fond. Les controles du D-Pad sont montrés en bas en dessous du choix des personnages.

Même chose que l'image d'avant, mais avec la grenouille pour montrer les possibles changements.

Affichage plus compact. Changement de perso qui devrait se faire avec des triggers gauche ou droite plutot que le D-Pad. Oubli d'un indicateur de vie.

Interface du bas plus poussé avec l'effet de roulette du menu de Mac. Ajout du coeur pour la vie.

Après quelques discussions, nous avons décidé que l'interface le plus efficace serait un interface plus discret et immersif. Voici donc la solution:

En jouant, rien n’apparaît à l'écran en tant que HUD. Lorsque le joueur collecte une bille ou une clé, la section concernée du UI apparaît dans l'écran et affiche la nouvelle acquisition. Le joueur peut toutefois vérifier en tout temps ses possessions en pesant sur START pour aller au menu PAUSE. Voici un petit schéma qui illustre le tout:

Mélange de fade in et de translations pour afficher les différents éléments du UI. La barre de vie serait plus intra-diégétique et serait sous formes de billes à la ceinture du perso ou de petites créatures ''coeurs'' qui suivent Nemo.

Ayant décidé d'un UI plus immersif, il faut quand même trouver le look. J'ai donc fait des tests premièrement plus funkys, et deuxièmement plus classiques pour trouver la forme des différentes boîtes de dialogues avec le joueur.

Formes de boîtes plus funkys, les numéros 5,6,7 et 8 sont retenus comme intéressants.

Formes plus classiques, les formes 2 et 3 de la première rangée sont retenues.

Il ne restait plus que tester les nouveaux UIs en overlay du concept de Edwin. On a décidé d'y aller pour les plus classiques donc je me suis concentré sur ceux-là.

Le 3ième de la première rangée. Efficace, mais selon quelques membres de l'équipe, évoque trop une bulle de manga lorsqu'un personnage crie. Les coins sans lignes de démarcations questionnent également. On aime par contre l'ornement central en haut.

Plus classique, victorien, mais trop brute pour juger. Manque de caractère comparativement à l'autre.

J'ai décidé de faire un test en faisant le look du plus classique avec un ornement comme celui plus expressif. Le résultat est concluant et facilement reproductible sur des boutons et images de différentes tailles.

Classique et victorien, mais original et intéressant avec l'ornement central. Le trucs dans les coins ajoutent une touche plus distinguée qui rappelle l'époque victorienne dans laquelle l'histoire originale du jeu prend place. Concept voté et approuvé.

Vérification de la DA au sein de mes collègues.

La vision artistique est encore respectée, aucun écart remarquable pour l'instant. L'équipe communique bien et tout avance selon les plans et la vision globale.