---
title: เหตุการณ์ UI
slug: world-sdk-guide-th/ui
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScript มีการสนับสนุนที่รวมเข้ากับระบบ UI ของ Unity.

คุณสามารถใช้ส่วนประกอบ GUI ที่แตกต่างกัน เช่น แผง, ปุ่ม, กล่องป้อนข้อความ, และเมนูสลับ เพื่อสร้างส่วนติดต่อผู้ใช้ในโลกของคุณ.

ในการใช้ส่วนประกอบ UI ของ Unity ใน ZEPETOScript คุณต้องนำเข้าก่อน.

:::CodeblockTabs
UnityEngine.UI

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

จากนั้น ประกาศส่วนประกอบ UI ของ Unity ที่คุณต้องการเพิ่มเป็นคุณสมบัติ.

:::CodeblockTabs
TypeScript

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

คุณสมบัติที่ประกาศไว้ตอนนี้สามารถมองเห็นและเข้าถึงได้ในหน้าต่างตรวจสอบของ ZEPETOScript.

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

เปิดหน้าต่าง Hierarchy และลากและวางส่วนประกอบ UI ของ Unity ลงในแต่ละฟิลด์คุณสมบัติในหน้าต่างตรวจสอบของ ZEPETOScript เมื่อกำหนดค่าให้กับคุณสมบัติแล้ว คุณสามารถเข้าถึงและจัดการกับพวกมันจากภายในสคริปต์ ใช้สิ่งนี้เพื่อเพิ่มตัวจัดการสำหรับเหตุการณ์ใด ๆ ของการควบคุม.

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // เพิ่มเหตุการณ์คลิกปุ่ม
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // เพิ่มเหตุการณ์สไลเดอร์
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::





เล่นเพื่อตรวจสอบว่าเหตุการณ์ UI ถูกจัดการอย่างถูกต้อง

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

ตรวจสอบโค้ดตัวอย่างทั้งหมด

:::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(() => {
            // เพิ่มเหตุการณ์คลิกปุ่ม
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // เพิ่มเหตุการณ์เลื่อน
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ UI ของ Unity ที่ ZEPETOScript ให้บริการได้โดยการคลิกที่ลิงก์ด้านล่าง

:::hint{type="info"}
**📘 Unity UI**
[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"}
**📘 ส่วนประกอบการโต้ตอบ**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::