Mohamed Amine MEZGHICH Ingénieur ENSI Doctorant en traitement d’image, Lab. CRISTAL,ENSI E-mail:[email protected]
Cycle Ingénieur
Année universitaire 2012-2013
1
(cid:1) Dans chapitre vous allez voir comment créer une scène distincte de la scène de l’île qui servira de menu. Plusieurs méthodes existent pour concevoir des menus dans Unity, qui combinent des comportements intégrés et des textures 2D.
(cid:1) Au cours de ce chapitre, vous apprendrez à :
(cid:1) Concevoir une interface de deux manières différentes ; Concevoir une interface de deux manières différentes ;
(cid:1) Contrôler les composants GUI Texture avec des événements souris
scriptés ;
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
(cid:1) Rédiger un script simple UnityGUI ;
(cid:1) Paramétrer les ressources GUI skin ;
(cid:1) Charger les scènes, les menus et le niveau de jeu.
Année universitaire 2012-2013
2
(cid:1) Vous découvrirez deux méthodes pour ajouter des menus interactifs :
(cid:1) Méthode 1 : composants GUI Texture et contrôle des événements souris par le script. Cette méthode consiste à créer des objets GUI Texture puis à gérer l’affichage de leurs textures à l’aide de scripts basés sur les événements souris – survol du menu, clic, bouton relâché. Elle les événements souris – survol du menu, clic, bouton relâché. Elle nécessite moins de code pour créer les boutons eux-mêmes, mais toutes les actions doivent être contrôlées par des scripts.
(cid:1) Méthode 2 : classe UnityGUI et ressources GUI skin. Avec cette la totalité du menu est créée à l’aide de scripts, méthode, contrairement à la précédente dans laquelle on crée des objets de jeu.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
3
(cid:1) Vous découvrirez deux méthodes pour ajouter des menus interactifs :
(cid:1) Méthode 1 : composants GUI Texture et contrôle des événements souris par le script. Cette méthode consiste à créer des objets GUI Texture puis à gérer l’affichage de leurs textures à l’aide de scripts basés sur les événements souris – survol du menu, clic, bouton relâché. Elle les événements souris – survol du menu, clic, bouton relâché. Elle nécessite moins de code pour créer les boutons eux-mêmes, mais toutes les actions doivent être contrôlées par des scripts.
(cid:1) Méthode 2 : classe UnityGUI et ressources GUI skin. Avec cette la totalité du menu est créée à l’aide de scripts, méthode, contrairement à la précédente dans laquelle on crée des objets de jeu.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
4
(cid:1) Décompressez si nécessaire le fichier nommé Menu.unitypackage puis revenez dans Unity. Cliquez sur Assets > Import package, parcourez votre disque dur jusqu’à l’emplacement de ces ressources et importez- les.
(cid:1) Une fois l’importation terminée, un dossier Menu s’affiche dans le
panneau Project. Il contient les éléments suivants : panneau Project. Il contient les éléments suivants :
(cid:1) Des textures pour le menu principal du jeu et trois boutons
: Play,
Instructions et Quit ;
(cid:1) Une séquence audio (un bip pour les boutons de l’interface).
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
5
(cid:1) Décompressez si nécessaire le fichier nommé Menu.unitypackage puis revenez dans Unity. Cliquez sur Assets > Import package, parcourez votre disque dur jusqu’à l’emplacement de ces ressources et importez- les.
(cid:1) Une fois l’importation terminée, un dossier Menu s’affiche dans le
panneau Project. Il contient les éléments suivants : panneau Project. Il contient les éléments suivants :
(cid:1) Des textures pour le menu principal du jeu et trois boutons
: Play,
Instructions et Quit ;
(cid:1) Une séquence audio (un bip pour les boutons de l’interface).
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
6
(cid:1) À cette section, vous utiliserez l’île elle-même comme toile de fond de vos menus afin de donner aux joueurs un avant-goût de l’environnement qu’ils exploreront et de fixer le cadre visuel du jeu.
(cid:1) Vous allez dupliquer l’île existante, l’afficher en plaçant une caméra à une certaine distance, puis vous superposerez des éléments d’interface 2D en certaine distance, puis vous superposerez des éléments d’interface 2D en utilisant les deux méthodes que nous avons mentionnées au début de ce chapitre.
Créer la scène Pour ces menus, l’environnement insulaire que vous avez créé va vous servir. En plaçant l’île à l’arrière-plan dans le menu, vous éveillerez la curiosité du joueur en lui présentant l’environnement qu’il pourra explorer lors du lancement de la partie.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
7
Dupliquer l’île
Pour commencer, vous réutiliserez la scène actuelle (Island Level) que vous avez créée aux chapitres précédents. Pour faciliter la gestion des cet éléments, environnement afin de les distinguer des objets dont vous n’avez pas environnement afin de les distinguer des objets dont vous n’avez pas besoin, comme l’avant-poste et les piles.
essentielles de
regrouperez
ressources
vous
les
De cette façon, il vous suffira ensuite de tout supprimer à l’exception du groupe que vous allez créer dans la copie du niveau. Il est aussi facile de regrouper des éléments dans Unity que d’imbriquer des objets enfants dans un objet parent vide.
Année universitaire 2012-2013
8
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Regrouper les objets de l’environnement
Cliquez sur GameObject > Create Empty. Un nouvel objet nommé
GameObject est alors créé.
Publicité
Renommez-le Environment. Dans le panneau Hierarchy, faites glisser les objets Directional Light, Daylight Simple Water et Terrain sur l’objet vide Environment.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Vous êtes maintenant prêts à dupliquer ce niveau pour créer le menu dans
une scène distincte.
Année universitaire 2012-2013
9
Dupliquer la scène Suivez les étapes suivantes pour dupliquer la scène : 1. Cliquez sur File > Save Scene pour vous assurer que la scène Island Level est
enregistrée, puis sélectionnez la ressource Island Level dans le panneau Project. 2. Cliquez sur Edit > Duplicate ou utilisez les raccourcis clavier Cmd/Ctrl+D. Lors
de la duplication, Unity ajoute simplement un numéro au nom de l’objet ou de la ressource, si bien que cette copie est baptisée Island Level 1. Assurez-vous qu’elle est sélectionnée dans le panneau Project puis renommez-la Menu.
3. Double-cliquez sur cette scène dans le panneau Project pour la charger et commencer
à la modifier.
4. La scène Menu étant ouverte, vous pouvez maintenant supprimer tous les objets inutiles. Appuyez sur Cmd/Ctrl puis cliquez sur tous les objets dans le panneau Hierarchy à l’exception du groupe Environment pour les sélectionner.
5. Supprimer ces objets de cette scène.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
10
Dupliquer la scène(suite)
Vous devez ajouter une nouvelle caméra dans la scène, car la seule caméra existante était celle attachée à l’objet First Person Controller. Il n’y a donc aucune caméra dans la scène actuelle, rien qui permette de visualiser le monde 3D, si bien que le point de vue dans le panneau Game est monde 3D, si bien que le point de vue dans le panneau Game est maintenant complètement vide.
Pour créer une caméra, cliquez sur GameObject > Create Other > Camera. Assurez-vous que ce nouvel objet Camera est sélectionné dans le panneau Hierarchy, puis entrez les valeurs de Position suivantes dans le composant Transform du panneau Inspector : (150, 250, –650).
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
11
Ajouter le titre Maintenant, vous avez besoin d’un logo pour le jeu. Le plus simple consiste à partir d’une texture que vous avez conçue et à la définir comme un objet GUI Texture dans Unity.
Sélectionnez la texture MainTitle dans le dossier Menu du panneau Project. Cette texture toujours sélectionnée, cliquez sur GameObject > Create Other > GUI Texture pour créer un nouvel objet GUI Texture basé sur cette texture. Nous l’avons déjà vu, les dimensions de la texture sélectionnée sont automatiquement définies. Un nouvel objet, MainTitle, s’affiche dans le panneau Hierarchy
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
12
Ajouter le titre(suite) Par défaut, tous les objets GUI Texturese placent à (0.5, 0.5, 0), ce qui correspond au milieu de l’écran. On se souvient que les éléments 2D utilisent les coordonnées de l’écran comprises entre 0 et 1.
Définissez la position de l’objet MainTitle à (0.5, 0.8, 0) dans le composant Définissez la position de l’objet MainTitle à (0.5, 0.8, 0) dans le composant Transform du panneau Inspector pour placer le logo du titre principal du jeu en haut et au centre de l’écran.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Maintenant, vous allez ajouter trois boutons à l’aide d’objets GUI Texture supplémentaires.
Année universitaire 2012-2013
13
Avec cette première méthode, vous créerez un menu avec une texture de fond transparente comme GUI Texture, de la même manière que vous venez de le faire avec le logo du titre principal.
Vous aurez ensuite besoin d’écrire un script afin que la texture puisse recevoir les événements souris (lorsque le curseur survole ou quitte le bouton et lorsque le joueur clique ou relâche le bouton de la souris). bouton et lorsque le joueur clique ou relâche le bouton de la souris).
Ajouter le bouton Play/Jouer Sélectionnez la texture PlayBtn dans le dossier Menu du panneau Project, puis cliquez sur GameObject > Create Other > GUI Texture. Sélectionnez l’objet PlayBtn que vous venez de créer dans le panneau Hierarchy et réglez sa position dans le composant Transform du panneau Inspector à (0.5, 0.6, 0).
Année universitaire 2012-2013
14
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Le script du bouton GUI Texture Comme il s’agit du premier des trois boutons que vous allez créer et qu’ils auront tous des fonctions en commun, ce script pourra être utilisé pour les trois boutons. Pour cela, vous choisirez des variables publiques pour définir les différents paramètres. Ainsi, chaque bouton doit :
(cid:1) lancer la lecture d’un son lors du clic ;
(cid:1) charger un autre niveau (ou une scène, selon la terminologie de Unity)
lors du clic ;
(cid:1) changer de texture lorsque la souris le survole pour être mis en
évidence.
Année universitaire 2012-2013
15
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Le script du bouton GUI Texture(suite) Sélectionnez le dossier Scripts dans le panneau Project, cliquez sur le bouton Create et sélectionnez JavaScript dans le menu déroulant. Renommez le script MainMenuBtns, puis double-cliquez sur son icône pour l’ouvrir dans l’éditeur de script. Commencez par déclarer les quatre variables publiques suivantes au début du script : variables publiques suivantes au début du script :
var levelToLoad : String;
var normalTexture : Texture2D;
var rollOverTexture : Texture2D;
var beep : AudioClip;
Année universitaire 2012-2013
16
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Le script du bouton GUI Texture(suite) Sélectionnez l’objet PlayBtn dans le panneau Hierarchy, puis cliquez sur Component > Scripts > Main Menu Btns pour lui appliquer le script que vous venez d’écrire (voir script). Le script doit alors apparaître sur la liste des composants de l’objet PlayBtn dans le panneau Inspector. En raison de la ligne Require Component, l’objet dispose également d’un l’objet dispose également d’un de la ligne Require Component, composant Audio Source.
Assigner des variables publiques Les variables publiques doivent être assignées avant que le script ne puisse fonctionner. Entrez le nom Island Level dans le champ de la variable Level To Load, afin que ce niveau se charge lorsqu’on clique sur le bouton. Faites ensuite glisser les textures PlayBtn et PlayBtnOver depuis le dossier Menu du panneau Project sur les variables Normal Texture et Roll Over Texture respectivement. Enfin, faites glisser la séquence audio menu_beep du même dossier sur la variable Beep. 17
Année universitaire 2012-2013
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Tester le bouton Cliquez maintenant sur le bouton. Le message suivant s’affiche alors dans la
console d’erreur au bas de l’écran :
Level Island Level couldn’t be loaded because it is not added to the build settings (Le niveau Island Level n’a pas pu être chargé car il n’est pas ajouté aux paramètres Build). ajouté aux paramètres Build).
À la section Scenes to build du panneau Build Settings, cliquez sur le bouton Add Current pour ajouter la scène Menu sur laquelle vous travaillez actuellement. L’ordre des scènes sur la liste, représenté par le nombre à droite du nom de la scène, indique l’ordre dans lequel ces scènes apparaîtront dans le jeu.
Vous devez vous assurer que la première scène qui se chargera sera toujours en position 0.Faites glisser la scène Island Level du panneau Project sur la liste actuelle des scènes du panneau Build Settings afin qu’elle apparaisse sous la scène Menu.unity 18
Publicité
Année universitaire 2012-2013
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Ajouter le bouton des instructions Pour ajouter le deuxième bouton, il vous suffit de sélectionner la texture InstructionsBtn dans le dossier Menu du panneau Project puis de cliquer sur GameObject > Create Other > GUI Texture. Un deuxième objet nommé InstructionsBtn est créé dans le panneau Hierarchy. Définissez sa position à (0.5, 0.5, 0) dans le composant Transform du panneau position à (0.5, 0.5, 0) dans le composant Transform du panneau Inspector.
Comme vous avez déjà écrit le script nécessaire, cliquez simplement sur Component > Scripts > Main Menu Btns pour l’ajouter à ce bouton, puis assignez les textures appropriées et la séquence audio menu_beep de la même manière que vous l’avez fait pour le bouton précédent. La scène que ce bouton permettra de charger n’est pas encore créée, aussi entrez Instructions pour la variable levelToLoad
Année universitaire 2012-2013
19
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Ajouter le bouton Quit/Quitter Ce bouton fonctionne de manière analogue aux deux premiers, mais il ne charge pas de scène. Au contraire, il appelle la classe Application et utilise la commande Quit() pour fermer le jeu, comme les boutons permettant de quitter une application sur un système d’exploitation.
Vous devez par conséquent modifier le script MainMenuBtns pour tenir
compte de cette différence.
Commencez par ajouter la variable booléenne publique suivante au début
du script :
var QuitButton : boolean = false;
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
20
Ajouter le bouton Quit/Quitter (suite) Vous devez restructurer la fonction OnMouseUp() avec une instruction if
else, comme le montre l’extrait de code suivant :
function OnMouseUp(){
audio.PlayOneShot(beep); yield new WaitForSeconds(0.35); if(QuitButton){
Application.Quit(); } else{ Application.LoadLevel(levelToLoad); }
}
Année universitaire 2012-2013
21
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Ajouter le bouton Quit/Quitter (suite) Sélectionnez la texture QuitBtn dans le dossier Menu du panneau Project puis cliquez sur GameObject > Create Other > GUI Texture pour créer un objet nommé QuitBtn dans le panneau Hierarchy. Définissez ensuite sa position à (0.5, 0.4, 0) dans le composant Transform du panneau Inspector. Inspector.
L’objet QuitBtn étant toujours sélectionné dans le panneau Hierarchy, cliquez sur Component > Scripts > Main Menu Btns pour lui attacher le script. Définissez ensuite les valeurs des variables publiques dans le panneau Inspector comme précédemment, en laissant vide le champ de la variable level To Load, puis activez l’option de la nouvelle variable Quit Button.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
22
Désactiver les Game Objects Sélectionnez l’objet PlayBtndans le panneau Hierarchy, puis décochez la case située à gauche de son nom dans le panneau Inspector pour le désactiver.
Répétez ensuite l’opération pour les objets InstructionsBtn et QuitBtn.
Assurez-vous que le nom de chacun de ces objets s’affiche en gris clair dans le panneau Hierarchy et qu’ils ont disparu dans l’aperçu du panneau Game.
Rédiger un script OnGUI()pour un menu simple Cliquez sur GameObject > Create Empty pour créer un objet vide
GameObject dans le panneau Hierarchy.
Renommez simplement l’objet Menu2.
Année universitaire 2012-2013
23
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Rédiger un script OnGUI()pour un menu simple(suite) Sélectionnez le dossier Scripts dans le panneau Project, cliquez sur le ce script bouton Create puis MainMenuGUI2 puis double-cliquez sur son icône pour l’ouvrir dans l’éditeur de script.
choisissez JavaScript. Renommez
Les classes GUI et GUI Layout Les classes GUI et GUI Layout Pour cet exemple, vous emploierez la classe GUI Layout de Unity, car elle dispose de plus d’options de positionnement que la classe GUI, dont la position est fixe.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
De nombreux développeurs préfèrent la classe GUI Layout car elle dispose automatiquement les éléments comme les formulaires et les boutons, les uns en dessous des autres. (voir Script: MainMenuGUI2.js)
Année universitaire 2012-2013
24
Le positionnement flexible des interfaces graphiques Utiliser la commande BeginArea() et préciser quatre paramètres : GUILayout.BeginArea(Rect(distance depuis la gauche de l’écran, distance
depuis le haut de l'écran, largeur, hauteur));
La commande Rect() définit la zone rectangulaire qu’utilisera la commande
BeginArea(). BeginArea().
Le dessin de la zone doit également être fermé à l’aide de la commande
EndArea()
Cela marquant la fin du tracé de la zone, tout le code de l’interface graphique doit se trouver avant cette ligne dans la fonction. Insérez plusieurs lignes après la commande BeginArea(),puis ajoutez la ligne suivante pour terminer le tracé de l’interface graphique :
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
GUILayout.EndArea();
Année universitaire 2012-2013
25
Ajouter des boutons UnityGUI Pour créer le premier bouton, ajoutez les lignes suivantes avant la ligne
EndArea() :
if(GUILayout.Button ("Play")){
OpenLevel("Island Level");
} } Un nouveau bouton GUILayout.Button est réalisé sur lequel est inscrit le mot Play. En plaçant cette instruction dans une condition if, le script crée non seulement le bouton mais indique également à Unity l’action à effectuer lorsqu’on clique dessus. Cette instruction appelle une fonction personnalisée nommée OpenLevel() possédant un seul paramètre : le nom du niveau. Vous écrirez la fonction OpenLevel() une fois la fonction OnGUI() complétée.
Année universitaire 2012-2013
26
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Publicité
Ajouter des boutons UnityGUI Ajoutez ensuite les deux conditions suivantes pour créer les deux autres
boutons :
if(GUILayout.Button ("Instructions")){ OpenLevel("Instructions"); }
if(GUILayout.Button ("Quit")){ Application.Quit(); }
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
27
Lancer des scènes à l’aide de fonctions personnalisées Ajoutez ensuite les deux conditions suivantes pour créer les deux autres
boutons :
if(GUILayout.Button ("Instructions")){ OpenLevel("Instructions"); }
if(GUILayout.Button ("Quit")){ Application.Quit(); }
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
28
Lancer des scènes à l’aide de fonctions personnalisées
function OpenLevel(level : String)
{ {
}
audio.PlayOneShot(beep); yield new WaitForSeconds(0.35); Application.LoadLevel(level);
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Année universitaire 2012-2013
29
Appliquer le script et modifier l’apparence du menu De retour dans Unity, sélectionnez l’objet de jeu vide Menu2 dans le panneau Hierarchy, puis cliquez sur Component > Scripts > Main Menu GUI2 pour ajouter ce script à cet objet.
Faites glisser la séquence audio menu_beep depuis le dossier Menu dans le Faites glisser la séquence audio menu_beep depuis le dossier Menu dans le panneau Project sur la variable publique Beep de ce script dans le panneau Inspector. Donnez ensuite une valeur de 200 aux paramètres Area Width et Area Height.
Vous allez appliquer un style à votre interface graphique pour améliorer son
apparence à l’aide des ressources GUI skins.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Pour cela, une ressource GUI skin doit être assignée à la variable menuSkin. Sélectionnez le dossier Menu dans le panneau Project, puis cliquez sur le bouton Create et sélectionnez GUI Skin dans le menu déroulant. Renommez MainMenu la nouvelle ressource New GUISkin.
Année universitaire 2012-2013
30
Les paramètres de l’objet GUI Skin De retour dans Unity, sélectionnez l’objet de jeu vide Menu2 dans le panneau Hierarchy, puis cliquez sur Component > Scripts > Main Menu GUI2 pour ajouter ce script à cet objet.
Faites glisser la séquence audio menu_beep depuis le dossier Menu dans le Faites glisser la séquence audio menu_beep depuis le dossier Menu dans le panneau Project sur la variable publique Beep de ce script dans le panneau Inspector. Donnez ensuite une valeur de 200 aux paramètres Area Width et Area Height.
Cliquez sur le bouton Play pour afficher le menu. Comme la classe GUI est compilée à partir d’un script, son rendu s’effectue uniquement lorsque le jeu est testé. L’aspect du menu que vous venez de créer avec le script est un peu terne.
Année universitaire 2012-2013
31
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Les paramètres de l’objet GUI Skin Vous allez donc lui appliquer un style pour améliorer son apparence à l’aide
des ressources GUI skins.
Pour cela, une ressource GUI skin doit être assignée à la variable menuSkin. Sélectionnez le dossier Menu dans le panneau Project, puis cliquez sur le Sélectionnez le dossier Menu dans le panneau Project, puis cliquez sur le bouton Createet sélection-nez GUI Skindans le menu déroulant. Renommez MainMenula nouvelle ressource New GUISkin.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Les objets GUI Skins possèdent des paramètres pour chaque élément de la
classe GUI : Boxes(boîtes) ; Buttons(boutons) ; Etc..
Année universitaire 2012-2013
32
Les paramètres de l’objet GUI Skin Le premier paramètre – Font(police) – est commun à tous les éléments régis par le thème (skin). Pour commencer, sélectionnez la police utilisée dans le jeu (la police Sugo si vous avez pris la même que nous) dans le panneau Project et déposez-la sur ce paramètre.
Ce thème (skin) va vous servir à définir le style des éléments boutons. Cliquez sur la flèche grise à gauche de l’élément Button du composant GUISkin dans le panneau Inspector pour afficher ses paramètres.
Maintenant que vous avez ajusté ces paramètres, vous êtes prêt à les appliquer au script GUI. Sélectionnez l’objet Menu2 dans le panneau Hierarchy, puis faites glisser l’objet MainMenu depuis le panneau Project sur la variable publique Menuskin dans le composant Main Menu GUI2. 33
Année universitaire 2012-2013
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Les paramètres de l’objet GUI Skin Cliquez sur le bouton Play pour vérifier que le skin a été appliqué et pour
afficher le rendu du script GUI.
Le menu a maintenant un aspect plus professionnel et il s’intègre mieux au
logo du jeu car sa police est la même que celle du jeu. logo du jeu car sa police est la même que celle du jeu.
C’est maintenant à votre tour de faire preuve de créativité ! Choisissez la méthode et le résultat que vous préférez. À partir de ce que vous avez appris à la section "Désactiver les Game Objects" de ce chapitre, vous pouvez choisir la deuxième méthode et laisser les trois objets de jeu GUI Texture désactivés, ou désactiver Menu 2et réactiver ces objets en cochant leurs cases dans le panneau Inspector.
Année universitaire 2012-2013
34
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Conclusion Nous venons d’étudier les deux principales méthodes de création des éléments d’interface dans Unity : les scripts GUI et les GUI Texture. Vous devriez maintenant savoir comment implémenter l’une ou l’autre méthode pour réaliser des interfaces.
Nous n’avons abordé ici que les notions essentielles dont vous aurez besoin chaque fois que vous écrirez un script GUI, mais cette méthode offre beaucoup plus de possibilités.
i i
M M o o h h a a m m e e d d A A m m n n e e M M E E Z Z G G H H I I C C H H
Il vous reste encore à créer la scène Instructions contenant des informations destinées au joueur. Ne vous inquiétez pas, vous allez le faire au prochain chapitre en découvrant de nouvelles techniques d’animation, tout en apportant certaines retouches au jeu lui-même.
Année universitaire 2012-2013
35