Cave : Système d'Interface Utilisateur (UI) de Jeu

Dans cette leçon, nous allons apprendre comment fonctionne le système parent-enfant d'entités de Cave Engine.

Cette fonctionnalité peut être utilisée avec tout type d'Entité dans la scène, vous permettant de créer des hiérarchies organisées entre les objets.

Lors de la création d'interfaces utilisateur, cela devient particulièrement utile. En définissant un Élément UI comme parent d'autres Éléments UI, des transformations telles que position, échelle et visibilité sont automatiquement propagées vers les éléments enfants.

Cela facilite grandement l'organisation de l'interface, simplifie l'édition des menus et des panneaux, et rend la gestion de structures UI plus complexes beaucoup plus efficace.

1. Création des Éléments du Kit d'Interface Utilisateur

En plus de l'Élément UI Par Défaut créé précédemment, ajoutez trois autres éléments d'interface en utilisant le Kit d'Interface Utilisateur :

• Curseur d'Entrée
• Nombre d'Entrée
• Texte d'Entrée

Nous allons tester en pratique comment chacun de ces éléments se comporte pendant le gameplay.

Ensuite, nous allons utiliser ces composants pour créer une hiérarchie d'entités en les faisant enfants de l'Élément UI Par Défaut, démontrant comment le système parent-enfant aide à organiser l'interface.

2. Tester les Éléments du Kit d'Interface Utilisateur

Avant de tester les éléments créés avec le Kit d'Interface Utilisateur, si vous utilisez le modèle de jeu en troisième personne de Cave Engine, désactivez le Joueur et le Véhicule dans la scène.

C'est important car l'une de ces entités pourrait prendre le contrôle du curseur de la souris pendant que le jeu fonctionne.

Avec le curseur libre, vous pourrez interagir correctement avec les éléments d'interface, comme le Curseur d'Entrée, Nombre d'Entrée, et Texte d'Entrée, vous permettant de tester toutes leurs fonctionnalités sans interférence.

Exécutez le jeu en appuyant sur F5.

Pendant l'exécution, vous pourrez interagir avec les éléments créés.

Le Curseur d'Entrée et le Nombre d'Entrée vous permettent de modifier leurs valeurs par interaction avec la souris, tandis que le Texte d'Entrée vous permet de taper du texte directement dans l'interface.

C'est un bon moment pour tester chacun d'eux et comprendre en pratique à quoi ils servent.

Par exemple :

• le Curseur d'Entrée est idéal pour des réglages tels que le volume ou la luminosité
• le Nombre d'Entrée est utile pour des valeurs numériques précises
• le Texte d'Entrée est utile lorsque le joueur doit taper des informations

3. Hiérarchie

Voyons maintenant comment fonctionne la hiérarchie entre les Éléments UI.

Sélectionnez l'Élément UI Par Défaut et, dans le panneau des propriétés, ajustez ses valeurs Échelle.

En modifiant ces valeurs, vous pouvez augmenter ou diminuer la taille de l'élément.

Pour créer la relation parent-enfant entre les Entités, cliquez et faites glisser l'Élément UI que vous souhaitez transformer en enfant et déposez-le sur l'Élément UI Par Défaut, qui deviendra l'Entité parent.

C'est le même concept de hiérarchie utilisé tout au long du moteur : l'enfant devient attaché au parent et commence à le suivre.

Après avoir créé cette relation parent-enfant, l'élément enfant suivra automatiquement les transformations de l'élément parent.

Cela signifie que des modifications telles que position, échelle et visibilité appliquées à l'Élément UI Par Défaut affecteront également tous ses éléments enfants.

C'est extrêmement utile lors de la construction de menus et de panneaux d'interface.

Par exemple, si vous créez un panneau de menu comme parent et placez plusieurs boutons, textes et champs de saisie comme enfants, vous pouvez déplacer ou redimensionner tout le menu en modifiant uniquement l'élément parent.

Au lieu d'ajuster chaque élément d'interface un par un, vous pouvez les organiser en groupes, rendant l'ensemble de l'UI beaucoup plus facile à modifier et à maintenir.

À ce stade, vous avez appris non seulement comment créer et tester les éléments du Kit d'Interface Utilisateur, mais aussi comment les organiser en utilisant la hiérarchie.

C'est l'un des concepts les plus importants lors de la construction d'interfaces plus grandes dans Cave Engine, car cela aide à garder votre UI plus propre, plus modulaire et bien plus facile à gérer.