Tutorial Unity - Membuat Game Lengkap (Part 2)

Halo teman-teman? Apa kabar? Ketemu lagi dengan juragan kancil yang kali ini akan meneruskan materi soal bikin game lengkap. Tutorial kali ini adalah kelanjutan dari postingan sebelumnya, bisa lihat di sini: Tutorial Part 1. Kita akan membuat sebuah game menu yang tampilannya kurang lebih kayak gini nih:

Langkah pertama adalah buka project baru, atau buka aja project SplashScreen yang sebelumnya.

Masukin sebuah gambar buat background game (apa aja bebas), tinggal tarik doang dari explorer, dan JANGAN LUPA atur texture typenya jadi Sprite (2D and UI)

 

Habis gitu, bikin komponen image dengan klik menu GameObject > UI > Image

Tarik tuh texturenya ke Image sampai jadi kayak gini nih. Bingung? Pake mouse, klik, tariiiiik itu texture dari panel Asset. Kemana? Ya kemana aja terserah pokoknya hasilnya mesti kayak gini!

Habis gitu tambahin button dengan klik menu GameObject > UI > Button

Ganti teksnya dengan "Mulai". Klik aja tanda panah di GameObject Button di Hierarchy dan ganti isi Text-nya.

Tambahin tombol yang kedua, tapi tulisannya "Keluar".

Secara default, button UI ini efeknya transisi warna, kalo nggak percaya coba aja di Play. Tapi dalam tutorial ini kita penginnya adalah perubahan size. Jadi pilih Button Mulai dan ganti pilihan Transitionnya jadi Animation, terus klik Auto Generate Animation. Bakalan ada dialog untuk nge-save sebuah controller, klik Yes aja.

Dobel klik si Animation Controller dan harusnya di Window Animator sudah dibikinin state animasi kayak begini.

Langkah selanjutnya adalah kita coba bikin animasi size pada button, tapi kita perlu tampilin Window Animation. Caranya klik Window > Animation.

Klik tombol Mulai dan pilih Highlighted pada pilihan state. Artinya, kita akan bikin "suatu animasi" pada saat mouse ngehover tombol. Apa itu hover? Pikir aja sendiri ya.

Klik tombol merah untuk mulai nge-record animasi baru, atau klik Insert Keyframe, sama aja. Perhatikan kalau sekarang tombol Play Unity berubah jadi merah. Ini namanya lagi mode ngerecord, jangan sembarangan klik dan ganti-ganti posisi ya, karena semuanya akan terpengaruh.

Di keyframe satu ini, kita ganti ukuran tombol. Bisa di drag, atau cukup masukin angka-angkanya aja di panel Transform

Udah gitu doang. Sekarang coba kita tes Play. Hasilnya adalah, tombol Mulai harus berubah menjadi lebih besar pada saat dideketin sama mouse. Kalau gagal cek lagi dari awal ya

Langkah selanjutnya adalah bikin script C#. Terserah namanya apa.

Ketikan script berikut:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class GameMenu : MonoBehaviour {  
4:       public string Scene1;  
5:       // Use this for initialization  
6:       void Start () {  
7:       }  
8:       // Update is called once per frame  
9:       void Update () {  
10:       }  
11:       public void Mulai () {  
12:            Application.LoadLevel(Scene1);  
13:       }  
14:       public void Keluar () {  
15:            Application.Quit();  
16:       }  
17:  }  

Tarik script tadi ke Button. Masukin nama Scene yang akan dituju di Scene 1 misal: "Level 1" (Level 1 ini adalah scene yang akan diload, yang isinya adalah gamenya. Gimana bikin Levelnya bakalan ada di tutorial selanjutnya, mudah-mudahan) Terus di Event OnClick klik +, dan masukin Button yang tadi dipasang script dan pilih functionnya, dalam hal ini Mulai().

Selesai! Coba kita tes play! Ta-daaa.... Eh? Kok gini?

Oh, masih ada yang salah di designnya. Ingat! Mulai Unity 4.6, component UI sangat bergantung pada Anchor untuk merapihkan tampilan. Jadi cek dengan benar posisi Anchornya ya.

Supaya backgroundnya jadi Fullscreen, pake Strecth yang kanan bawah. Untuk tombol yang rata kanan bisa pake yang Right doang alignnya.

That's it! Selesai. Oh ya, lakukan hal yang sama untuk button Keluar.  Mulai dari animasi on highlightnya dan pemasangan script Keluar()

Entah kenapa saya ada feeling 90% dari agan-agan semua bakal mengalami sedikit kesulitan melakukannya. Kenapa? Kan caranya sama persis? Memang sih. Tapi ya... coba aja sendiri, hahaha.

Catatan Si Kancil: Butuh waktu lebih dari 10 detik untuk menghasilkan postingan ini, tapi cuma butuh waktu kurang dari 10 detik untuk nge-Like Kiky Si Kancil. 

Kiky Si Kancil? Gokil!