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) 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 s’agit de composants. Pourtant, pour rester simple, il s’agit de colliders qui possèdent un mode Déclencheur pouvant être activé avec l’option 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 l’affichage du texte à l’écran avec les éléments
GUI Text .
(cid:1) Utiliser des éléments préfabriqués pour créer plusieurs exemplaires d’un 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 d’un 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 d’une 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 l’objet battery,
vous devez lui assigner un tag pour l’identifier 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.
L’objet 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 l’option 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 l’objet 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 l’avant-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 Z Z G G H H I I C C H H
Année universitaire 2012-2013
8
(cid:1) L’affichage d’une interface graphique pour la pile: Maintenant que les piles sont en place, vous devez indiquer au joueur ce qu’il doit collecter grâce à une représentation visuelle de l’objet.
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 l’illusion que cet élément d’interface est dynamique, vous pouvez remplacer l’image de la pile vide par celle montrant la pile chargée d’une unité lorsque le joueur collecte la première pile, puis par l’image de la pile chargée à deux unités lorsqu’il 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
Publicité
9
(cid:1) Créer l’objet GUI Texture: Pour créer l’interface graphique montrant le chargement progressif de la pile, vous allez ajouter l’image de la pile vide dans la scène à l’aide 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 l’objet 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 l’objet GUI Texture: Si vous sélectionnez l’image que vous souhaitez utiliser en premier, vous indiquez à Unity qu’en 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 à l’aide du menu principal, l’objet créé est nommé selon le nom de la texture, ce qui est très utile pour trouver l’objet 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 l’objet GUI Texture: Sélectionnez au besoin l’objet battery_nocharge que
vous avez créé dans le panneau Hierarchy, appuyez sur F2 et renommez-le Battery GUI. (cid:1) Positionner l’objet GUI Texture: (cid:1) Positionner l’objet GUI Texture: Vous avez besoin d’utiliser les coordonnées relatives à l’écran lorsque vous travaillez avec des éléments 2D car ils fonctionnent uniquement sur les axes X et Y – l’axe Z étant utilisé pour définir la priorité d’affichage 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 l’objet GUI Texture: Les coordonnées relatives à l’écran s’incrémentent de 0 à 1 avec des nombres décimaux. Pour positionner l’objet 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 l’interface graphique à l’aide d’un script: Créer un nouveau script et nommer le BatteryCollect. Le script servira à contrôler le composant GUI Texture de l’objet
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 qu’une 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 l’objet Battery GUI.
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
15
(cid:1) Modifier l’interface graphique à l’aide d’un script: Sélectionnez l’objet Battery GUI dans le panneau Hierarchy, puis cliquez sur Component > Scripts > BatteryCollect dans le menu principal pour assigner le script à l’objet BatteryGUI.
Les cinq variables publiques en attente d’affectation devraient Les cinq variables publiques en attente d’affectation devraient
s’afficher 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 l’interface graphique de la collecte des piles est prête, il vous reste à l’ajouter au script PlayerCollisions attaché à l’objet 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 l’objet Battery GUI, vous allez utiliser une fonction OnTriggerEnter()pour détecter l’interaction avec les objets qui disposent de colliders en mode Déclencheur, c’est-à-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 l’accès à l’avant-poste: Avant de donner des instructions au joueur, vous allez modifier la partie du script Player-Collisions qui gère l’ouverture de la porte afin qu’elle s’active uniquement lorsque le joueur a collecté les quatre piles.
Double-cliquez sur le script PlayerCollisions dans le panneau Project pour l’ouvrir, puis recherchez l’extrait de code de la fonction Project pour l’ouvrir, puis recherchez l’extrait de code de la fonction Update() dans lequel se trouve l’appel à la fonction Door() qui ouvre la porte :
if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen ==
false){
Publicité
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 l’accès à l’avant-poste: Pour que la porte reste fermée aussi longtemps que toutes les piles n’ont pas été collectées, il suffit d’ajouter une troisième condition à l’instruction 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 s’ouvrira pas tant que le joueur n’aura 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 l’accès à l’avant-poste: (cid:1) La commande GetComponent() Une fois que le joueur peut entrer dans l’avant-poste, vous devez supprimer l’objet Battery GUI de l’écran. Pour cela, vous avez besoin d’accé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 l’accès à l’avant-poste: (cid:1) La commande GetComponent() Puisque ce script est attaché au même objet que le composant GUI Texture. Mais cela n’est 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 à l’objet 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 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 l’avant-poste, va jusqu’à celle-ci et essaie d’entrer ? Dans l’idéal, vous devriez alors :
(cid:1) Lui indiquer par du texte que le mécanisme de la porte doit être
rechargé.
(cid:1) Afficher l’objet Battery GUI pour que le joueur comprenne qu’il
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: L’indice Battery GUI Ajouter la ligne de code suivante pour rendre la pile visible en
cas ou le jour n’a 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: L’indice textuel Le moyen le plus simple pour écrire du texte en 2D qui doit s’afficher à 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. L’objet GUI Text s’affiche 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: L’indice 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 l’ouvrir 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
Publicité
(cid:1) Des indices pour le joueur: L’indice 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 n’a besoin ni d’être utilisée par d’autres scripts ni de s’afficher dans le panneau Inspector. Elle servira à décompter le temps écoulé à partir du moment où le message s’affiche à 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: L’indice 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: L’indice 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 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: L’indice 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 qu’elle 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 l’objet 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) l’instanciation l’instanciation
(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