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

Dans cette leçon, vous apprendrez à personnaliser l'apparence visuelle des éléments UI dans Cave Engine.

Nous verrons comment modifier les propriétés de style telles que les couleurs, la transparence, les images, le flou, et comment créer de nouveaux Styles UI pour votre projet.

Les Styles UI sont utiles car ils vous permettent de réutiliser la même configuration visuelle à travers plusieurs éléments UI. Cela facilite le maintien d'une interface cohérente et organisée.

1. Style UI

Par défaut, lorsque vous créez un Élément UI par Défaut dans Cave Engine, il est déjà associé à un Style UI.

Ce style est appelé Style Par Défaut.

Ce style est responsable de définir l'apparence initiale de l'Élément UI.

Vous pouvez le trouver dans le dossier Interface dans le Navigateur de Contenu.

Cela signifie que tout changement apporté au Style Par Défaut affectera automatiquement tous les éléments UI utilisant ce style via la propriété Substitution de Style.

Pour cette raison, il est préférable de garder le Style Par Défaut comme style d'interface standard de Cave Engine et de créer un nouveau Style UI pour vos propres personnalisations de projet.

De cette façon, vous pouvez modifier l'apparence de vos éléments UI sans changer accidentellement chaque élément qui utilise encore le style par défaut.

Sélectionnez l'Élément UI et, dans la propriété Substitution de Style, remplacez le Style Par Défaut par le nouveau Style UI que nous venons de créer.

Maintenant, cet Élément UI utilisera votre style personnalisé au lieu de celui par défaut.

Pour modifier le style, cliquez sur l'icône de crayon à côté du champ du Style UI.

Vous pouvez également sélectionner le fichier de style directement dans le Navigateur de Contenu pour ouvrir l'éditeur de style.

2. Personnalisation

À l'intérieur de l'éditeur de Style UI, vous pouvez personnaliser les propriétés visuelles de l'élément.

L'option Mise à l'échelle 9-Slice vous permet de redimensionner un Élément UI sans déformer ses bords et coins.

Lorsque cette option est activée, l'élément est divisé en neuf régions. Les quatre coins gardent toujours la même taille, les bords sont étirés seulement dans une direction, et seule la région centrale est librement redimensionnée.

Ceci est très utile pour créer des panneaux, des fenêtres, des boîtes de dialogue, des boutons et d'autres éléments d'interface qui doivent supporter différentes tailles tout en préservant leur qualité visuelle.

Sans Mise à l'échelle 9-Slice, redimensionner un bouton ou un panneau pourrait étirer toute l'image et déformer les coins. Avec la Mise à l'échelle 9-Slice, l'élément peut devenir plus grand ou plus petit tout en gardant les bords propres.

• Dans l'option Image, vous pouvez charger une texture depuis votre ordinateur à utiliser comme apparence visuelle de l'Élément UI.

• Teinte vous permet de changer la couleur appliquée à l'Élément UI. Cela fonctionne comme une superposition de couleur sur l'image utilisée par l'élément, vous permettant de modifier son apparence sans éditer la texture originale.

• Alpha contrôle le niveau de transparence de l'Élément UI. Des valeurs plus élevées rendent l'élément plus opaque, tandis que des valeurs plus faibles le rendent plus transparent.

• Flou applique un effet de flou à l'arrière-plan derrière l'Élément UI. Cela peut être utile pour des menus, des fenêtres contextuelles, des écrans de pause, des fenêtres de dialogue, et des panneaux qui doivent se démarquer de la scène du jeu.

Les mêmes paramètres peuvent également être appliqués aux états Hover et Click de l'Élément UI.

Cela signifie que vous pouvez définir une image, une couleur, une transparence et une valeur de flou spécifiques pour chaque état d'interaction.

Par exemple, un bouton peut avoir une couleur lorsqu'il est inactif, devenir plus lumineux lorsque la souris passe dessus, et changer à nouveau lorsqu'il est cliqué.

Cela donne au joueur un retour visuel clair et rend l'interface plus réactive et soignée.

À ce stade, vous comprenez maintenant comment les Styles UI contrôlent l'apparence des Éléments UI dans Cave Engine.

En créant vos propres styles au lieu d'éditer directement le Style Par Défaut, vous pouvez maintenir votre projet organisé, réutiliser des configurations visuelles et construire des interfaces avec un look cohérent à travers les menus, les boutons, les panneaux et les éléments HUD.