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

Dans cette leçon, vous apprendrez à détecter les interactions des utilisateurs avec les Éléments UI dans Cave Engine.

Nous allons voir comment identifier quand le curseur de la souris survole un Éléments UI et quand l'élément est cliqué. Avec ces événements, vous pouvez faire en sorte que votre interface réagisse au joueur pendant le jeu.

Ces interactions sont essentielles pour créer des boutons, des menus, des écrans de paramètres, des interfaces d'inventaire, des menus de pause, des options de dialogue, et bien d'autres systèmes UI.

À partir de ces événements, vous pouvez exécuter de la logique Python, créer des comportements interactifs, ouvrir des menus, changer des éléments UI, jouer des sons, commencer le jeu, fermer des fenêtres ou déclencher toute autre fonctionnalité dont votre interface a besoin.

1. Activer le Survol

Pour détecter quand le curseur de la souris survole un Éléments UI, sélectionnez l'Éléments UI souhaité et, dans l'onglet Comportement, activez l'option Activer le Survol.

Dans l'Aperçu, vous pouvez visualiser l'apparence de l'Éléments UI sans avoir besoin de lancer le jeu.

Après avoir activé Activer le Survol, déplacez le curseur de la souris sur la zone d'aperçu pour observer le changement visuel entre l'état normal et l'état de survol.

Ceci est très utile lors du développement de l'interface, car vous pouvez rapidement tester si l'élément réagit visuellement comme prévu.

Par exemple, vous pouvez utiliser l'état de survol pour rendre un bouton plus lumineux, changer sa couleur, augmenter son opacité, ou donner au joueur une indication claire que l'élément peut être interagi.

2. Activer le Clic

Activez l'option Activer le Clic pour permettre à l'Éléments UI de détecter quand l'utilisateur clique dessus.

Tout comme avec Activer le Survol, le comportement de Activer le Clic peut également être testé directement dans l'Aperçu.

Cela vous permet de vérifier à quoi ressemble l'élément lorsqu'il est pressé, sans avoir à exécuter constamment le jeu juste pour tester de petits ajustements visuels.

3. Exécuter la Logique

Pour exécuter la logique à partir des interactions UI, cliquez sur l'icône de flèche située sur le côté gauche des options Activer le Survol et Activer le Clic.

Ici, nous pouvons utiliser les Callbacks.

Les Callbacks vous permettent d'accéder aux événements liés aux interactions de l'Éléments UI, ce qui rend possible d'ajouter un comportement personnalisé lorsque le curseur entre dans l'élément, sort de l'élément, le clique ou relâche le clic.

Pour éditer la logique qui sera exécutée lors de ces événements, cliquez sur l'icône de crayon.

Pour tester les callbacks de Survol, ajoutons un simple message d'impression dans chaque événement.

Dans le Callback On Hover In, qui est exécuté dès que le curseur est détecté au-dessus de l'Éléments UI, ajoutez un message d'impression pour confirmer que l'interaction a été détectée.

Ensuite, dans le Callback On Hover Out, qui est appelé lorsque le curseur quitte l'élément, ajoutez un autre message d'impression pour vérifier quand cet événement de sortie est détecté.

De cette façon, nous pouvons voir dans la Console exactement quand le curseur entre et sort de la zone de l'Éléments UI.

Maintenant, exécutez le jeu et interagissez avec l'Éléments UI en déplaçant le curseur de la souris dessus puis en le déplaçant à l'écart.

Surveillez la Console pour vérifier quand les messages d'impression sont affichés.

C'est l'un des moyens les plus simples de déboguer la logique d'interaction UI, car cela confirme que l'événement est correctement appelé.

L'icône rouge à côté du Callback indique qu'il n'est pas vide. En d'autres termes, il y a une logique ou un script configuré pour être exécuté par cet événement.

Cet indicateur facilite beaucoup l'identification visuelle des événements qui ont déjà un comportement associé.

À mesure que votre interface grandit, cela devient très utile car vous pouvez rapidement voir quels Éléments UI ont déjà une logique d'interaction configurée.

Maintenant, ajoutons des messages d'impression pour vérifier les événements de clic de l'Éléments UI.

Dans le Callback On Click In, ajoutez un message d'impression pour identifier le moment où le clic sur l'élément est détecté.

Ensuite, utilisez le Callback On Click Out pour ajouter un autre message d'impression, vous permettant de vérifier quand le clic est terminé, c'est-à-dire lorsque le bouton de la souris est relâché.

Cette distinction est importante car certains comportements UI doivent se produire lorsque le bouton est d'abord pressé, tandis que d'autres doivent se produire uniquement lorsque le clic est relâché.

Par exemple, vous voudrez peut-être visuellement enfoncer le bouton sur Clic Dans, mais ne confirmer l'action que sur Clic Hors.

Exécutez le jeu et observez la Console tout en interagissant avec l'élément.

Lorsque vous survolez, cliquez, relâchez et déplacez la souris à l'écart de l'Éléments UI, les callbacks correspondants doivent être exécutés et leurs messages d'impression doivent apparaître dans la Console.

À ce stade, vous savez déjà comment détecter les interactions UI les plus basiques dans Cave Engine.

En combinant Activer le Survol, Activer le Clic, et les callbacks, vous pouvez commencer à créer de véritables interfaces interactives, comme des boutons qui ouvrent des menus, des curseurs de paramètres, des fenêtres de confirmation, des menus de pause, et tout autre comportement UI dont votre jeu a besoin.