[[Développement Unity]]
# Les PV du joueur
Pour commencer, on va créer un script **Health** pour la gestion des PV.
Dans le dossier **Scripts** : **Clic droit > Create > Scripting > MonoBehaviour Script** : le renommer **Health**.
On va commencer par déclarer l'Integer qui va gérer les PV, pour ensuite, lorsque mon joueur rentre en collision avec l'ennemi, on fasse -1 sur l'Integer déclaré précédemment.
```csharp
public int healthPoint = 3;
private void OnCollisionEnter(Collision collision)
{
if (collision.gameObject.CompareTag("Enemy"))
{
healthPoint--;
}
}
```
On met ce script sur le Player.
Il nous faudrait un retour visuel pour savoir que le joueur perd des PV. Pour ça on va mettre des ❤️ sur l'interface utilisateur (**UI**) qui disparaitront lorsqu'il perdra des PV.
Dans le hiérarchie du projet : **Clic droit > UI > Image**
![[image.gif]]
Notre image a été créée en enfant d'un GameObject qui s'appelle **Canvas**. Dans ce canva on va mettre tous les éléments de l'interface utilisateur.
Regardons ses components :
![[Capture décran 2025-05-22 143353.png]]
Dans le component **Canvas Scaler**, on va changer l'**UI Scale Mode** à **Scale With Screen Size** car si notre utilisateur à un tout petit écran, que l'UI ne prenne pas toute la place, ou à l'inverse, s'il a un très grand écran, qu'elle ne soit pas minuscule.
Pour la partie **Reference Resolution** on va mettre **X : 1920**, **Y : 1080**, ce qui équivaut à du **16:9**.
![[Capture décran 2025-05-22 150238.png]]
Dans la fenêtre **Game**, à la place de **Free Aspect** on va mettre en **16:9 Aspect**.
![[169.gif]]
On va pouvoir bien positionner l'UI.
On revient dans l'onglet **Scene** et on clique sur **Image** dans la hiérarchie, appuyez sur **F** pour centrer la vue dessus.
![[Capture décran 2025-05-22 153639.png]]
Dans le component **Image** nous allons mettre l'image d'un cœur. Dans le fichier **UI** vous trouverez une image avec 2 cœurs dessus. Si vous la glissé déposé dans **Source Image**, ça ne va pas fonctionner, pour ça il faut transformer l'image en sprite.
Cliquez sur l'image : **Texture Type : Sprite (2D and UI)**
![[sprite.gif]]
Maintenant, il faut séparer l'image, on veut que le coeur rouge.
Dans l'Inspector de l'image (maintenant un **Sprite**), cliquez sur **Install 2D Sprite Package**. Un fois installé, le **Sprite Editor** s'ouvre. Faites la manipulation suivante pour séparer l'image en 2 :
**Slice > Automatic > Grid By Cell Count > Column & R : R = 2 > Slice > Apply > Fermez la fenêtre**
![[slice.gif]]
![[Code et Développement/Développement d'Applications/Développement Unity/ressources/image (5).png]]
Maintenant, vous avez ça :
![[Capture décran 2025-05-23 153120.png]]
Retournez sur votre image dans la hiérarchie. Dans l'inspector, glissez déposez le cœur rouge dans **Source Image.**
![[dropimage.gif]]
Comme vous pouvez le voir, il est déformé, pour ça on va cliquer sur **Set Native Size**.
![[Code et Développement/Développement d'Applications/Développement Unity/ressources/image (1) (1).png]]
Ensuite, on modifie l'encrage de l'image pour qu'elle reste toujours en haut à gauche de l'écran, on va aussi le positionner en 0 0 pour mieux le positionner après. Changez les paramètres de Width et Height à **W : 200**, **H : 100**.
![[Code et Développement/Développement d'Applications/Développement Unity/ressources/image (2) (2).png]]
Placez le cœur au bord de la fenêtre avec ces paramètres :
![[Capture décran 2025-05-23 162401.png]]
Renommez le Heart01 et dupliquez le 2 fois et mettez les à côté
![[Capture décran 2025-05-23 162820.png]]
![[Capture décran 2025-05-23 162820.png]]
**Ctrl + S**
---