Unity UI et interfaces utilisateurs

1. Définition

Lors du développement d’un logiciel 2D/3D, il est commun de distinguer la scène immersive en plusieurs dimensions de l’interface graphique permettant d’accéder à celle-ci. Dans le monde du jeu vidéo, on distingue par exemple le "jeu" du "menu".

On va donc parler d’interface graphique pour désigner tous les éléments permettant de naviguer au sein des scènes multidimensionnelles ou d’afficher des informations à l’utilisateur.

La création d’un menu efficace à l’aide d’un éditeur dédié à la manipulation d’objets dans des repères à plusieurs dimensions peut être assez fastidieux car l’outil n’est tout simplement pas optimisé pour cette tâche.

2. Un peu d’histoire

Unity propose depuis ses premières versions un système de création d’interfaces graphiques qu’il est possible de trouver sous le nom "Legacy GUI".

Comme nous l’avons déjà vu dans un chapitre précédent, dans ce cadre, la création des éléments se fait de façon programmatique dans la méthode OnGUI du code d’un script. Voici un exemple dessinant un bouton et testant s’il a été cliqué...

1. Définition

Un Canvas est l’élément racine de toute interface graphique. Il est obligatoire et tous les éléments graphiques sont nécessairement à l’intérieur d’un Canvas. Lorsque vous ajoutez un élément d’interface graphique sans qu’un canvas soit déjà présent, Unity en créera un pour vous. Le Canvas sera alors la surface de rendu de votre interface graphique qui se comportera alors comme si elle était dans un monde 2D uniquement.

L’ajout d’un Canvas est fait de cette manière dans l’éditeur :

Qu’il soit sélectionné ou non, un Canvas est toujours visible dans la vue Scene sous la forme d’un rectangle.

Ajoutons maintenant un bouton à ce Canvas (nous étudierons en détail ce composant plus tard) :

Vous venez d’afficher votre premier bouton dans la nouvelle interface graphique d’Unity !

2. Nombre de Canvas dans une scène

Il est possible d’ajouter autant de Canvas que voulu dans une scène, chacun avec une configuration différente si nécessaire. Il est aussi possible d’imbriquer des Canvas les uns dans les autres.

L’intérêt de cette solution est d’avoir de meilleures performances : la modification d’un élément d’UI d’un Canvas déclenche le rendu de tous les éléments du Canvas. Ainsi en groupant les éléments d’UI par Canvas, on réduit la charge de redessinage à chaque modification.

3. Les différents modes de rendu

La propriété Render Mode du Canvas permet de configurer la manière dont le Canvas...

1. Le composant RectTransform

Alors que les éléments de la scène portent un script de type Transform pour être positionnés, les éléments d’UI utilisent un script de type RectTransform. Lorsque vous ajoutez un élément graphique, ce script est automatiquement ajouté et l’Inspector modifie son affichage de façon à afficher le RectTransform à la place du Transform :

Un RectTransform permet de définir la position et la taille d’un élément d’UI sur sa zone de rendu 2D. La manière la plus aisée de procéder est de passer l’éditeur dans le mode "redimensionnement" et d’utiliser la souris pour placer les éléments correctement. Pensez de même à paramétrer la vue en Pivot et en Local pour des manipulations aisées.

Vous remarquerez aussi dans l’Inspector qu’il est possible d’affecter des propriétés liées à sa position dans une scène 3D : position sur l’axe Z (par rapport au plan de rendu), rotation et redimensionnement sur les trois axes.

Attention cependant, dans le cas d’un composant d’UI, modifier les valeurs de Scale a pour impact de "zoomer" réellement l’élément : les images, polices et autres contenus seront étirés et pourront apparaître de façon dégradée si l’agrandissement est trop élevé.

2. Le système d’ancrage

1. Text : afficher un texte

Il s’agit du composant de base permettant d’afficher un texte simple ou riche et de le mettre en forme. Sa propriété principale est évidemment Text qui permet de définir le texte à afficher. Il est possible de choisir la couleur d’affichage en utilisant la propriété Color dans l’Inspector ou le code.

1. Layout Element

Le système de disposition des éléments d’interface graphique se repose, dans ses mécanismes intrinsèques, sur un composant nommé LayoutElement. Tous les éléments d’UI disposent de celui-ci même s’il n’est pas visible dans l’Inspector. Afin de permettre une configuration plus personnalisée, il est possible de surcharger cette valeur par défaut par une valeur configurée dans l’Inspector.

Voici la procédure permettant d’ajouter une image dans la scène et de surcharger ses paramètres :

1. Logique du composant de traduction

La logique que nous allons implémenter est assez simple au demeurant : nous allons créer un script paramétré par une clé de traduction et ce script sera à poser sur chaque texte à traduire.

Les traductions seront écrites dans des fichiers textes au format générique CSV (une ligne par "valeur" avec chaque ligne composée de colonnes séparées par des points-virgules) présents dans le dossier Resources. Dans notre cas il n’y aura que deux colonnes : une pour une clé et une pour la valeur traduite.

Lors de la première lecture d’une valeur à traduire, le script générera un dictionnaire "clé/valeur" une fois pour toutes et les valeurs seront lues en son sein.

La première manipulation va donc consister à créer un composant Text et lui apposer un script :

2. Création des fichiers de ressources

Un fichier de traduction CSV sera créé et édité à l’aide d’un éditeur de texte....

1. Import d’une police

Unity supporte les polices de types TTF (True Type Font) et OTF (Open Type Font) ainsi que les caractères Unicode nécessaires à l’affichage de texte français, japonais ou encore chinois.

Il suffit de placer un fichier de ce type dans le dossier Asset pour qu’Unity l’importe. Ce processus crée automatiquement une texture et un matériau utilisé par Unity pour faire le rendu de la police là où cela est nécessaire. L’affichage d’un texte consistera à afficher des portions de cette texture.

Il est possible de configurer l’import de la police depuis l’Inspector :