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

Dans cette leçon, vous apprendrez à utiliser le texte dans le système d'interface de Cave Engine.

Le texte est l'un des éléments les plus importants de toute UI. Il est utilisé pour les étiquettes de boutons, les titres de menus, les sous-titres, les instructions, les valeurs HUD, les compteurs d'objets, les boîtes de dialogue, les étiquettes de paramètres, et bien d'autres éléments d'interface.

Nous verrons comment créer des éléments de texte, configurer leur apparence, et ajuster des propriétés telles que la police, la taille, la couleur, l'espacement, l'alignement, et l'ancrage.

1. Préparer l'Espace pour le Texte

Avant d'ajouter les éléments de texte, préparons la structure de l'interface où ils seront affichés.

Dans cet exemple, nous allons créer un menu principal simple pour un jeu, contenant trois boutons :

• Commencer le Jeu
• Options
• Quitter

Pour ce faire, créez un nouvel Élément UI, qui servira d'élément parent et constituera le fond du menu.

Ensuite, dupliquez l'un des boutons créés précédemment jusqu'à ce que vous ayez trois boutons, et faites en sorte que tous soient des enfants de cet Élément UI.

Cela garde les boutons organisés dans une seule hiérarchie, rendant le positionnement, l'édition, et les futures modifications de l'interface beaucoup plus faciles.

2. Ajouter du Texte

Maintenant, créez un Élément UI de type Texte et faites-en un enfant du bouton Commencer.

Ajustez alors l'échelle de l'élément de texte jusqu'à ce qu'il ait une bonne taille pour l'interface.

Puisque le texte est un enfant du bouton, il suivra automatiquement la position du bouton. Cela facilite l'organisation de l'interface et aide à garder l'étiquette correctement alignée avec le bouton.

Répétez le même processus pour les autres boutons du menu.

Créez un Élément UI Texte pour le bouton Options et un autre pour le bouton Quitter, faisant de chaque élément de texte un enfant de son bouton correspondant.

De cette façon, chaque bouton a sa propre étiquette, et le menu entier reste organisé grâce à la hiérarchie parent-enfant.

3. Paramètres du Texte

Sélectionnez l'élément UI de texte que nous avons créé pour le bouton Commencer.

Dans l'onglet Texte, vous trouverez toutes les propriétés responsables de la configuration du contenu du texte et de son apparence visuelle.

La propriété Contenu définit le texte qui sera affiché par l'Élément UI.

Il suffit de taper le contenu souhaité dans ce champ et il sera affiché dans l'interface.

Dans cet exemple, nous allons utiliser le texte Commencer le Jeu pour identifier le bouton qui démarre le jeu.

• Source de Police

La propriété Source de Police vous permet de sélectionner une police et de changer l'apparence du texte.

Vous pouvez charger une police compatible et l'utiliser directement dans l'Élément UI, facilitant l'adéquation de la typographie à l'identité visuelle de votre jeu.

• Couleur

La propriété Couleur vous permet de changer la couleur du texte.

Cela est utile pour adapter le texte au style de l'interface, améliorer la lisibilité, ou créer un contraste visuel par rapport à l'arrière-plan.

• Échelle

La propriété Échelle contrôle l'échelle générale du texte, augmentant ou réduisant sa taille.

Utilisez ceci pour rendre le texte plus lisible ou pour mieux l'adapter à la taille du bouton, du panneau ou de la zone d'interface où il est placé.

• Échelle Horizontale

La propriété Échelle Horizontale ajuste uniquement l'échelle horizontale du texte.

Cela vous permet de rendre le texte plus étroit ou plus large sans changer sa hauteur.

• Espacement

La propriété Espacement contrôle l'espace entre les caractères.

Vous pouvez l'utiliser pour rapprocher les lettres ou les éloigner, améliorant ainsi la lisibilité ou créant un style visuel spécifique.

• Hauteur de Ligne

La propriété Hauteur de Ligne définit l'espacement entre les lignes de texte.

Ceci est utilisé lorsque le contenu a deux lignes ou plus, comme les descriptions, le texte de dialogue, les instructions, ou les messages d'interface plus longs.

• Alignement du Texte

La propriété Alignement du Texte définit comment les lignes de texte sont alignées à l'intérieur de l'élément.

Ceci est particulièrement utile lorsque le texte a plusieurs lignes, vous permettant de les aligner à gauche, au centre, ou à droite.

• Ancrage du Texte

La propriété Ancrage du Texte définit l'ancrage du texte à l'intérieur de l'Élément UI.

Elle détermine quel point est utilisé comme référence pour l'alignement du texte. Avec cette option, vous pouvez positionner le texte au centre, dans les coins, ou sur les bords de l'Élément UI selon les besoins de votre interface.

4. Personnaliser le Texte

Maintenant, éditez les éléments de texte de la manière qui convient le mieux à votre projet.

Utilisez les propriétés présentées ci-dessus pour configurer la police, la couleur, l'échelle, l'espacement des caractères, la hauteur de ligne, l'alignement et l'ancrage.

Avec ces options, vous pouvez créer différents styles de texte et adapter l'interface à l'identité visuelle de votre jeu.

Par exemple, les boutons de menu peuvent utiliser une police large et lisible, tandis que les descriptions et les étiquettes secondaires peuvent utiliser un texte plus petit avec des couleurs plus douces.

Avec tout ce que vous avez appris dans cette Quête, vous avez maintenant les bases nécessaires pour créer des interfaces complètes dans Cave Engine.

Vous pouvez librement modifier les Éléments UI, personnaliser le texte, créer et modifier des Styles UI, organiser la hiérarchie UI, configurer l'ancrage, et utiliser des Callbacks pour exécuter une logique personnalisée.

Comme exercice, vous pouvez remplacer les messages d'impression créés lors des leçons précédentes par de réelles actions de votre projet.

Par exemple, vous pouvez faire en sorte que les boutons du menu démarrent réellement le jeu, ouvrent le menu des options, ou ferment l'application.

La structure est maintenant prête pour vous permettre de continuer à explorer le système UI et à développer des interfaces plus complètes, raffinées, et interactives.