Unity Tutorial : UI Unity ~ Event Trigger pada UI

Unknown

Basic, Unity3D

Sebelum memulai tutorial ini, diharapkan sudah memahami tutorial UI Unity : Menambah Event dan Script pada Komponen UI

Event Trigger ? Sederhananya apa yang harus terjadi jika kursor menyentuh atau meninggalkan komponen UI.

Bukannya sudah ada ya tinggal pake animasi seperti pada tutorial UI Unity : Menambah Animasi Pada UI ?

Memang, tapi hanya beberapa komponen saja yang bisa diberi animasi, Image adalah salah satu yang tidak bisa diberi animasi dan event ketika kursor menyentuh komponen maupun meninggalkan komponen. Nah maka dari itu digunakan event trigger.

MULAI

Buat 3 Folder di dalam Assets 

- Scenes : Penyimpanan scene

- Scripts : Penyimpanan script

- Textures : Penyimpanan tekstur atau foto.

Tambahkan beberapa foto ke dalam folder Textures. Penambahan bisa dengan cara Drag n Drop langsung atau copy-paste foto ke dalam folder Textures dengan mencari lokasi Proyek Unity - Assets - Textures.

Tambahkan komponen UI Image ke dalam scene.

Masuk ke folder Texture dan klik salah satu foto, kemudian ubah tekstur foto menjadi "Sprite (2D and UI)". Alasannya karena foto tersebut akan digunakan di dalam System UI.

Klik komponen image pada hirarki, kemudian lihat jendela inspektor - Image (Scripts), ganti source image - pilih image tadi, ini berfungsi untuk menambahkan foto ke dalam game atau scene.

1. ImageScript.cs

using UnityEngine;
using System.Collections;

public class ImageScript : MonoBehaviour {

public void KursorMasuk(){
Debug.Log("Kursor Menyentuh Gambar");
}

public void KursorKeluar(){
Debug.Log("Kursor Keluar Dari Gambar");
}
}

Penjelasan : 

Buat C# script baru pada folder Scripts, kemudian tuliskan program pada gambar di atas, program ini bertujuan memberikan event ketika kursor menyentuh dan meninggalkan objek.

Pada tutorial kali ini dibuat 2 buah event atau method yang nantinya akan diberikan kepada objek gambar.

Berikan script ke EventSystem

Klik pada komponen UI Image, kemudian klik menu Component - event - event trigger.

Jika sudah, masih pada komponen image, liaht jendela inspektor - Event Trigger. 

Untuk menambah event baru, klik Add New Event Type.

Pada tutorial kali ini hanya akan dibahas 3 event :

- PointerEnter, Event terjadi ketika kursor menyentuh objek

- PointerExit, Event terjadi ketika kursor meninggalkan objek

- PointerDown, Event terjadi ketika kursor menekan objek

Karena pada script tadi hanya membuat 2 method yaitu ketika kursor menyentuh dan meninggalkan objek, tambahkan 2 event type yaitu PointerEnter dan PointerExit.

Kemudian tambahkan ke 2 method di dalam skrip kepada komponen Image.

Cara menambahkan Event atau Method : Menambahkan Event dan Script pada Komponen UI

Jalankan game dan coba arahkan kursor mendekati sampai menyentuh komponen image, kemudian jauhkan kursor. 

SELESAI