---
title: Événement UI
slug: world-sdk-guide-fr/evenement-ui
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScript a intégré le support pour le système UI de Unity.

Vous pouvez utiliser différents composants GUI tels que des panneaux, des boutons, des zones de saisie de texte et des menus déroulants pour créer l'interface utilisateur dans votre monde.

Pour utiliser des éléments UI de Unity dans ZEPETOScript, vous devez d'abord les importer.

:::CodeblockTabs
UnityEngine.UI

```typescript
import { Slider, Button } from 'UnityEngine.UI';
```
:::

Ensuite, déclarez l'élément UI de Unity que vous souhaitez ajouter en tant que propriété.

:::CodeblockTabs
TypeScript

```typescript
public sliderUI: Slider;
public btnUI: Button;
```
:::

Les propriétés déclarées sont maintenant visibles et accessibles dans la fenêtre de l'inspecteur ZEPETOScript.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VWOAydIB2wgX2H3zwu205-20240904-102415.png)

Ouvrez la fenêtre Hiérarchie et faites glisser les composants UI de Unity dans chaque champ de propriété dans la fenêtre de l'inspecteur ZEPETOScript. Avec les valeurs de propriété assignées, vous pouvez y accéder et les manipuler depuis le script. Utilisez cela pour ajouter un gestionnaire pour n'importe quel événement de contrôle.

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // Ajouter un événement de clic de bouton
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // Ajouter un événement de curseur
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::



Jouez pour vérifier que l'événement de l'interface utilisateur est géré correctement.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Y-ZOugt_AGkg0u4-auNQt-20240904-102415.png)

Vérifiez l'ensemble du code d'exemple.

:::CodeblockTabs
UI\_Event

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Slider, Button } from 'UnityEngine.UI';

export default class UIEvent extends ZepetoScriptBehaviour {

    public sliderUI: Slider;
    public btnUI: Button;

    Start() {
        this.btnUI.onClick.AddListener(() => {
            // Ajouter l'événement de clic du bouton
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // Ajouter l'événement du curseur
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



Vous pouvez en savoir plus sur les interfaces utilisateur Unity que ZEPETOScript fournit en cliquant sur les liens ci-dessous.

:::hint{type="info"}
**📘 Interface utilisateur Unity**
[https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html](https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html)
:::

:::hint{type="info"}
**📘 Composants d'interaction**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::