---
title: Acara UI
slug: world-sdk-guide-id/acara-ui
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScript telah mengintegrasikan dukungan untuk sistem UI Unity.

Anda dapat menggunakan berbagai komponen GUI seperti panel, tombol, kotak input teks, dan menu toggle untuk membuat antarmuka pengguna di dunia Anda.

Untuk menggunakan elemen UI Unity dalam ZEPETOScript, Anda perlu mengimpornya terlebih dahulu.

:::CodeblockTabs
UnityEngine.UI

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

Kemudian, deklarasikan elemen UI Unity yang ingin Anda tambahkan sebagai properti.

:::CodeblockTabs
TypeScript

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

Properti yang dideklarasikan sekarang terlihat dan dapat diakses di jendela inspector ZEPETOScript.

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

Buka jendela Hierarchy dan seret serta jatuhkan komponen UI Unity ke setiap bidang properti di jendela inspector ZEPETOScript. Dengan nilai properti yang ditetapkan, Anda dapat mengakses dan memanipulasinya dari dalam skrip. Gunakan ini untuk menambahkan handler untuk salah satu peristiwa kontrol.

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // Tambahkan peristiwa klik tombol
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // Tambahkan peristiwa slider
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::



Mainkan untuk memeriksa bahwa peristiwa UI ditangani dengan benar.

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

Periksa seluruh kode contoh.

:::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(() => {
            // Tambahkan peristiwa klik tombol
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // Tambahkan peristiwa slider
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



Anda dapat mempelajari lebih lanjut tentang UI Unity yang disediakan oleh ZEPETOScript dengan mengklik tautan di bawah ini.

:::hint{type="info"}
**📘 UI 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"}
**📘 Komponen Interaksi**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::