Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Maitriser parfaitement l'interface utilisateur sur Unity

L'Interface utilisateur, quelle utilité ?

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.

Comment créer une interface utilisateur ?

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, outil indispensable pour afficher le canvas dans le jeu

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

Insérer une image sur un Canvas

Les scripts avec le canvas

Texte et bulles de dialogue

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.

Menu

Dans cette section, tu vas voir comment créer une scène Menu et ajouter un bouton pour commencer le jeu !

Points de vie

Dans cette section, tu vas voir comment créer un système de points de vie et l’afficher !

Utiliser Inkscape pour créer ses images

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.

L'Interface utilisateur, quelle utilité ?

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.

Comment créer une interface utilisateur ?

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.