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

Dans cette leçon, vous apprendrez à utiliser le système d'ancrage UI de Cave Engine.

L'ancrage vous permet de définir le point de référence utilisé par les éléments UI à l'écran. C'est très important lors de la création d'interfaces qui doivent s'adapter correctement à différentes résolutions, tailles de fenêtres et rapports d'aspect.

À la fin de cette leçon, vous comprendrez comment positionner les éléments UI de manière cohérente, vous assurant qu'ils restent là où vous vous attendez à ce qu'ils soient, quelle que soit la taille de l'écran.

1. Créer un Nouvel Élément UI

Créez un nouvel Élément UI par Défaut.

Après l'avoir ajouté à la scène, sélectionnez-le et regardez le panneau Propriétés.

Là, vous trouverez les paramètres responsables de la position, de l'échelle, de l'apparence et de l'ancrage de l'élément. Dans cette leçon, nous utiliserons ces propriétés pour comprendre comment le système d'ancrage fonctionne et comment il affecte le comportement de l'interface.

2. Position

Par défaut, la position des éléments UI dans Cave Engine est définie en valeurs de pourcentage.

Cela vous aide à créer des interfaces qui s'adaptent mieux à différentes résolutions d'écran.

Initialement, l'élément UI est ancré au centre de l'écran. De ce fait, lorsque les valeurs de position sont réglées à 0, l'élément apparaît exactement au centre de l'interface.

3. Échelle

Tout comme la position, l'échelle des éléments UI dans Cave Engine est également définie par défaut en valeurs de pourcentage.

En modifiant les valeurs d'échelle, vous pouvez augmenter ou réduire la taille de l'élément UI directement à l'écran.

Cela facilite l'ajustement des dimensions de l'interface tout en la maintenant réactive.

4. Valeurs en Pourcentage et Pixels Absolus

Comme nous l'avons vu précédemment, par défaut, la position et l'échelle des éléments UI dans Cave Engine sont définies à l'aide de pourcentages.

Dans la plupart des cas, c'est le comportement recommandé, car il aide l'interface à maintenir sa position et sa taille cohérentes, quelle que soit la résolution ou la taille de l'écran.

Dans cet exemple, nous avons défini l'échelle de l'élément UI à 10% sur les axes X et Y. Nous avons également défini la position à 25% sur l'axe X, ce qui correspond à l'axe horizontal.

Avec cette configuration, l'élément est déplacé de 25% vers la droite par rapport à son point d'ancrage.

Puisque les valeurs sont définies en pourcentage, ce positionnement sera préservé indépendamment de la résolution ou de la taille de l'écran, maintenant l'interface cohérente sur différents appareils.

En plus des valeurs en pourcentage, Cave Engine vous permet également d'utiliser des valeurs absolues en pixels.

Ce mode est utile lorsque vous avez besoin d'un élément UI d'avoir une taille fixe ou une position fixe.

Pour changer le type d'unité, cliquez sur l'icône de verrouillage à côté de l'axe de Position ou d'Échelle que vous souhaitez modifier.

Lorsque vous faites cela, la valeur passera entre pourcentage (%) et pixels absolus (px), vous permettant de choisir l'unité la plus appropriée pour chaque situation.

Lorsque vous utilisez une valeur de pixel absolu, l'élément UI ne s'adaptera plus proportionnellement à la résolution de l'écran.

Cela signifie que, peu importe si le jeu s'exécute sur un moniteur à basse résolution ou à haute résolution, la valeur en pixels sera appliquée exactement comme configurée.

Le même comportement s'applique à l'axe Y de la position et aux axes X et Y de l'échelle.

Ce mode est recommandé lorsque vous avez besoin qu'un élément conserve une taille fixe ou une position fixe, sans tenir compte de la largeur et de la hauteur de l'écran ou de son élément UI parent.

Par exemple, vous pourriez vouloir qu'une icône soit toujours exactement 64 pixels de large, ou qu'une petite marge soit toujours exactement 20 pixels par rapport à la bordure.

5. Ancrage de Position

L'icône d'ancre disponible dans les propriétés de Position et d'Échelle indique le point d'ancrage de l'élément UI.

