Mohamed Amine MEZGHICH
Ing nieur ENSI
Doctorant en traitement dimage, Lab. CRISTAL,ENSI
E-mail:[email protected]
Cycle Ing nieur
Ann e universitaire 2012-2013
1
(cid:1) Au cours de ce chapitre, vous allez apprendre plus sur
la d tection des collisions en utilisant les colliders
(composants de collision) comme d clencheurs.
(cid:1) Les d clencheurs sont souvent consid r s comme des
composants. Pourtant, pour rester simple, il sagit de
composants. Pourtant, pour rester simple, il sagit de
colliders qui poss dent un mode D clencheur pouvant
tre activ avec loption Is Trigger dans le panneau
Inspector.
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
2
(cid:1) Vous apprendrez dans ce chapitre :
(cid:1) Travailler avec des objets 2D en utilisant des textures
GUI .
(cid:1) Contr ler laffichage du texte l cran avec les l ments
GUI Text .
(cid:1) Utiliser des l ments pr fabriqu s pour cr er plusieurs
exemplaires dun objet de jeu et les stocker comme
ressources.
Ann e universitaire 2012-2013
3
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) cette section, vous importerez un mod le de pile que
vous convertirez en l ment pr fabriqu de Unity (un
mod le de donn es qui peut tre utilis pour cr er
plusieurs copies dun mod le poss dant certains
param tres pr d finis).
param tres pr d finis).
(cid:1) T l charger, importer et positionner
(cid:1) Importer les ressources suivantes (batteries.unitypackage):
(cid:1) un mod le 3D de pile
(cid:1) cinq fichiers image dune batterie de remplissage avec
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
charge
(cid:1) un fichier audio qui sera lu lorsque le joueur collectera une
pile
Ann e universitaire 2012-2013
4
(cid:1) Ajouter un tag:
Pour pouvoir d tecter une collision avec lobjet battery,
vous devez lui assigner un tag pour lidentifier dans le
script que vous allez bient t crire.
(cid:1) chelle, collider et rotation:
Vous allez maintenant pr parer la pile devenir un
l ment pr fabriqu en d finissant les composants et
les param tres qui seront conserv s sur chaque copie
de la batterie.
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) Redimensionner la batterie:
L l ment que vous cr ez devra avoir une taille suffisante pour
que le joueur puisse le rep rer dans le jeu.
Lobjet battery tant toujours s lectionn dans le panneau
Hierarchy, donnez une valeur de 6 tous les param tres
Scale du composant Transform dans le panneau Inspector.
Scale du composant Transform dans le panneau Inspector.
(cid:1) Ajouter un d clencheur de collision:
Cliquez sur Component > Physics > Capsule Collider(la
forme est la plus proche de celle de la pile). Vous devez
activer le mode D clencheur de son collider. Pour cela,
choisissez loption Is Trigger dans le nouveau composant
Capsule Collider.
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) Cr er un effet de rotation:
Vous allez crire un script pour faire pivoter lobjet
battery, de mani re ajouter un effet visuel et le
rendre plus visible pour le joueur.
Nommer ce script rotateObject.
Le contenu de ce script:
var rotationAmount : float = 5.0;
functionUpdate() {
transform.Rotate(Vector3(0,rotationAmount,0));}
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
(cid:1) Disperser les batteries:
Une fois l l ment pr fabriqu battery est pr t, vous cr e
4 exemplaires dans la sc ne autour de lavant-poste.
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
Publicité
Z
Z
G
G
H
H
I
I
C
C
H
H
Ann e universitaire 2012-2013
8
(cid:1) Laffichage dune interface graphique pour la pile:
Maintenant que les piles sont en place, vous devez indiquer au
joueur ce quil doit collecter gr ce une repr sentation visuelle
de lobjet.
Les textures import es avec le paquet de ressources ont t con ues
pour montrer clairement que le joueur devra collecter quatre
pour montrer clairement que le joueur devra collecter quatre
batteries afin de d verrouiller la porte.
Pour cr er lillusion que cet l ment dinterface est dynamique,
vous pouvez remplacer limage de la pile vide par celle montrant
la pile charg e dune unit lorsque le joueur collecte la premi re
pile, puis par limage de la pile charg e deux unit s lorsquil
obtient la deuxi me, et ainsi de suite.
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
9
(cid:1) Cr er lobjet GUI Texture:
Pour cr er linterface graphique montrant le chargement
progressif de la pile, vous allez ajouter limage de la
pile vide dans la sc ne laide du composant GUI
Texture de Unity.
Affichez le contenu du dossier textures dans le panneau
nomm
s lectionnez
fichier
puis
le
Project,
battery_nocharge.
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
S lectionnez la texture utiliser dans le panneau
Project, puis cliquez sur GameObject > Create
Other > GUI Texture dans le menu principal.
Ann e universitaire 2012-2013
10
(cid:1) Cr er lobjet GUI Texture:
Un nouvel objet auquel est attach un composant GUI
Texture est alors cr . Unity lit les dimensions de la
texture choisie partir du fichier image.
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
(cid:1) Cr er lobjet GUI Texture:
Si vous s lectionnez limage que vous souhaitez utiliser en
premier, vous indiquez Unity quen cr ant le nouvel objet,
il doit utiliser ce fichier comme texture et d finir les
dimensions du composant GuiTexture en fonction de
celle-ci.
celle-ci.
De plus, lorsque vous s lectionnez une image et cr ez un
objet GuiTexture laide du menu principal, lobjet cr est
nomm selon le nom de la texture, ce qui est tr s utile
pour trouver lobjet dans le panneau Hierarchy apr s sa
cr ation.
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
(cid:1) Cr er lobjet GUI Texture:
S lectionnez au besoin lobjet battery_nocharge que
vous avez cr dans le panneau Hierarchy, appuyez sur
F2 et renommez-le Battery GUI.
(cid:1) Positionner lobjet GUI Texture:
(cid:1) Positionner lobjet GUI Texture:
Vous avez besoin dutiliser les coordonn es relatives
l cran lorsque vous travaillez avec des l ments 2D car
ils fonctionnent uniquement sur les axes X et Y laxe
Z tant utilis pour d finir la priorit daffichage des
diff rents l ments GUI Texture.
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
13
(cid:1) Positionner lobjet GUI Texture:
Les coordonn es relatives l cran sincr mentent de 0 1
avec des nombres d cimaux. Pour positionner lobjet
Battery GUI o il doit appara tre (dans le coin inf rieur
gauche de l cran), vous avez besoin de d finir les valeurs X
gauche de l cran), vous avez besoin de d finir les valeurs X
et Y de son composant Transform.
Donnez une valeur de 0,05 au param tre X et une valeur de
0,2 au param tre Y.
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 pouvez galement afficher les d tails 2D dans le
panneau Scene en cliquant sur le bouton Game Overlay.
Ann e universitaire 2012-2013
14
(cid:1) Modifier linterface graphique laide dun script:
Cr er un nouveau script et nommer le BatteryCollect.
Le script servira contr ler le composant GUI Texture de lobjet
Battery GUI.
Avec ce script, la texture affich e l cran d pendra du nombre de
piles qui ont t collect es ces informations seront stock es dans
piles qui ont t collect es ces informations seront stock es dans
une variable num rique enti re.
Une fois l criture du script termin e, vous modifierez le script Player-
Collisions, en ajoutant une d tection de d clencheur de collision
pour les piles. Chaque fois quune collision sera d tect e entre le
personnage et une pile, la variable num rique sera incr ment e
dans le script BatteryCollect, ce qui modifiera la texture utilis e par
le composant GUI Texture de lobjet Battery GUI.
i
i
M
M
Publicité
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
15
(cid:1) Modifier linterface graphique laide dun script:
S lectionnez lobjet Battery GUI dans le panneau Hierarchy,
puis cliquez sur Component > Scripts > BatteryCollect dans le
menu principal pour assigner le script lobjet BatteryGUI.
Les cinq variables publiques en attente daffectation devraient
Les cinq variables publiques en attente daffectation devraient
safficher dans le panneau Inspector.
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
Faites glisser les cinq fichiers de texture depuis le dossier
textures du panneau Project que vous avez import plus
t t sur les variables publiques appropri es.
Ann e universitaire 2012-2013
16
(cid:1) La collecte des piles avec des d clencheurs:
pr sent que linterface graphique de la collecte des piles est
pr te, il vous reste lajouter au script PlayerCollisions attach
lobjet First Person Controller, afin de d tecter si
le
personnage du joueur interagit avec les d clencheurs de
collision des objets battery.
collision des objets battery.
Pour d clencher les diff rents tats de lobjet Battery GUI,
vous allez utiliser une fonction OnTriggerEnter()pour
d tecter linteraction avec les objets qui disposent de
colliders en mode D clencheur, cest- -dire les piles
collecter (voir script).
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
17
(cid:1) Restreindre lacc s lavant-poste:
Avant de donner des instructions au joueur, vous allez modifier la
partie du script Player-Collisions qui g re louverture de la porte afin
quelle sactive uniquement lorsque le joueur a collect les quatre
piles.
Double-cliquez sur le script PlayerCollisions dans le panneau
Project pour louvrir, puis recherchez lextrait de code de la fonction
Project pour louvrir, puis recherchez lextrait de code de la fonction
Update() dans lequel se trouve lappel la fonction Door() qui
ouvre la porte :
if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen ==
false){
Door(doorOpenSound, true, "dooropen", currentDoor);
}
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
18
(cid:1) Restreindre lacc s lavant-poste:
Pour que la porte reste ferm e aussi longtemps que toutes les
piles nont pas t collect es, il suffit dajouter une troisi me
condition linstruction if existante.
if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen
if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen
== false && BatteryCollect.charge >= 4){
Door(doorOpenSound, true, "dooropen", currentDoor);
}
vous v rifiez si la valeur de la variable statique charge du script
BatteryCollect est gale ou sup rieure 4. Ainsi, la porte ne
souvrira pas tant que le joueur naura pas ramass toutes les
piles dispers es dans l le.
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
(cid:1) Restreindre lacc s lavant-poste:
(cid:1) La commande GetComponent()
Une fois que le joueur peut entrer dans lavant-poste, vous
devez supprimer lobjet Battery GUI de l cran. Pour cela, vous
avez besoin dacc der son composant GUI Texture.
Le d clenchement de la porte se trouvant dans le script
PlayerCollisions dans lequel
vous travaillez actuellement,
vous devez faire r f rence un composant attach un objet
diff rent (Battery GUI) que celui sur lequel se trouve ce script
(First Person Controller).
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
Dans le script BatteryCollect, vous pourriez crire simplement :
guiTexture.enabled = false;
Ann e universitaire 2012-2013
20
(cid:1) Restreindre lacc s lavant-poste:
(cid:1) La commande GetComponent()
Puisque ce script est attach au m me objet que le composant
GUI Texture. Mais cela nest pas possible dans un script qui ne
se trouve pas sur un objet poss dant un composant GUI
Texture.
Texture.
Vous devez donc utiliser la commande GetComponent(), la
suite de la r f rence lobjet sur lequel se trouve le composant
auquel vous voulez vous adresser. En effet, vous pouvez alors
facilement ajuster les composants des objets externes.
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
Publicité
Z
G
G
H
H
I
I
C
C
H
H
GameObject.Find("BatteryGUI").GetComponent(GUITexture).enabled=false;
Ann e universitaire 2012-2013
21
(cid:1) Des indices pour le joueur:
Des indices pour le joueur
Que faire si le joueur, moins intrigu par les piles que par la
porte de lavant-poste, va jusqu celle-ci et essaie dentrer ?
Dans lid al, vous devriez alors :
(cid:1) Lui indiquer par du texte que le m canisme de la porte doit tre
recharg .
(cid:1) Afficher lobjet Battery GUI pour que le joueur comprenne quil
doit charger une pile.
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
(cid:1) Des indices pour le joueur:
Lindice Battery GUI
Ajouter la ligne de code suivante pour rendre la pile visible en
cas ou le jour na pas collecter les 4 piles.
else if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen == false
&& BatteryCollect.charge < 4){
Ins rez la ligne suivante dans la d claration else if :
}
GameObject.Find("BatteryGUI").GetComponent(GUITexture).enabled=true;
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
(cid:1) Des indices pour le joueur:
Lindice textuel
Le moyen le plus simple pour crire du texte en 2D qui doit
safficher l cran consiste utiliser un composant GUIText.
Vous allez donc cr er un nouvel objet GUI Text qui poss de
les deux composants Transform et GUIText.
les deux composants Transform et GUIText.
Cliquez sur GameObject > Create Other > GUI Text. Lobjet GUI
Text saffiche alors dans le panneau Hierarchy. Le texte 2D
"Gui Text" appara t galement dans le panneau Scene.
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
S lectionnez cet objet dans le panneau Hierarchy, appuyez sur
F2 et renommez-le TextHint GUI.
Ann e universitaire 2012-2013
24
(cid:1) Des indices pour le joueur:
Lindice textuel
S lectionnez le dossier Scripts dans le panneau Project, cliquez
sur le bouton Create et choisissez JavaScript dans le menu
d roulant.
Renommez ce script TextHints, puis double-cliquez sur son
Renommez ce script TextHints, puis double-cliquez sur son
ic ne pour louvrir dans l diteur de script.
Pour commencer, d clarez les trois variables suivantes au d but
du script :
static var textOn : boolean = false;
static var message : String;
private var timer : float = 0.0;
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
25
(cid:1) Des indices pour le joueur:
Lindice textuel
La premi re variable statique, textOn, est de type bool en, car
elle doit agir comme un simple interrupteur.
Ensuite, le script d clare une autre variable statique message
de type string, que vous utiliserez pour transmettre toutes les
de type string, que vous utiliserez pour transmettre toutes les
informations au param tre Text du composant. Ces deux
variables sont statiques car nous aurons besoin de faire
r f rence elles depuis un autre script.
La troisi me variable, timer, est priv e car elle na besoin ni
d tre utilis e par dautres scripts ni de safficher dans le
panneau Inspector. Elle servira d compter le temps coul
partir du moment o le message saffiche l cran, afin de le
faire dispara tre apr s un certain d lai.
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
(cid:1) Des indices pour le joueur:
Lindice textuel
Ajoutez ensuite la fonction Start() suivante, afin de d finir
certains tats lorsque la sc ne commence :
function Start(){
function Start(){
timer = 0.0;
textOn = false;
guiText.text = "";
}
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
(cid:1) Des indices pour le joueur:
Lindice textuel
Ajoutez ensuite le code suivant la fonction Update()du script :
function Update () {
if(textOn){
guiText.enabled = true;
guiText.text = message;
guiText.text = message;
timer += Time.deltaTime;
}
if(timer >=5){
textOn = false;
guiText.enabled = false;
timer = 0.0;
}
}
i
Publicité
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
(cid:1) Des indices pour le joueur:
Lindice textuel
Cette portion du script envoie un texte la variable statique message
du script TextHints et d finit la valeur de la variable bool enne
textOn du m me script true. Voici la d claration compl te else if :
else if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen == false
else if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen == false
&& BatteryCollect.charge < 4){
GameObject.Find("Battery GUI").GetComponent(GUITexture).
enabled=true;
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
TextHints.message = "le m canisme de la porte semble manquer de
puissance...";
TextHints.textOn = true;
}
Ann e universitaire 2012-2013
29
(cid:1) Des indices pour le joueur:
Utiliser les polices
Pour utiliser des polices dans un projet Unity, vous devez les
importer comme ressources, comme pour tous les autres
l ments. Pour cela, vous pouvez simplement ajouter un
fichier TTF (polices TrueType) ou OTF (polices OpenType)
fichier TTF (polices TrueType) ou OTF (polices OpenType)
cliquer sur Assets > Import New Asset dans Unity.
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 cet exemple, vous emploierez une police libre de droits
commerciaux, disponible sur www.dafont.com (un site web
proposant des polices libres de droits, tr s int ressantes pour
les travaux typographiques).
Ann e universitaire 2012-2013
30
(cid:1) Des indices pour le joueur:
Utiliser les polices
T l chargez la police Sugo si vous souhaitez avoir la m me que
nous, , puis appliquez les m thodes mentionn es plus t t
pour ajouter le fichier Sugo.ttf comme ressource votre
projet.
projet.
Une fois cette ressource import e dans votre projet, localisez et
s lectionnez la police dans le panneau Project. Pour la rendre
plus lisible, vous allez augmenter sa taille chaque fois quelle
est utilis e. la section True Type Font Importer du panneau
Inspector, d fi-nissez une Font Size(taille de la police) de 24,
puis cliquez sur le bouton Apply
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
31
(cid:1) Des indices pour le joueur:
Utiliser les polices
Pour que lobjet TextHint GUIutilise cette police, s lectionnez-
le dans le panneau Hierarchy, puis choisissez la police dans le
menu d roulant situ droite du param tre Font du
composant GUIText dans le panneau Inspector.
composant GUIText dans le panneau Inspector.
Vous pouvez galement faire glisser la police du panneau
Project sur ce param tre dans le panneau Inspector.
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
32
(cid:1) Des indices pour le joueur:
Utiliser les polices
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
33
(cid:1) Au prochain chapitre, vous d couvrirez deux concepts
essentiels de plus :
(cid:1) linstanciation
linstanciation
(cid:1) la physique des corps rigides.
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
34