Ecole Supérieure Privée des Technologies & Ingénierie
Filière: ING-5-GLSI
Réalité virtuelle et animation 3D
Chapitre 5: Éléments préfabriqués,
collections et HUD
Enseignant: M. Majdi JRIBI
1 Année universitaire 2024-2025
Introduction
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.
Les déclencheurs sont souvent considérés comme des
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.
2 Année universitaire 2024-2025
Introduction
Vous apprendrez dans ce chapitre à :
Travailler avec des objets 2D en utilisant des textures GUI .
Utiliser des éléments préfabriqués pour créer plusieurs
exemplaires d’un objet de jeu et les stocker comme
ressources.
3 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
À 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).
Télécharger, importer et positionner
Importer les ressources suivantes (batteries):
un modèle 3D de pile.
cinq fichiers image d’une batterie de remplissage avec
charge.
un fichier audio qui sera lu lorsque le joueur collectera une
pile.
4 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
Ajouter un tag:
Pour pouvoir détecter une collision avec l’objet battery,
vous devez lui assigner un tag (« nommé battery ») pour
l’identifier dans le script que vous allez bientôt écrire.
É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.
5 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
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.
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.
6 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
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;
function Update() {
transform.Rotate(Vector3(0,rotationAmount,0));}
7 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
Créer l’élément préfabriqué Battery
À présent que l’objet battery est terminé, vous devez le
cloner à trois reprises pour disposer d’un total de quatre
piles. La meilleure méthode pour cela consiste à utiliser le
système d’élément préfabriqué de Unity. Un élément
préfabriqué est simplement un modèle de données qui
stocke les paramètres d’un objet créé dans la scène. Il
peut ensuite être cloné lors de l’édition ou de
l’instanciation (sa création à la volée) lors de l’exécution
du jeu.
8 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
cliquez sur le bouton Create et choisissez Prefab pour
créer un nouvel élément préfabriqué vide
Renommez l’élément préfabriqué vide battery. Faites
ensuite glisser l’objet battery sur lequel vous avez travaillé
depuis le panneau Hierarchy jusque sur l’élément
préfabriqué vide battery dans le panneau Project.
9 Année universitaire 2024-2025
I. La création de l’élément préfabriqué
batterie
Disperser les batteries:
Une fois l’élément préfabriqué battery est prêt, vous créez
4 exemplaires dans la scène autour de l’avant-poste.
10 Année universitaire 2024-2025
II. HUD
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 ont été conçues 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.
11 Année universitaire 2024-2025
II. HUD
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
Project, puis sélectionnez le fichier nommé
battery_nocharge.
Sélectionnez la texture à utiliser dans le panneau Project,
puis cliquez sur GameObject > Create Other > GUI
Texture dans le menu principal.
12 Année universitaire 2024-2025
II. HUD
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.
13 Année universitaire 2024-2025
II. HUD
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.
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.
14 Année universitaire 2024-2025
II. HUD
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.
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.
15 Année universitaire 2024-2025
II. HUD
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 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.
16 Année universitaire 2024-2025
II. HUD
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 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.
17 Année universitaire 2024-2025
II. HUD
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
s’afficher dans le panneau Inspector.
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.
18 Année universitaire 2024-2025
II. HUD
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.
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).
19 Année universitaire 2024-2025
II. HUD
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 Update() dans lequel se trouve l’appel à la fonction
Door() qui ouvre la porte :
if(hit.collider.gameObject.tag=="outpostDoor" && doorIsOpen ==
false){
Door(doorOpenSound, true, "dooropen", currentDoor);
}
20 Année universitaire 2024-2025
II. HUD
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 ==
false && BatteryCollect.charge >= 4){
Door(doorOpenSound, true, "opendoor", 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.
21 Année universitaire 2024-2025
II. HUD
Restreindre l’accès à l’avant-poste:
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).
Dans le script BatteryCollect, vous pourriez écrire simplement :
guiTexture.enabled = false;
22 Année universitaire 2024-2025
II. HUD
Restreindre l’accès à l’avant-poste:
La commande GetComponent()
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.
GameObject.Find("Battery GUI").GetComponent(GUITexture).enabled=false;
23 Année universitaire 2024-2025
II. HUD
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 :
Afficher l’objet Battery GUI pour que le joueur comprenne qu’il doit
charger une pile.
24 Année universitaire 2024-2025
II. HUD
Des indices pour le joueur:
L’indice Battery GUI
Ajouter la ligne de code suivante pour rendre la pile visible en cas
ou le joueur n’a pas collecté 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("Battery GUI").GetComponent(GUITexture).enabled=true;
25 Année universitaire 2024-2025
II. HUD
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.
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.
Sélectionnez cet objet dans le panneau Hierarchy, appuyez sur F2 et
renommez-le TextHint GUI.
26 Année universitaire 2024-2025
II. HUD
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 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;
27 Année universitaire 2024-2025
II. HUD
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
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.
28 Année universitaire 2024-2025
II. HUD
Des indices pour le joueur:
L’indice textuel
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.
29 Année universitaire 2024-2025
II. HUD
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(){
timer = 0.0;
textOn = false;
guiText.text = "";
}
30 Année universitaire 2024-2025
II. HUD
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;
timer += Time.deltaTime;
}
if(timer >=5){
textOn = false;
guiText.enabled = false;
timer = 0.0;
}
}
31 Année universitaire 2024-2025
II. HUD
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 && BatteryCollect.charge < 4){
GameObject.Find("Battery
GUI").GetComponent(GUITexture).enabled=true;
TextHints.message = "le mécanisme de la porte semble manquer de
puissance...";
TextHints.textOn = true;
32 Année universitaire 2024-2025
II. HUD
Des indices pour le joueur:
Utiliser les polices
33 Année universitaire 2024-2025
