Créer des interactions habiles personnalisées

Cette procédure détaillée inclut un exemple de conception UMG (Unreal Motion Graphics) et ses liaisons de modèle d'affichage que vous pouvez utiliser pour créer une interface utilisateur personnalisée pour l'appareil Interaction habile.

Lorsque vous créez votre interaction personnalisée, assurez-vous de définir un événement pour démarrer l'interaction. Vous pouvez également définir des déclencheurs d'événements qui octroient aux joueurs des objets s'ils terminent avec succès l'interaction habile.

Vous pouvez utiliser ces exemples pour définir des scènes cinématiques une fois que les joueurs ou les objets ciblent certaines zones.

Dans ce tutoriel, nous vous expliquons comment créer une interaction habile par pression rapide dans laquelle les joueurs peuvent obtenir une commande de déclencheur pour cibler les zones correctes.

Avant de commencer à personnaliser votre interface utilisateur, vous devez créer et importer toutes les ressources à utiliser dans vos conceptions. Consultez la page Créer une interface utilisateur personnalisée avec des matériaux pour en savoir plus sur l'utilisation de matériaux dans votre conception.

Configurer l'appareil

Procédez comme suit pour créer un exemple de golf dans lequel les joueurs ciblent une zone parfaite pour garantir la réussite du coup. Lors de la conception de votre interface utilisateur, n'hésitez pas à renommer les panneaux lorsque vous les placez dans le panneau Hiérarchie.

1. Depuis le navigateur de contenu, placez un appareil Interaction habile dans votre projet.

2. Dans le panneau Détails de l'appareil, modifiez les paramètres suivants :

   

   Option	Valeur	Description
   Type d'IU	Barre	Définit le type d'interface utilisateur à afficher.
   Widget personnalisé	Ajouter votre widget utilisateur personnalisé	Permet de sélectionner un widget personnalisé à utiliser pour l'interaction.
   Type d'interaction	Charger et relâcher	Charger et relâcher s'anime lorsque vous maintenez le bouton de déclenchement enfoncé et s'active lorsque vous le relâchez.
   Couleur de la jauge	Choisir une couleur	Cet exemple utilise le rouge.
   Taille de la zone Bien	80.0	Définit la taille de la zone Bien en pourcentage de la jauge totale.
   Position de la zone Bien	0.0	Définit la position de la zone Bien.
   Taille de la zone Parfait	15.0	Définit la taille de la zone Parfait en pourcentage de la zone Bien.
   Position de la zone Parfait	100.0	Définit la position de la zone Parfait.
   Couleur de la zone Bien	Choisir une couleur	Cet exemple utilise le vert foncé.
   Couleur de la zone Parfait	Choisir une couleur	Cet exemple utilise le vert citron.

Ajouter l'image d'arrière-plan

Procédez comme suit pour créer l'image d'arrière-plan de la barre de mesure verticale dans cet exemple. Dans ce guide, l'arrière-plan est une barre noire arrondie sur laquelle seront placées les zones.

Utilisez l'image ci-dessus comme référence lorsque vous suivez les étapes de ce tutoriel.

1. Créez un widget utilisateur pour votre interaction.

2. Localisez le widget utilisateur joint à l'appareil et double-cliquez dessus pour accéder à l'éditeur de widget utilisateur correspondant.

3. Dans le panneau Hiérarchie, faites glisser et imbriquez une superposition qui servira de zone de dessin globale. Dans cet exemple, celle-ci est nommée Overlay. Ensuite, faites glisser une autre superposition qui contiendra l'arrière-plan. Dans cet exemple, celle-ci est nommée SID.

4. Faites glisser et imbriquez une image, nommée Bar dans cet exemple, dans l'enfant Overlay.

5. Dans le panneau Détails de l'image, définissez le matériau ou la texture de votre arrière-plan.

Configurer les zones

Vous pouvez créer une zone Mauvais dans votre exemple qui, si elle est ciblée, entraîne un échec automatique. Notez cependant que dans cet exemple, nous utilisons uniquement une zone Parfait, composée de trois conteneurs :

• Une zone vide initiale, appelée PerfectZoneStart.

• La zone Bien ou Parfait, appelée SizeBox.

• La zone vide suivante, appelée PerfectZoneEnd.

Procédez comme suit pour recréer la zone Parfait de cet exemple.

1. Depuis le panneau Palette, faites glisser et imbriquez une zone empilable à l'intérieur de l'enfant Superposition, nommé SID dans l'exemple.

2. Ensuite, faites glisser et imbriquez les enfants suivants à l'intérieur de la zone empilable : Zone d'échelle > Zone de dimensionnement.

   1. Dans le panneau Détails du panneau Zone d'échelle, définissez l'option Étirement sur Spécifié par l'utilisateur. Ensuite, définissez l'option Échelle spécifiée par l'utilisateur pour déterminer l'espace que vous souhaitez définir au-dessus de la zone Parfait. Pour les besoins de cet exemple, définissez l'échelle sur 0.27.
   2. Dans Zone de dimensionnement, définissez le paramètre Remplacement de la hauteur sur la hauteur de la jauge supérieure.

