Tutoriel – Implémentation d’une interface utilisateur (menu et HUD) dans l’environnement virtuel sous Unreal Engine 4

Tutoriel - Implementation d’une interface utilisateur (menu et HUD) dans l’environnement virtuel sous Unreal Engine 4


Dans toute application – ou presque – l’interaction entre l’utilisateur et la machine se fait pas le biais de l’interface utilisateur (comme son  nom l’indique plutôt explicitement). Elle va permettre à la personne qui prend en main notre application ou notre jeu d’effectuer différentes actions que ce soit la navigation, l’arrêt de l’application, etc. Cela vaut aussi bien pour une application 2D, 3D ou de réalité virtuelle, bien que dans notre cas c’est la troisième option qui nous intéresse et que nous allons étudier.

Nous allons ici prendre le cas d’un jeu, dans le but de rendre ce tutoriel plus ludique mais également de nous permettre d’explorer un autre aspect de l’interface utilisateur, le Head Up Display (HUD) par le biais duquel les informations importantes sont relayées au joueur.

Nous allons donc voir quelles sont les étapes de la création d’un HUD grâce au moteur graphique UE4 qui va mettre à disposition tout les outils nécessaire à la mise en place d’un jeu en VR (Virtual Reality). En cliquant ici vous serez redirigé vers le site d’Epic Games l’éditeur et développeur du moteur où vous pourrez installer Unreal Engine 4.

Une fois le moteur installé nous allons pouvoir commencer à nous amuser, pour cela il est nécessaire de créer une scène compatible à la VR et plus précisément au type de casque sur lequel nous voulons faire fonctionner notre application / jeu. Pour cela, plutôt que de vous remettre ici les étapes nécessaires, voici un lien vers un autre de mes tutoriels où tout cela est expliqué en détail.

Revenons maintenant à notre sujet principal : la création d’interface utilisateur et plus précisément d’un menu et d’un HUD dans un environnement virtuel.


Voici un léger sommaire des étapes à suivre pour réaliser notre objectif :

  • Création d’un HUD
    • Création d’un widget
    • Création d’un blueprint nous permettant de gérer notre widget
    • Implémentation de notre nouveau composant ‘HUD’ dans notre scène
  • Création d'un menu
    • Création graphique du menu
    • Gestion des actions proposées par notre menu

Création d’un HUD

Création d’un widget

Tout d’abord qu’est-ce qu’un widget au sens d’UE4?

C’est tout simplement le composant représentant notre HUD au sens graphique du terme c’est à dire son identité graphique, ce que l’utilisateur va voir une fois celui-ci implémenté correctement dans notre scène.

Voici comment le créer une fois le projet VR créer avec succès :

création du Blueprint de notre IHM

Nous obtenons donc une fenêtre telle que celle-ci :

création de l'IHM, de l'identité graphique de notre HUD

On constate que pour l’exemple mon HUD comporte 4 éléments simples, deux composants ‘Progress Bar’ et deux ‘Label’ qui représentent la vie et le mana (pour que cela soit familier à la majorité des lecteurs). Je ne vais pas m’attarder ici sur les différents composants que l’on peut ajouter d’un simple "Drag’n Drop" étant donné que ce n’est pas ici notre but mais voici un excellent tutoriel d’Epic Games sur l’utilisation des différents composants.


Création d’un blueprint nous permettant de gérer notre widget

Ce qu'il faut savoir du Blueprint c'est qu'il représente la logique d'un composant sous forme schématique (des méthodes sont disponibles pour gérer : les collisions, la position, l'orientation, et tout ce qui concerne l'acteur/le composant en question).

Notre widget étant crée nous pouvons maintenant l’implémenter à notre scène, mais avant cela il faut régler un léger soucis. En effet le widget est un composant pratique et utilisable pour des applications de réalité virtuelle, cependant il possède de grosses lacunes en terme d’affichage de texte. Pas d’inquiétude il va simplement falloir être un peu astucieux pour y remédier...

