Nous allons apprendre à utiliser l‘Interface Utilisateur appelée UI (pour User Interface) sur Unity.
L’Interface Utilisateur dans Unity, c’est très simple. C’est un endroit ou on peut être en mesure de communiquer avec l’utilisateur. Celui-ci pourra effectuer des choix. Dans quel but? Cela peut être pratique pour la création de menus, mais aussi les fenêtres de dialogue, l’affichage du texte ou encore la discussion entre personnages.
C’est très simple, il faut cliquer sur clic droit -> sélectionner UI -> sélectionner Canvas.
Canvas est en effet le premier outil qui va nous intéresser. Il s’agit d’une zone sur laquelle on peut être en mesure de créer son interface. L’ajout d’images sera possible, tout comme du texte et des boutons. C’est la base de l’interface utilisateur !
Nous allons désormais nous intéresser à un réglage très spécifique qui va simplifier votre interface. C’est le Render Mode dont nous allons parler. Il peut nous permettre d’ajuster la façon dont sera affichée à l’écran votre interface.
Le Render Mode, c’est ce qui s’apparente au mode de rendu. Pour l’ajuster, il faut aller dans la fenêtre de droite, sur le composant Canvas. Si on sélectionne les petites flèches, on observera que plusieurs types de rendu existent.
– Les rendus en screen Space vont prendre toute la place de l’écran. Dans ce mode de rendu, le Canvas aura une taille fixe, celle de l’écran.
Le Screen Space se placera en premier plan sur la scène, devant tout le reste. Cela peut être pratique pour faire des menus ou afficher une fenêtre de dialogue au premier plan.
Autre particularité, le Canvas va aussi prendre tout l’écran. Son affichage dépendra de la caméra, et pourra être caché par d’autres éléments. Dans un premier temps nous ne l’utiliserons pas car il est plus complexe à prendre en main.
– Voici Un rendu en World Space qui indique que le canvas va être déplacé et positionné à l’endroit souhaité. Il nous servira à régler la taille du canvas et sa position dans la scène.
Par exemple on peut afficher une zone de texte sur objet ou encore créer des bulles pour faire parler des personnages.
Voici ci-dessous ce qui est possible de faire avec ces deux modes de rendu. Admirez les possibilités s’offrant à vous
Beaucoup de possibilités s'offrent à vous sur Canvas.
Pour commencer, nous allons simplement voir comment importer une image sur le canvas !
Pour créer une nouvelle image, on va faire un clic-droit dans Hierarchy et choisir UI puis Image.
Une image se positionne forcément sur un canvas. Si on a déjà créé un canvas, on peut créer l'image directement dedans, sinon le canvas se créera automatiquement.
On a donc dans Hierarchy une image dans un canvas comme illustré ci-dessous.
On a alors dans notre scène, un canvas avec un carré blanc, représentant l'image, qui s'affiche. C'est normal, l'image n'est pas encore définie !
Pour importer une image dans Unity, il faut importer un nouvel asset. Dans la fenêtre en bas de l'écran, on fait un clic-droit puis on sélectionne Import New Asset...
Une fenêtre Import New Asset s'ouvre ensuite. Trouve l'image que tu souhaites importer dans les fichiers de l'ordinateur, sélectionne la et appuie sur Import.
Quand l'image est importée, tu vas trouver dans l'Inspector, l'Import Settings qui permet de faire les réglages de l'importation.
Pour pouvoir être utilisée dans l'Interface Utilisateur (UI), l'image doit avoir une texture de type Sprite.
Pour faire ce réglage, dans la fenêtre Import Settings, il faut régler le Texture Type. Sélectionne Sprite (2D and UI) qui comme son nom l'indique est compris par l'UI.
Attention ! N'oublie pas d'appuyer sur le bouton Apply pour appliquer les changements.
Pour l'intégrer à ton canvas, c'est comme n'importe quelle image connue par Unity.
Si tu ne la trouves pas dans la fenêtre Select Sprite, elle est peut-être rangée dans l'onglet Scene (si tu n'étais pas le dossier Assets lors de l'import).
Dans cette section, tu vas voir comment utiliser le script afficher du texte et les différents Render Mode du Canvas pour créer du texte en bas de page ou des bulles de dialogue lorsque tu t’approches d’un personnage.
Pour utiliser le script afficher texte, tu auras besoin de plusieurs éléments. Tout d'abord, le canvas que tu veux afficher ou masquer. Ensuite, l'objet ou le personnage qui déclenchera l'affichage du texte quand tu en es suffisamment proche. Et enfin le joueur qui déclenchera l'affichage.
On va d'abord s'occuper de l'objet qui déclenche le message. Afin de détecter la collision, nous allons créer ou modifier son Box Collider : quand le joueur entre dans la zone de collision, le message s'affiche, quand il en sort, le message disparaît. Si l'objet n'as pas de Box Collider, clique sur Add Component et sélectionne Box Collider. Pense à bien cocher la case Is Trigger, et clique sur Edit Collider pour donner au collider la taille souhaitée.
Ensuite, on va ajouter le script à l'objet.
Pour fonctionner, le script à besoin de deux variables:
Les Tags Declencheurs correspondent à la liste de Tag qui activent l'affichage du texte. Pour notre exemple, nous voulons que ce soit le joueur qui active l'affichage du message. On va donc mettre le tag Player dans le script Afficher Texte et donner le tag Player au joueur.
Pour l'Affichage nous allons choisir le Game Object qui doit s'afficher. Cet objet doit être un Canvas. On va donc choisir le Canvas qui contient l'image que l'on veut afficher.
Pour créer des textes en bas de page, nous allons utiliser le Canvas en Render Mode - ScreenSpace-Overlay. Vérifie bien que ton canvas est dans le bon Render Mode dans l'Inspector.
Si tu n'as pas encore importé ton image, importe-la et positionne la où tu veux. Ici nous l'avons mis en bas du Canvas, tu peux aussi l'afficher ailleurs sur le canvas. L'utilisation du mode ScreenSpace-Overlay, affichera le Canvas en plein écran et en premier plan.
Il ne reste plus qu'à rattacher ce Canvas au Script Afficher Texte et le tour est joué !
Pour créer des bulles de dialogue, nous allons utiliser le Canvas en Render Mode - WorldSpace. Vérifie bien que ton canvas est dans le bon Render Mode dans la fenêtre de droite.
Le Render Mode - WorldSpace permet de positionner le Canvas ou l'on veut dans la scène. Pour créer une bulle, on va déplacer et ajuster la taille du canvas à la taille de l'objet. Pour déplacer et redimensionner le Canvas, c'est comme pour tous les autres objets dans Unity.
Une fois que le Canvas est bien placé et que tous les éléments y sont bien positionnés, il ne reste plus qu'à rattacher ce Canvas au Script Afficher Texte et le tour est joué !
Dans cette section, tu vas voir comment créer une scène Menu et ajouter un bouton pour commencer le jeu !
On commence par créer une nouvelle scène, à laquelle on ajoute un bouton.
Pour le bouton, tu peux utiliser le bouton par défaut de Unity, une image ou encore le site Textcraft / CoolText (pour créer des images de textes sympas).
Pour modifier le texte de base ou ajouter une image :
Attention, après avoir importé des images dans Unity, pense à les passer en mode ‘Sprite 2D’ dans l’Inspector et appliquer tes modifications.
Pour importer une image :
On ajoute ensuite au bouton le script ‘Bouton Changer Scene’ pour pouvoir changer de scène et on sélectionne la scène de destination et le bouton sur lequel est placé le script.
Tu peux ensuite décorer ton menu en ajoutant une ou plusieurs images de fond, ou bien en plaçant ton terrain pour donner une vue d’ensemble du niveau.
Si l’image apparaît devant le bouton, inverse l’ordre des deux dans la ‘Hiérarchy’ !
Pour centrer une image par rapport à la caméra, tu peux utiliser les ancres + ALT :
Puis, dans ‘Scene’, on passe en mode 2D pour ajuster les coins de l’image à ceux du Canvas.
Dans cette section, tu vas voir comment créer un système de points de vie et l’afficher !
On commence par ajouter le script ‘Points de vie’ sur le joueur.
On crée ensuite un texte dans la ‘Hierarchy’ et on le positionne dans le canvas. Attention, le texte sera remplacé par ‘PV’ suivi du nombre de points de vie.
On indique dans l’Inspector :
Si Inkscape, n’est pas installé sur ton ordinateur, tu peux le télécharger ICI.
Tu peux aussi utiliser d’autres outils suivant les images que tu souhaites créer : PiskelApp, ArtRage, Designer.gravit.io, etc.
Pour créer ses propres images et propres bulles de textes, tu peux utiliser le logiciel de dessin Inkscape. C'est un logiciel qui permet de faire beaucoup de choses, ici nous allons uniquement regarder quelques fonctionnalités de bases.
On va pouvoir importer différentes images, les modifier et rajouter du texte facilement. On peut aussi facilement dessiner des formes simples et les modifier.
Il existe de très nombreux outils de dessin sur Inkscape, nous n'allons pas tous les voir, ni les utiliser. De manière générale, il y a deux zones qui vont nous être utiles.
La colonne de gauche, permet de choisir l'outil de dessin que l'on va utiliser.
La colonne de droite propose différentes fenêtres qui permettent de faire des réglages plus précis sur la zone de dessin ou sur l'outil utilisé.
Les différents outils permettent de créer ou modifier des objets. Les objets sont tous les éléments utilisés : le texte, les formes, les images...
Tu n'es pas obligé d'utiliser tous ces outils pour réaliser ton image. Tu peux faire des choses sympas uniquement avec l'outil de sélection et l'outil de texte. Commence par faire des choses simples avec les outils de base avant de te lancer dans des choses un peu plus compliquées.
On peut récupérer différentes images en ligne. Plusieurs sites peuvent être intéressants:
Une fois notre image récupérée, pour l'ouvrir sur Inkscape on va aller dans Fichier > Importer ( ou Ctrl+I), sélectionner le fichier et l'Ouvrir. Pour le format du fichier, pas mal de formats images sont reconnus (.png, .jpeg, .jpg, .svg, etc.).
Inkscape est un logiciel de dessin vectoriel, c'est à dire que l'image est enregistrée comme un ensemble de traits (point de départ, point d'arrivé, orientation du trait pour les courbes etc.) qu'on appelle vecteur. De nombreuses images sont en format matriciel c'est à dire qu'on a une grille de pixel ou chaque pixel à une couleur. Si l'image qu'on a récupérée est en format matriciel, Inkscape va demander comme l'importer.
Nous allons garder les paramètres de base, si une fenêtre d'import s'ouvre , on clique directement sur Valider.
Une fois l'image importée, on va utiliser l'outil sélectionner pour pouvoir la déplacer, la modifier ou la redimensionner à la bonne taille. Cela peut être utile si on a plusieurs objets que l'on peut mettre l'un au dessus de l'autre, comme par exemple du texte.
Si tu veux sélectionner une partie de l'image que tu as crée, nous allons avoir besoin de l'outil Création de Carrés et de Rectangles.
Une fois l'outil sélectionné, en cliquant une fois tu crées le premier sommet du rectangle, maintiens appuyé et étire le rectangle jusqu'à l'endroit où tu veux fixer le sommet opposé (celui de l'autre coté de la diagonale). On appelle ça cliquer-glisser.
Si tu veux faire un carré et que tes cotés soient égaux, appuie sur la touche Ctrl en dessinant ton rectangle.
Pour découper une partie de l'image, il faut que tu dessines une forme qui recouvre la partie que tu veux garder.
Puis en utilisant l'outil Sélection, sélectionne en même temps l'image et le rectangle qui le recouvre : deux solutions, soit maintenir la touche Shift (Maj) appuyée et sélectionner les objets l'un après l'autre, soit faire un cliquer-glisser qui englobe entièrement les objets.
Enfin va dans l'onglet Objet > Découpe > Définir, et voilà, le tour est joué !
L'outil Création de Carrés et de Rectangles peut aussi être utile pour dessiner des carrés et des rectangles tout simplement.
Pour changer l'épaisseur et la couleur des bords ou celle du remplissage, tu vas avoir besoin d'aller dans la fenêtre de gauche dans l'outil Fond et Contour.
S'il n'apparaît pas directement dans les fenêtres de droite, tu peux l'ouvrir avec le raccourci clavier Ctrl+Maj+F ou alors en allant dans Objet > Fond et Contour.
L'onglet Fond permet de changer la couleur du fond, Contour celle du contour et Style de contour permet de changer l'épaisseur.
Si tu veux juste faire une découpe les couleurs n'ont aucune importance.
Les outils Création de Cercles et d’Ellipse et Création d'Etoiles et de Polygones fonctionnent globalement de la même manière. L'outil de création de polygones est un peu plus complexe mais moins utile, ne l'utilise que si tu es à l'aise avec les autres outils de créations de formes.
On va maintenant voir comment rajouter du texte pour afficher un message avec l'outil Création de Texte.
Pour créer une zone de texte, on va commencer par faire un cliquer-glisser pour définir la zone sur laquelle on va écrire. Inkscape va automatiquement adapter les retours à la ligne pour que le texte rentre dans la zone. Si on crée la zone uniquement en cliquant, le texte sera sur une seule ligne et ne s'adaptera pas à la forme.
Pour changer la couleur du texte, on va faire exactement comme pour les formes géométriques avec l'outil Fond et Contour (Ctrl+Maj+F)
Dans la barre d'outil en haut de page, il y a plusieurs outils qui sont utiles pour changer l'apparence d'un texte. Le premier menu déroulant permet de changer la police de caractère, le second à mettre un texte en gras ou en italique et le troisième à changer la taille du texte.
Il y a pas mal d'autres outils, mais ceux-là suffisent pour faire des trucs super chouette.
Par défaut la zone de dessin est une page format A4. Si on veut que la taille de la page soit adaptée à la taille du dessin, on peut aller dans Fichier > Propriété du document, ou alors Ctrl+Maj+D.
Puis il suffit de cliquer sur Redimensionner la page au contenu, puis Ajuster la page au dessin ou à la sélection.
Cette manipulation peut être utile pour exporter uniquement notre dessin, mais aussi pour avoir une page adaptée à la taille de notre dessin.
Pour récupérer son image et l'importer sur Unity, on va l'exporter en png.
Il ne faut pas enregistrer directement en png, sinon l'export ne se fera pas correctement (pas de transparence, fichiers incomplets...).
Pour exporter on va aller dans Fichier > Exporter au format PNG ... (Ctrl+Maj+D). Une fenêtre s'ouvre dans la colonne de droite.
Tout en haut on va pouvoir choisir ce que l'on veut exporter (la totalité du dessin, la sélection seulement, la page entière ...).
Dans la partie Nom de fichier en cliquant sur Exporter sous, on va pouvoir choisir le nom et l'emplacement du fichier à exporter.
Enfin, il ne reste qu'à appuyer sur Exporter.
Nous allons apprendre à utiliser l‘Interface Utilisateur appelée UI (pour User Interface) sur Unity.
L’Interface Utilisateur dans Unity, c’est très simple. C’est un endroit ou on peut être en mesure de communiquer avec l’utilisateur. Celui-ci pourra effectuer des choix. Dans quel but? Cela peut être pratique pour la création de menus, mais aussi les fenêtres de dialogue, l’affichage du texte ou encore la discussion entre personnages.
Pour créer une nouvelle interface utilisateur, il suffit de faire un clic droit dans la zone de création de scène et de sélectionner UI.
On voit alors différents objets que l’on peut créer dans cette interface utilisateur.
Le premier qui va nous intéresser est le Canvas.
Le canvas est la zone sur laquelle on va pouvoir créer notre interface, en ajoutant des images, du texte, des boutons : sans canvas, pas d’interface utilisateur !
Il existe aussi des réglages qui permettent d’afficher ce canvas à différents endroits, comme le Render Mode, qui permet de régler comment notre interface va être afficher à l’écran.