3. Dans la même zone empilable, faites également glisser une Zone de dimensionnement > Zone d'échelle > Superposition > Image.

   1. Dans le panneau Détails de la zone de dimensionnement, définissez l'option Remplacement de la hauteur sur la taille de la zone Parfait.

   2. Dans le panneau Détails de la zone d'échelle, définissez le paramètre Étirement sur Spécifié par l'utilisateur. Ensuite, définissez le paramètre Échelle spécifiée par l'utilisateur sur 1.

   3. La superposition PerfectZone contient le matériau ou la texture de la zone Parfait.

4. Dans la même zone empilable, faites également glisser une Superposition > Zone de dimensionnement.

   1. Dans le panneau Détails de la superposition PerfectZoneEnd, définissez le paramètre Étirement sur Spécifié par l'utilisateur. Ensuite, définissez l'option Échelle spécifiée par l'utilisateur pour déterminer l'espace que vous souhaitez définir au-dessus de la zone Parfait. Pour les besoins de cet exemple, définissez l'échelle sur 0.49.
   
   1. Dans le panneau Détails de la zone de dimensionnement, définissez le paramètre Remplacement de la hauteur sur la hauteur de la jauge inférieure.
   

5. Pour ajouter des détails supplémentaires, vous pouvez inclure des niveaux pour les zones d'arrière-plan en ajoutant une image, nommée Notches dans cet exemple, sous la zone empilable.

Configurer l'outil de défilement

Dans cet exemple, l'outil de défilement doit être à l'intérieur d'un conteneur en mouvement. Pour ce faire, vous devez créer une zone empilable avec deux éléments.

Le premier élément contient une zone de dimensionnement définie sur Échelle de l'utilisateur, que vous allez ensuite lier à l'échelle de la jauge de l'interaction habile dans le modèle d'affichage. Le deuxième élément contiendra un conteneur avec l'outil de défilement.

1. Sous le SID Superposition, faites glisser et imbriquez une zone empilable, nommée ScrubberStackBox dans l'exemple, pour contenir deux configurations enfants de : Superposition > Zone de dimensionnement et Zone de dimensionnement > Zone d'échelle > Image nommées Outil de défilement.

   1. Dans le panneau Détails de la superposition ScrubberMovingZone, définissez le paramètre Étirement sur Spécifié par l'utilisateur. Ensuite, définissez le paramètre Échelle spécifiée par l'utilisateur sur 0.
   
   1. Dans le panneau Détails de la zone de dimensionnement, définissez le paramètre Remplacement de la hauteur sur la hauteur de la jauge supérieure.
   
   1. Définissez le paramètre Remplacement de la hauteur pour la zone de dimensionnement ScrubberContainer sur 0.
   
   1. Modifiez le paramètre Étirement de la zone d'échelle Superposition sur Spécifié par l'utilisateur. Définissez le paramètre Échelle spécifiée par l'utilisateur sur 1.
   
   1. Dans le paramètre Image de l'outil de défilement Image, définissez le matériau ou la texture de votre outil de défilement.
   

Configurer le modèle d'affichage

Pour connecter votre interface utilisateur personnalisée à l'appareil Interaction habile, procédez comme suit.

1. Dans le widget utilisateur, accédez à Fenêtre > Modèles d'affichage pour ouvrir la fenêtre Modèles d'affichage.

2. Cliquez sur +Modèle d'affichage. Ensuite, sélectionnez Appareil - Modèle d'affichage Interaction habile, puis cliquez sur Sélectionner.

3. Dans la barre d’outils inférieure ou dans l'onglet Fenêtre, sélectionnez Liaisons d'affichage.

4. Configurez vos liaisons d'affichage pour qu'elles correspondent à l'image ci-dessous.

   
   1. Cliquez sur + Ajouter un widget pour ajouter ScrubberMovingZone.
   2. Définissez ScubberMovingZone sur Échelle spécifiée par l'utilisateur et UEFN_SkilledInteraction_ViewModel sur Valeur de jauge actuelle.
   3. Cliquez sur + Ajouter un widget pour ajouter PerfectZoneStart.
   4. Définissez PerfectZoneStart sur Échelle spécifiée par l'utilisateur et UEFN_SkilledInteraction_ViewModel sur Zone Parfait min..
   5. Cliquez sur + Ajouter un widget pour ajouter PerfectZoneEnd.
   6. Définissez PerfectZoneStart sur Échelle spécifiée par l'utilisateur et ajoutez une fonction de conversion pour Ajouter Ent Double.
   7. Définissez A sur 1.
   8. Définissez B sur UEFN_SkilledInteraction_Viewmodel/Perfect Zone Max.
   9. Définissez Annuler B sur True.