Pour palier à cette problématique nous disposons d’un autre composant appelé Stereo Layer qui lui est bien plus adapté à l’affichage de texte. Nous allons en faite ‘empiler’ ou ‘fusionner’ les deux pour en quelque sorte récupérer les propriétés respectives de ces deux composants qui nous intéresse.

Nous allons donc dans un premier temps créer un ‘Empty Actor’ car en effet pour pouvoir implémenter notre HUD il nous faut un Actor, un composant. Pourquoi ‘empty’ et bien car notre HUD n’est ni un cube, ni une sphère... sont ajout a notre scène aura pour seul but d’intégrer notre composant «personnalisé » encapsulant le Widget et le StereoLayer.

création du blueprint de notre 'Empty Actor' => Blueprint Class > Empty Actor

ajout d'un Widget et d'un StereoLayer à notre Blueprint

association de notre WidgetBlueprint à notre Widget

'fusionner' les composants Widget et StereoLayer


Implémentation de notre nouveau composant ‘HUD’ dans notre scène

Nous avons maintenant un HUD prêt à être insérer dans notre scène. Cependant pour respecter ce qui est propre à un HUD, c’est à dire être toujours visible de l’utilisateur peu importe l’orientation et la position de son point de vue, il va falloir intégrer notre nouveau composant directement à notre camera, qui, dans notre cas, est le composant VR Pawn (c’est en faite un ensemble de composant qui comprend à lui seul le casque / camera, les controllers, et le pawn / point de départ du personnage).

ajout de notre acteur 'maison' à notre HMD / VRPawn

Une fois placé selon vos besoins vous disposez donc d’un HUD qui sera affiché dans votre environnement virtuel et ‘attaché’ à la camera de votre casque (donc implicitement toujours dans votre champ de vision une fois le casque équipé).


Création d'un menu

Création graphique du menu

Ici rien de bien particulier. Nous allons simplement comme pour la création de l'IHM de notre HUD définir l'identité visuel de notre menu, un exemple :

exemple de menu


Gestion des actions proposées par notre menu

Nous avons donc créer un menu, qui comporte trois boutons.

Prenons le bouton 'Exit game' pour quitter le jeu. Si nous voulons faire en sorte que lorsque l'utilisateur cliquera sur celui-ci, le jeu s’arrête, il nous suffit d'ajouter un événement à ce bouton. Il en existe plusieurs déjà implémenter par Epic Games dans son moteur graphique, dont voici une liste non exhaustive :

  • OnCliked
  • OnPressed
  • OnReleased
  • OnHovered

Ici nous allons décider de choisir l'événement OnCliked...

l'événement OnClicked

Une autre fenêtre Blueprint s'ouvre alors comportant une entité (la méthode) OnClicked, il nous suffit de la raccorder à l'action que nous voulons effectuer ensuite, dans notre cas la fermeture, l'arrêt du jeu.

Blueprint de l'arrêt du jeu

IT WORKS !

Ceci fait il s'agira encore une fois d'ajouter notre composant regroupant le Widget associé à l'IHM créée et le StereoLayer comme vu précédemment.

Actuellement notre menu s'affichera tout le temps à l'écran si nous nous y prenons de l'exact même manière que pour le HUD. En effet le menu à lui un comportement différent et en général on y accède par un raccourci clavier sur PC, par un bouton d'une manette de console, et dans le cas de l'HTC Vive par un bouton ou une gâchette d'un des controllers.

Il suffira donc simplement d'ajouter un script blueprint dans notre VRPawn qui, lorsque l'on appuie par exemple sur l'une des gâchette d'un des controllers, affiche notre menu devant les yeux de l'utilisateur.

- Blueprint - afficher le menu lorsqu'on appuie sur une touche

résultat

Sources / Sitographie :

 

 

Pas de commentaire.

Ajouter un commentaire