Lorsque vous cliquez sur l'icône d'ancre de Position, la fenêtre Point d'Ancrage s'affiche. Là, vous pouvez voir le point d'ancrage actuel de l'élément.

Par défaut, les nouveaux éléments UI sont ancrés au centre de l'écran, représenté par le cercle bleu dans la fenêtre de configuration.

Ce point d'ancrage fonctionne comme référence pour positionner l'élément dans l'interface. À partir de ce point, les valeurs de position seront appliquées selon l'ancre sélectionnée.

Imaginez que vous souhaitez créer une minimap, qui est généralement placée dans le coin inférieur gauche de l'écran.

Dans ce cas, garder l'élément ancré au centre n'a pas beaucoup de sens, car sa position serait calculée à partir du point central de l'écran.

Pour ce type d'interface, il suffit de changer le Point d'Ancrage vers le coin inférieur désiré.

Cela fait en sorte que l'élément utilise cette région de l'écran comme référence, facilitant le positionnement et garantissant qu'il reste au bon endroit, quelle que soit la résolution utilisée.

Lorsque les valeurs de Position sont définies à 0, que ce soit en pourcentage (%) ou en pixels absolus (px), l'élément UI sera positionné exactement sur son point d'ancrage.

En d'autres termes, le Point d'Ancrage devient la référence pour la position de l'élément.

À partir de ce point, vous n'avez qu'à ajuster les valeurs de position pour déplacer l'élément dans la direction souhaitée.

6. Ancrage de l'Échelle

Maintenant, comprenons comment fonctionne l'ancrage de l'échelle.

Pour ce faire, changez le point d'ancrage de l'élément UI à nouveau au centre de l'écran et définissez les valeurs de Position à 0, rendant l'élément exactement au centre.

Avec l'élément centré, il devient plus facile de voir comment l'ancrage affecte le comportement de l'échelle et de comprendre à partir de quel point l'élément UI sera redimensionné.

Lorsque le point d'ancrage d'échelle est défini au centre, augmenter ou diminuer l'échelle de l'élément affectera les deux côtés de manière égale. L'élément grandira ou rétrécira vers la gauche et vers la droite en même temps.

Cependant, dans certaines situations, ce n'est pas le comportement souhaité.

Imaginez, par exemple, une barre de santé ou une barre de progression. Dans ce cas, vous souhaitez généralement que l'élément grandisse ou rétrécisse dans une seule direction.

Pour y parvenir, changez le point d'ancrage d'échelle vers le côté désiré.

Lorsque vous faites cela, un petit curseur sera affiché, indiquant le point à partir duquel l'échelle sera appliquée.

Maintenant, lorsque vous augmentez ou réduisez l'échelle, l'élément grandira uniquement dans la direction opposée du point d'ancrage. Cela rend beaucoup plus facile de créer des barres et d'autres éléments UI dynamiques.

7. Ajuster l'Ancre et l'Échelle

Maintenant que nous comprenons comment le point d'ancrage d'échelle affecte le comportement de redimensionnement de l'élément, nous pouvons configurer l'interface de la manière qui convient le mieux à notre projet.

Ramenez l'ancrage de position au coin inférieur gauche de l'écran, ou choisissez une autre position qui a plus de sens pour l'interface que vous créez.

Vous pouvez faire de même avec l'ancrage de l'échelle, définissant le point à partir duquel l'élément sera redimensionné.

Dans cet exemple, nous utiliserons des valeurs de pixels absolus pour l'axe X de la position et pour l'axe X de l'échelle, tout en gardant les valeurs en pourcentage pour l'axe Y.

Cette configuration permet à l'élément de maintenir une proportion carrée, quelle que soit la taille de l'écran, tout en préservant un comportement réactif sur l'axe vertical.

À ce stade, vous devriez avoir une bonne compréhension de la façon dont l'ancrage UI fonctionne dans Cave Engine.

Les ancres sont l'une des parties les plus importantes de la création d'interfaces, car elles définissent comment les éléments UI se comportent lorsque la taille de l'écran change.

En combinant les ancres de position, les ancres d'échelle, les valeurs en pourcentage et en pixels, vous pouvez créer des interfaces à la fois précises et réactives.