Creating Interactive Menus in Unity

n

e

e

M

M

E

E

Z

Z

G

G

H

H

I

I

C

C

H

H

Regrouper les objets de lenvironnement

Cliquez sur GameObject > Create Empty. Un nouvel objet nomm

GameObject est alors cr .

Renommez-le Environment. Dans le panneau Hierarchy, faites glisser les

objets Directional Light, Daylight Simple Water et Terrain sur lobjet 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 lobjet ou de la

ressource, si bien que cette copie est baptis e Island Level 1. Assurez-vous quelle 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 lexception 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 lobjet First Person Controller. Il ny 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 dun logo pour le jeu. Le plus simple consiste

partir dune 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 lavons d j vu, les dimensions de la texture

s lectionn e sont automatiquement d finies. Un nouvel objet, MainTitle,

saffiche 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 lobjet MainTitle (0.5, 0.8, 0) dans le composant

D finissez la position de lobjet 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 laide dobjets 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

lobjet 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 sagit du premier des trois boutons que vous allez cr er et quils

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 dun 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 louvrir 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 lobjet 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 lobjet PlayBtn dans le panneau Inspector. En raison

de la ligne Require Component,

lobjet dispose galement dun

lobjet dispose galement dun

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 lorsquon 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 saffiche alors dans la

console derreur au bas de l cran :

Level Island Level couldnt be loaded because it is not added to the build

settings (Le niveau Island Level na pas pu tre charg car il nest 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. Lordre des sc nes sur la liste, repr sent par le

nombre droite du nom de la sc ne, indique lordre 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 quelle apparaisse

sous la sc ne Menu.unity

18

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 lajouter ce bouton, puis

assignez les textures appropri es et la s quence audio menu_beep de la

m me mani re que vous lavez fait pour le bouton pr c dent. La sc ne

que ce bouton permettra de charger nest 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 dexploitation.

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 lextrait 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.

Lobjet 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 loption 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 lobjet 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 lop ration pour les objets InstructionsBtn et QuitBtn.

Assurez-vous que le nom de chacun de ces objets saffiche en gris clair dans

le panneau Hierarchy et quils ont disparu dans laper 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 lobjet 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 louvrir 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 doptions 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 quutilisera la commande

BeginArea().

BeginArea().

Le dessin de la zone doit galement tre ferm laide de la commande

EndArea()

Cela marquant la fin du trac de la zone, tout le code de linterface

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 linterface 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 laction

effectuer lorsquon 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

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 laide 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 laide 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 lapparence du menu

De retour dans Unity, s lectionnez lobjet 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 laide 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 lobjet GUI Skin

De retour dans Unity, s lectionnez lobjet 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 dun script, son rendu seffectue uniquement lorsque le

jeu est test . Laspect 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 lobjet GUI Skin

Vous allez donc lui appliquer un style pour am liorer son apparence laide

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 lobjet 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 lobjet Menu2 dans le panneau

Hierarchy, puis faites glisser lobjet 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 lobjet 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 sint 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.

Cest 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 dinterface dans Unity : les scripts GUI et les GUI Texture. Vous

devriez maintenant savoir comment

impl menter lune ou lautre

m thode pour r aliser des interfaces.

Nous navons 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 danimation, tout en

apportant certaines retouches au jeu lui-m me.

Ann e universitaire 2012-2013

35