Create MainMenu using GUI Button and Texture2D with Hover effect

Hello Patriots !

Pada kesempatan kali ini kita akan belajar membuat Main Menu yang simple menggunakan Button dan Texture2D dengan efek saat hover.

FYI, hover adalah keadaan ketika cursor kita diarahkan ke suatu object.

Scene yang kita gunakan ada 2, yaitu mainmenu dan game. Pada mainmenu kita hanya menggunakan 2 button, yaitu button start yang akan menuju scene game dan button quit untuk keluar dari game.

Teknik

Teknik yang kita lakukan adalah membuat 4 gambar sederhana yang akan kita import ke unity menjadi type texture, lalu kita akan menggunakan gambar putih sebagai button saat keadaan normal dan mengubahnya menjadi gambar hitam saat keadaan hover.

Silahkan copy script full nya.

using UnityEngine;
using System.Collections;

public class GUIManager : MonoBehaviour {

public Texture2D btnStart;
public Texture2D btnQuit;
public Texture2D btnStartReverse;
public Texture2D btnQuitReverse;

void OnGUI()
{
GUIStyle btnStartGuiStyle = new GUIStyle ();
btnStartGuiStyle.hover = new GUIStyleState{ background = btnStartReverse };
btnStartGuiStyle.normal = new GUIStyleState{ background = btnStart };
btnStartGuiStyle.active = new GUIStyleState{ background = btnStart };

GUIStyle btnQuitGuiStyle = new GUIStyle ();
btnQuitGuiStyle.hover = new GUIStyleState{ background = btnQuitReverse };
btnQuitGuiStyle.normal = new GUIStyleState{ background = btnQuit };
btnQuitGuiStyle.active = new GUIStyleState{ background = btnQuit };

if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2-75,100,50), “”, btnStartGuiStyle))
Application.LoadLevel(“game”);
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2-25,100,50), “”, btnQuitGuiStyle))
Application.Quit();
}
}

Langkah :

Buat new project, beri nama apa saja.
Buat 3 folder, yakni Scenes, Scripts, Textures. Langkah ini hanya untuk terlihat rapi saja.
Masukkan 4 gambar sederhana yang telah kita buat ke dalam folder Textures dengan cara drag and drop.
Save Scene kosong ke dalam folder Scenes, beri nama mainmenu.unity dengan cara klik File > Save Scene (Ctrl + S).
Build Settings (Ctrl + Shift + B), lalu klik Add Current agar scene yang sudah kita buat terdaftar pada system.
New Scene (Ctrl + N), tambahkan empty object pada hierarchy, beri nama Text lalu Add Component TextMesh. Beri text “Ini Scene Game”, untuk menandakan kita telah masuk scene game. Sesuaikan Font Sizenya dan pilih Font Arial.
Build Settings (Ctrl + Shift + B), lalu klik Add Current seperti langkah 5.
Kembali ke scene mainmenu dengan cara klik 2x scene mainmenu di folder Scenes.
Tambahkan empty object pada hierarchy, beri nama GUIManager lalu Add Component baru bahasa C#, beri nama GUIManager. Lalu klik 2x script GUIManager.cs untuk mulai coding pada MonoDevelop.
Pada script GUIManager.cs, buat 4 global variable dengan type Texture2D dan akses public. Akses public bertujuan agar kita bisa setting pada unity editor.

public class GUIManager : MonoBehaviour {

public Texture2D btnStart;
public Texture2D btnQuit;
public Texture2D btnStartReverse;
public Texture2D btnQuitReverse;
Hapus function bawaan void Start() dan void Update(), karena kita tidak akan menggunakan function tersebut.
Tambahkan function void OnGUI() { }. Function ini merupakaan function bawaan lain dari unity yang ada di library UnityEngine. Function ini berjalan hanya pada object-object GUI (Graphical User Interface) saja seperti GUI.Button yang akan kita gunakan.
Di dalam function OnGUI(), tambahkan 2 buah GUIStyle untuk button start dan button quit. Ada 3 property yang kita gunakan pada GUIStyle, yaitu hover saat button dalam keadaan hover, normal saat button dalam keadaan biasa dan active saat keadaan diklik (mouse down). Masing-masing property diisi dengan GUIStyleState baru dengan property background yang berbeda berbeda. Property hover diisi dengan background hitam yang kita beri nama btnStartReverse untuk button start dan btnQuitReverse untuk button Quit. Lalu property normal & quit kita isi background yang sama yaitu background putih yang kita beri nama btnStart untuk button start dan btnQuit untuk button quit.

void OnGUI()
{
GUIStyle btnStartGuiStyle = new GUIStyle ();
btnStartGuiStyle.hover = new GUIStyleState{ background = btnStartReverse };
btnStartGuiStyle.normal = new GUIStyleState{ background = btnStart };
btnStartGuiStyle.active = new GUIStyleState{ background = btnStart };

GUIStyle btnQuitGuiStyle = new GUIStyle ();
btnQuitGuiStyle.hover = new GUIStyleState{ background = btnQuitReverse };
btnQuitGuiStyle.normal = new GUIStyleState{ background = btnQuit };
btnQuitGuiStyle.active = new GUIStyleState{ background = btnQuit };
}
Di dalam function OnGUI(), tambahkan 2 GUI.Button yang ke 6 dengan 3 parameter, yaitu Rect position untuk mengatur posisi dan besarnya menggunakan object Rectangle, string text untuk diisi text kosong (karena kita menggunakan full gambar) dan GUIStyle style untuk diisi dengan GUIStyle yang telah kita buat di langkah 13. GUI.Button menggunakan if artinya ketika button tersebut diklik. Lalu rumus width/2-50 untuk membuat button kita di tengah pada bagian horizontal dengan mengambil ukuran lebar layar yang dibagi 2 dikurangi 50 (asalnya dari 100 dibagi 2, karena ukuran lebar button kita 100). Rumus Screen.height/2-75 sama halnya seperti rumus Screen.width/2-50 hanya saja untuk membuat di tengah bagian vertical. -75 untuk button start (posisi atas) dan -25 untuk button quit (posisi bawah). Ketika button start di klik, kita akan menuju scene game dengan code Application.LoadLevel(“game”). Tidak akan menuju scene game apabila belum melakukan build settings seperti langkah 7. Lalu ketika button quit di klik, kita akan keluar dari game dengan code Application.Quit().

if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2-75,100,50), “”, btnStartGuiStyle))
Application.LoadLevel(“game”);
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2-25,100,50), “”, btnQuitGuiStyle))
Application.Quit();
Kembali ke unity, masukkan setiap texture ke dalam variable Texture2D yang telah kita set aksesnya sebagai public pada script GUIManager.cs.
Play !. Tadaaaaa. Anda bisa langsung mencobanya ! Untuk action quit, hanya bisa dilakukan ketika kita sudah mem-build game menjadi .exe pada PC.

Kesimpulan

Selesai sudah tutorial kita kali ini. Dengan membaca tutorial ini, Anda sudah mengetahui bagaimana membuat button yang berfungsi untuk pindah scene dan quit menggunakan Texture2D serta bagaimana mengatur pergantian gambar button saat hover dan active. Anda bisa mengkreasikan gambar button sesuai keinginan Anda.

Semoga bermanfaat !

Index Code