[Tutoriel] Réaliser une interface graphique sous Unity3D (GUI, HUD…)

Salut à toutes et à tous!

Je vous retrouve pour ce 1er « vrai » tutoriel écrit, étant donné que les autres étaient plutôt des conseils sur mes problèmes rencontrés.

Aujourd’hui, nous allons parler des interfaces graphiques sous Unity, vous savez, ce qui vous permet d’afficher des informations pour le joueur à l’écran

Nous allons voir qu’il existe plusieurs façons de faire cela, je détaillerai les 3 principales que j’ai rencontré à présent, et je m’attarderai sur les avantages et les inconvénients de chacune d’entre elles, afin que vous puissiez faire votre choix ! Je détaillerai en fin de tutoriel une notion un peu plus avancée, à savoir l’animation des interfaces graphiques, à l’aide d’iTween. Nous verrons que selon l’approche, ça parait plus ou mois compliqué de réaliser des animations…

Mais sans plus attendre, commençons par la 1ere méthode, la GUITexture !

GUITexture

Introduction:

Mais qu’est-ce que c’est encore ce machin bidule chouette encore  

Et bien, si vous connaissez le système de GUI d’Unity (je reviendrai après dessus), ceci est tout simplement son ancêtre . Je vais vous expliquer en quelques lignes son principe et surtout comment s’en servir.

Voilà à quoi ressemble un GUITexture ! Unity nous donne une GUITexture par défaut, avec le logo Unity3D. Vous pourrez le retrouver simplement en allant le chercher dans GameObject->Create Other-> GUI Texture

L’idée est que ce composant un peu spécial va être « collé » à l’écran et non affiché dans l’espace de la scène, comme peut l’être un cube.
En effet, ses coordonnées sont calculées sur l’écran et non dans le monde (le fameux ScreenCoordinates et non WorldCoordinates). Cela va donner la possibilité de venir dessiner des textures à l’écran, sans se soucier de l’endroit où pourrait se trouver l’objet dans la scène.

Malgré tout, cela reste entièrement un GameObject, qui a exactement les même caractéristiques que tout autre GameObject, il va donc se trouver dans votre hiérarchie de la scène. Ceci va permettre à n’importe quel script de travailler avec, afin de le faire bouger, d’interagir sur un clic souris, etc etc…

Tenez, par exemple ! Faisons ensemble un petit script permettant de récupérer le clic sur une GUITexture, pour reproduire l’effet d’un bouton. Vous allez voir dans cet exemple que le « nouveau » système de GUI d’Unity (implémenté pour la 2.0) est bien plus pratique Allons y !

Un exemple concret:

Il nous faut donc notre jolie GUITexture, que nous allons laisser d’origine, on va pas s’embêter à changer l’image, là n’est pas l’objectif.

Créons donc pour commencer un petit Script. A noter que pour tous les tutoriels « basiques » je coderai en JS, langage étant utilisé par les personnes débutant dans le monde d’Unity. Dans un second temps, je rajouterai la version C# de chaque morceau de code

Clic droit dans le dossier Script -> Create -> Javascript (Je suppose que vous avez déjà créé un dossier Scripts, dans un projet vide). Nous l’appellerons  »ClicOnGUITexture.js« 

Créons maintenant notre GUITexture. Comme expliqué:

Nous voici donc avec dans notre scène, la GUITexture, affiché au milieu de l’écran de jeu, et notre dossier Scripts contenant notre joli script vide.

Il n’est pas nécessaire, contrairement aux autres objets d’une scène, de lui attacher un Box Collider. En effet, la GUITexture se débrouille très bien sans, un soulagement !

Maintenant, voici ce que nous allons mettre dans le script que nous avons créé un peu avant:

function OnMouseDown() // Fonction utilisée pour récupérer les évènements souris. Cette fonction est appelée lorsqu'un clic est intervenu sur la GUITexture.

{

print("clic !"); // On affiche un print dans la console, afin de vérifier que cela fonctionne.

}

Et c’est tout ! En effet, la GUITexture n’est pas plus compliquée qu’un autre objet, il suffit juste d’implémenter (de ré-écrire) la fonction OnMouseDown.

Collons maintenant notre script dans la GUITexture:

Lançons !

Si on clique dans la GUITexture, on doit voir apparaitre « clic ! » dans la console:

En enlevant dans la console « Collapse » on peut voir autant de fois qu’on clique la fonction OnMouseDown est appelée.

