UI Event

4min
ZEPETOScript has integrated support for the Unity UI system.
You can use different GUI components such as panels, buttons, text input box, and toggle menus to create the user interface in your world.
To use a unity UI elements in ZEPETOScript, you need to import them first.
UnityEngine.UI
import { Slider, Button } from 'UnityEngine.UI';
import { Slider, Button } from 'UnityEngine.UI';
﻿
Then, declare the Unity UI element you would like to add as a property.
TypeScript
public sliderUI: Slider;
public btnUI: Button;
public sliderUI: Slider;
public btnUI: Button;
﻿
The declared properties are now visible and accessible in the ZEPETOScript inspector window.
﻿
Open the Hierarchy window and drag and drop the Unity UI components into each property field in the ZEPETOScript inspector window. With the property values assigned, you can access and manipulate them from within the script. Use this to add a handler for any of the control’s events.
EventListener
Start() {
    this.btnUI.onClick.AddListener(() => {
        // Add button click event
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // Add slider event
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
Start() {
    this.btnUI.onClick.AddListener(() => {
        // Add button click event
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // Add slider event
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
﻿
﻿
Play to check that the UI event is handled properly.
﻿
Check the entire sample code.
UI_Event
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(() => {
            // Add button click event
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // Add slider event
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
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(() => {
            // Add button click event
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // Add slider event
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
﻿
﻿
You can learn more about Unity UIs that ZEPETOScript provide by clicking the links below.
📘 Unity UI
https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html﻿
📘 Interaction Components
https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html﻿
﻿
EventTrigger
ScriptableObject