Friday 18 September 2015

Unity Tutorial Indonesia : Mobile - UI Panel Pop Up [part 3/3]

Advertisement





MULAI

Buka atau double click script "PopUpManager" yang ada di dalam Folder Scripts, kemudian tuliskan listing program berikut.


A. PopUpManager.cs

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class PopUpManager : MonoBehaviour {

                Ray ray;
                RaycastHit hit;

                GameObject canvas;
                Animator anim;
               
                public Text textInfo;
               
                public GameObject[] objek;
                public string[] info;
               
                void Awake(){
                                canvas = GameObject.Find("Canvas");
                                anim = canvas.GetComponent<Animator>();
                }
               
                void Update(){
                                if(Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began){
                                                ray = Camera.main.ScreenPointToRay(Input.GetTouch(0).position);
                                               
                                                if(Physics.Raycast(ray, out hit, Mathf.Infinity)){
                                                               
                                                                for(int i = 0; i < objek.Length; i++){
                                                                                if(hit.collider.gameObject == objek[i]){
                                                                                                textInfo.text = info[i];  
                                                                                                anim.SetTrigger("Pop Muncul");
                                                                                }
                                                                }
                                                               
                                                }
                                }
                }
               
                public void popUp_OFF(){
                                anim.SetTrigger("Pop Keluar");
                }

}




Pada tutorial Part 1 , Script sudah ditambahkan ke objek Main Camera, klik Main Camera dan arahkan kursor ke jendela Inspektor.

1. Drag n Drop UI Text yang bernama "Text Info" Ke kotak kosong "Text Info" di dalam script.
2. Atur size dari objek, jika objek yang akan dideteksi ada 10, maka berikan nilai 10 pada Size Objek, Kemudian Drag n Drop satu demi satu objek yang akan dideteksi ke dalam kotak Elemen [i].
3. Berikan nilai yang sama pada size Info sesuai banyaknya objek dan tuliskan tentang info setiap objek pada kotak element [i].

Perlu di perhatikan pemberian info harus berurut sesuai urutan dari objek, sebagai contoh, pada Elemen 0 Objek dimasukan objek si Kotak, maka pada element 0 Info masukan Info Tentang si Kotak.





Tambahkan UI Button ke dalam Panel Pop Up dan atur posisi serta anchor point berada di pojok kanan bawah.

Nantinya button ini digunakan untuk mengembalikan Panel Pop Up ke luar dari canvas.




Masih pada UI Button tadi, lihat jendel inspektor - On ClicK()

1. Klik tombol "+" untuk menambahkan Script ke UI Button
2. Karena script PopUpManager diberikan ke Main Camera, maka masukkan Main Camera ke kotak On Click().




Masih menu On Click().
Klik No Function dan cari nama Script PopUpManager kemudian pilih popUp_OFF().

popUp_OFF(){} adalah sebuah method yang sudah di buat di dalam script PopUpManager, method ini digunakan untuk mengembalikan Panel PopUp ke posisi semua (di luar layar).

Jika sudah, untuk mencobanya harus dibuild ke apk dan install di smart phone masing-masing.





SELESAI


Penjelasan Listing Program :


A. Pendeklarasian.

Using UnityEngine.UI;

Dideklarasikan karena nantinya vcg akan menggunakan komponen UI, yaitu UI Text.

Ray ray;   /   RaycastHit hit;

Ray digunakan untuk membuat sinar laser lurus yang berfungsi untuk mendeteksi objek.
RaycastHit digunakan untuk mendeteksi objek apa yang terkena sinar laser dari Ray.

GameObject canvas;

Mendeklarasikan objek di dalam game dengan varibel canvas.

Animator anim;

Penjelasan Animator sudah dibahas di Animator Menjalankan Animasi di Unity.

public Text textInfo;

Mendeklarasikan UI text yang ada di dalam game.

public GameObject[] objek;

Tanda [] adalah ciri dari variabel Array.
B. Mengakses Komponen

canvas = GameObject.Find("Canvas");

Digunakan untuk mengakses objek canvas yang ada di dalam game dan diakses oleh varibel canvas.

anim = canvas.GetComponent<Animator>();

Karena script PopUpManager diberikan ke objek Main Camera dan vcg ingin mengakses komponen Animator yang ada di objek Canvas, maka digunakan perintah canvas.GetComponent.
C. Proses

Input.touchCount

Perintah yang digunakan untuk Mobile Script, perintah ini bertujuan untuk mendeteksi ada berapa jari yang sedang menyentuh layar HP.

Input.GetTouch(0).phase == Began
Jika jari pertama (0) yang menyentuh itu sedang dalam kondisi 1x tekan (Began) maka apa yang akan dilakukan.

ray = Camera.main ..........................

Posisi awal laser dan tujuan laser ditentutan di script ini, dimana posisi awal adalah dari posisi Main Camera dan Posisi tujuan adalah posisi dimana Jari kita menyentuh layar.

if(Physics.Raycast(ray, out hit, Mathf.Infinity))
Jika laser tadi memiliki panjang yang tak terbatas (Infinity), maka......

if(hit.collider.gameObject == objek[i]

Dan jika laser tersebut terkena objek yang sudah ditentukan oleh jari saat menyentuh layar, maka...

public void popUp_OFF()


void popUp_OFF adalah sebuah method yang dibuat vcg untuk menutup Pop Up dengan menjalankan animasi dari UI Panel.

anim.SetTrigger("Pop Keluar");
Adalah listing program untuk menjalankan animasi UI Panel, "Pop Keluar" adalah nama parameter yang sudah dibuat ketika mengatur hubungan animasi di jendela Animator.





EmoticonEmoticon