Conclusion:

Pour résumer:

Points Positifs:
Une utilisation relativement simple et surtout un composant comme les autres. On peut être dérouté par l’utilisation de la GUITexture, car elle s’utilise de la même façon qu’un autre objet.

Points Négatifs: :(
Finalement, l’utilisation proche du système standard d’objet rend la réalisation d’une GUI complète volumineuse et contraignante, car ça représente un objet par texture, avec un script relié dessus pour récupérer les évènements souris, les animations…Son utilisation en général est moins intuitive que la méthode que nous allons voir à présent, le système actuel de GUI dans Unity.

Unity3D GUI System

Voici le système GUI bien connu des utilisateur d’Unity.

En effet, ce système va vous permettre de réaliser assez simplement et surtout rapidement une interface graphique pour vos jeux. Un menu? Des boutons? Des textures? Des scrollview? Des boutons à cocher? UnityGUI est capable de faire ça !

Waou ! C’est génial ! Mais je vois pas bien comment ça marche…

Pas de soucis, allons y tout en douceur. Je vais vous expliquer le principe fondamental du système de GUI. Il faut que vous le compreniez pour réaliser des GUI rapidement, c’est vraiment la clé de la méthode. Plus vous serez à l’aise avec le principe, plus vite vous irez. Je vais insister sur ce point là, car au début j’ai trouvé ça assez étrange comme principe, mais au final c’est bien pensé et ça colle parfaitement avec le principe général d’Unity

Un schéma vaut mieux qu’un millier de mots !

Le principe:

Comme l’explique ce schéma, la fonction OnGUI (utilisée pour dessiner du GUI à l’écran) est appelée à chaque frame de votre jeu, c’est à dire à chaque image.
Au tout départ de votre fonction, tout le GUI qui a été dessiné auparavant est complètement supprimé, et la fonction repart au début.

Cela peut vous paraitre « logique » mais il faut bien s’imprégner de ce concept là.

Un exercice pour savoir si vous avez bien compris:

Deux boutons, un seul affiché à la fois, si je clique sur le premier bouton il disparaît et apparaît le second bouton. Et inversement, si le second bouton est cliqué, il fait apparaître le premier est disparaît à son tour.

Pour vous aider, voici comment on récupère l’évènement d’un clic sur un bouton GUI (et vous allez voir que c’est bien plus simple qu’avec la GUITexture ):

if(GUI.Button(Rect(100,100,100,30), "Bouton !"))
{
  print("clic !");
}

Vous voyez, si on entoure le bouton d’une condition if, on peut récupérer l’évènement. En effet, si le retour de GUI.Button est vrai, cela signifie que le bouton est cliqué. Pratique non?

Allez, au boulot maintenant !

…
…
…

Voici la réponse (regardez pas avant d’avoir fini !):

//Script à attacher à une caméra.

var clicButton : boolean = false; //Cette variable va servir à garder l'état des deux boutons.

function OnGUI() //Fonction cruciale pour faire du GUI
{
	if(clicButton == false) //Si mon booléen est false, je dessine mon bouton 1.
	{
		if(GUI.Button(Rect(100,100,100,30),"Bouton 1 !")) //Test du clic sur le bouton 1.
		{
			clicButton = true; //Changement de la valeur de la variable.
		}
	}
	else //Sinon, on dessine le second bouton.
	{
		if(GUI.Button(Rect(205,100,100,30),"Bouton 2 !")) //Test du clic sur le bouton 2.
		{
			clicButton = false; //Changement de la valeur de la variable.
		}
	} //Fin Si
} //Fin

On comprend bien ici le principe qu’à chaque appel de la fonction, tout est supprimé. En effet, il suffit de ne pas rentrer dans une condition pour supprimer l’affichage d’un bouton ! Alors certains trouveront ça pratique et intuitif, mais je ne fais pas partie de ces gens là. Je viens d’un monde de création d’interface graphique en « dur » où l’on se pose pas cette question. Mais au final, c’est ce que font tout vos logiciels que vous utilisez Ou du moins, en règle générale, les logiciels suppriment tout à l’écran pour tout redessiner.

En pratique, les logiciels « standards » ne redessinent que lorsque c’est nécessaire (on bouge la fenêtre, une animation, etc etc…) c’est moins lourd de cette façon. Mais un jeu est constamment rafraîchit, il faut donc passer dans la fonction à chaque frame.

Voici une liste non exhaustive des différents éléments qu’on peut afficher grâce au système GUI d’Unity (je reprends essentiellement la documentation officielle d’Unity, à ma sauce et en français ):

Les différents objets graphiques:

GUI.Label: Un label assez classique. Permet généralement d’afficher du texte « brut » à l’écran, c’est à dire sans style en arrière plan, juste le texte. Je reviendrai un peu plus tard sur « comment personnaliser l’affichage ».

GUI.Label(Rect(100,100,100,30), "Un label !");

GUI.Button: Un bouton comme on a vu dans l’exemple précédent, cela permet donc de récupérer l’action « clic » d’un utilisateur.

GUI.Box: Un boite graphique, permettant d’encadrer des objets, cela donne l’apparence de séparer les éléments par catégorie à l’écran. Utile par exemple lorsque vous avez un ensemble de boutons.

Le GUI.Box s’utilise simplement comme un GUI.Button par exemple, ou GUI.Label.

GUI.Toggle: Un bouton à cocher. Très utile par exemple pour reproduire un système de boutons radios ou plus simplement cocher ou décocher une option.

Le code est un poil plus spécial, si vous gardez en tête le principe du GUI, que chaque image efface tout, comment pensez vous qu’il garde en mémoire le fait que le bouton est coché? En renvoyant son état pardi !

var etatBouton1 : boolean = false; //en déclaration, tout en haut de votre code, hors fonction.
{...}
//plus loin, dans la fonction OnGUI.
etatBouton1 = GUI.Toggle(Rect(120,100, 55, 20), etatBouton1, "Spot 1"); //On lui donne l'état en cours du bouton, et qu'on récupère aussitôt.

GUI.Scrollview: Je ne m’attarderai pas trop sur cet « objet », sachez cependant qu’il est là pour réaliser des « vues scrollable ». Pour simplifier, imaginez que vous avez 100 boutons à afficher sur votre écran. Impossible de tout afficher en même temps, vous imaginez la pagaille On créé alors dans une partie de l’écran une vue avec des ascenseurs horizontaux et verticaux, comme vous avez dans votre navigateur lorsque la page internet est trop grande  

Ce que vous voyez c’est un GUI.Box en arrière plan, un GUI.Scrollview et des GUI.Button dedans, pour remplir la vue.

Si je reprends l’exemple d’Unity avec des explications ça donne:

// Cette variable retient la position du scrollview, comme je vous rappelle le bouton toggle.
var scrollPosition : Vector2 = Vector2.zero;

function OnGUI () {
 //On démarre une vue "scrollable", le premier paramètre est sa taille à l'écran. C'est à dire la place qu'elle va prendre.
 //Le second est la position en cours de la vue.
 //Le troisième est le rectangle caché dans la scrollview. Ce rectangle est forcément plus grand, il va contenir tous vos boutons   A noter que sa position est
 //relative au rectangle où va se trouver la scrollview (0,0) pour la positionner en haut à gauche.
 scrollPosition = GUI.BeginScrollView (Rect (10,300,100,100), scrollPosition, Rect(0, 0, 220, 200));

 //On place ensuite 4 boutons, positions toujours relatives à la scrollview.
 GUI.Button(Rect(0,0,100,20), "Top-left");
 GUI.Button(Rect(120,0,100,20), "Top-right");
 GUI.Button(Rect(0,180,100,20), "Bottom-left");
 GUI.Button(Rect(120,180,100,20), "Bottom-right");

 //Enfin, on ferme la scrollview, pour continuer de dessiner normalement.
 GUI.EndScrollView();
}

GUI.DrawTexture: Remplace l’ancienne GUITexture, et permet donc d’afficher une texture à l’écran.

//1er paramètre est le rectangle d'affichage.
//Le 2nd est la texture, une variable de type "Texture" dans votre script.
//Le 3ieme est le mode de redimensionnement. C'est à dire que si la taille de la texture ne correspond pas avec le rectangle, comment celle-ci va s'afficher.
//Le 4ieme sera toujours true (utilisation basique)
//Le dernier et le ratio de l'image, ceci peut être intéressant pour forcer une déformation de l'image. 0f pour le ratio d'origine de l'image.
GUI.DrawTexture(Rect(10,10,60,60), aTexture, ScaleMode.ScaleToFit, true, 0f);

Voilà ! Vous savez maintenant les composants principaux du GUI, je vais maintenant un peu plus détailler la méthode pour personnaliser votre GUI, comme par exemple la texture d’un bouton, sa couleur, la police, etc…

La personnalisation:

Il existe un moyen peu pratique à mon goût qui est le système de Skin et de Style en GUI. Essayons de décortiquer ça ensemble.

Un GUIStyle est un style qui va permettre de personnaliser votre affichage. Vous allez pouvoir donner une police à ce style, changer la couleur de fond des objets, etc etc…
Tout se passe dans l’éditeur d’Unity une fois votre variable dans votre script GUIStyle créée. Par exemple:

var monStyle : GUIStyle;

Une fois fait et le script compilé, le style va apparaître sur votre objet en tant que composant. Vous allez pouvoir à ce moment le personnaliser (image de la doc d’Unity):

Vous voyez donc que nous avons notre « Custom GUI Style » dans cet exemple. Vous allez donc pouvoir changer tout ce que vous souhaitez.

Ensuite, vous pourrez l’utiliser dans votre programme, comme bon vous semble. Il suffira de passer en dernier paramètre de tous les objets GUI votre Style, comme cet exemple:

GUI.Label(Rect(100,100,100,30), "Un label !", monStyle);

Et le tour est joué !

Ce label prendra donc le style en considération, selon ce que vous avez mis. Alors c’est pas mal, mais il y a plus pratique, ce sont les GUI.Skin.

Rah mais je comprends plus rien mouâââ…Des Style? Des Skin? Et puis quoi encore??

Pas de panique ! Les GUISkin sont juste un ensemble de GUIStyle, cela regroupe par exemple un style par objet affichable (un pour la GUIBox, un pour le GUIButton, etc…).

Du coup vous allez voir que c’est bien plus simple à s’en servir, pour peu que vous vouliez avoir une interface uniforme
Pour mettre en place un GUISkin, voici ce qu’il faut faire:

Une fois créé, on va pouvoir directement faire des modifications. L’apparence du GUISkin est la suivante:

En dépliant chaque ligne, on se retrouve avec un GUIStyle

Pour s’en servir dans un script contenant du GUI, on créé aussi une variable, de type GUISkin, et on utilise la ligne suivante:

var gskin : GUISkin; //même principe, en haut du code, en dehors de fonctions.
{...}
//Ensuite plus loin, dans la fonction OnGUI, au début:
function OnGUI()
{
  GUI.skin = gskin;
  ...
}

Et c’est tout ! Tout le GUI sera au style choisi, par catégorie et c’est bien pratique !

Enfin, si vous voulez juste changer rapidement la couleur de votre GUI, vous pouvez faire ceci:

GUI.color = Color.red;
GUI.Button(...);
GUI.color = Color.white;

Tout ce qui suit un GUI.color aura la couleur choisie.

Conclusion:

Et voilà, maintenant vous savez tout sur le GUI d’Unity ! Il est donc temps de faire un point sur cette méthode:

Points Positifs:

Une utilisation encore plus simple que la GUITexture, pour peu qu’on maîtrise le principe de fonctionnement. De nombreux types d’objets sont utilisable, afin de réaliser vraiment ce que l’on souhaite. De plus, avec la personnalisation, il est très facile de modifier l’affichage.

Points Négatifs:

Les objets qu’on utilise ne font pas partie de la scène, il est donc moins évident de s’en servir si on est pas habitué au principe du GUI. De plus, et c’est sur ce point là sur lequel je veux insister, le GUI d’Unity est bien tant que l’on souhaite faire des interfaces « simples ». Mais dès qu’il s’agit d’animer un peu tout ça, c’est catastrophique ! Nous reviendrons ensemble dans la dernière partie, consacrée à l’animation des interfaces graphiques. Vous comprendrez qu’il est très compliqué d’animer du GUI d’Unity.

Je terminerai sur un point, ce système va complètement changer avec la prochaine version d’Unity (3.5), qui sort bientôt, et tout cela devrait rentrer dans l’ordre. Je referai une explication une fois la techno. maîtrisée pour venir compléter ce tutoriel.

Le mot de la fin:

C’est tout pour aujourd’hui ! Dans une seconde partie, nous verrons ensemble une 3ieme méthode (si si) pour faire du GUI, et nous finirons avec les animations.

J’espère que ce tutoriel vous a plu, autant par sa forme que par son contenu, n’hésitez surtout pas à commenter si vous avez des remarques, positives et/ou négatives.

Merci de m’avoir lu, à très bientôt pour la suite !

cAyou.