Membuat Generator Tombol Di Unity
Unity adalah game engine yang sangat powerful. Game engine ini menyuguhkan kemampuan untuk membuat game 3D dan 2D. Selain itu kamu juga diberi editor yang sangat nyaman untuk digunakan. Tinggal drag and drop, kasih script sedikit, dan voila! Jadi game. (Err... nggak segampang itu juga sih, tapi you get the idea lah :D)
Selain kemampuannya untuk membuat game itu sendiri, Unity juga memudahkan dalam proses development. Kenapa? Karena kamu bisa menjalankan program yang berjalan di dalam program Unity itu sendiri. Yap, programmer itu malas. Daripada membuat manual lebih baik membuat otomasi, hehe. Supaya lebih kebayang saya akan berbagi caranya dengan tutorial membuat generator tombol di Unity.
Persiapan
Pertama-tama buat project di Unity. Project yang kamu gunakan boleh 2D atau 3D, namun di tutorial ini saya akan menggunakan 2D. Unity akan membuat folder khusus project kamu berdasarkan Location yang sudah kamu berikan.
Kamu akan langsung disuguhi sebuah scene kosong. Scene bisa diibaratkan sebuah dokumen baru. Agar tidak terjadi apa-apa (misalnya tidak sengaja menutup Unity) jangan lupa langsung simpan scene ini dengan menekan ctrl+s. Saya biasanya menaruh Scene di dalam folder bernama Scene agar rapi.
[caption id="" align="aligncenter" width="337"]
Selanjutnya buat tombol dengan menggunakan menu Create/UI/Button di window Hierarchy.
Unity akan membuat GameObject <em>Button</em> di dalam canvas.
Membuat ButtonModel
Agar kita bisa mengakses dan mengubah-ubah tombol yang ada maka kita harus membuat perantara berupa script yang akan mengatur tombol ini. Untuk itu, pilih game object <em>Button yang baru dibuat dan pada tombol Add Component pilih New Script dan buat script baru dengan nama <em>ButtonModel</em>.
Script yang dibuat ini akan langsung ada di folder <em>Assets</em> di window <em>Project kamu. Klik dua kali script tersebut untuk mengeditnya. Masukkan script berikut di dalamnya:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ButtonModel : MonoBehaviour {
public Text ButtonText;
public void SetButtonText (string text) {
ButtonText.text = text;
}
}
Script tersebut intinya hanya untuk mengubah teks tombol yang kita buat menggunakan method <em>SetButtonText. Method ini dibuat public agar bisa diakses oleh kelas yang melakukan generate tombol nantinya
Bila kamu kembali ke editor, Unity akan mengcompile script yang telah dibuat (tandanya ada indikator berputar di kanan bawah) dan tombol kamu akan memiliki komponen dengan properti ButtonText di dalamnya. Nah sekarang isi properti tersebut dengan drag GameObject <em>Text</em> yang berada di bawah hierarki Button.
[caption id="" align="aligncenter" width="700"]
Tombol kamu sudah jadi. Kamu bisa bebas mengaturnya. Misalnya saya membuatnya lebih lebar sedikit.
Membuat Prefab Tombol
Tombol kamu sudah selesai. Agar bisa digunakan berulang-ulang maka kita perlu membuat Prefab. Prefab (singkatan dari Prefabrication) adalah komponen yang di simpan agar bisa digunakan kembali.
Untuk membuat prefab pertama-tama buat folder Prefab di folder Assets project kamu. Sebenarnya kamu tidak harus membuat folder ini, hal ini dilakukan hanya agar lebih rapi
[caption id="" align="aligncenter" width="270"]
Selanjutnya drag tombol yang telah dibuat dari window Hierarchy ke folder Prefab pada window Project.
[caption id="" align="aligncenter" width="592"]
textnya saja, tapi Button nya.[/caption]
Di folder tersebut akan ada sebuah GameObject baru berupa kotak warna biru dengan nama Button. Itulah prefab dari Button kamu. Tulisan Button di Scene akan berubah menjadi warna biru yang artinya Button tersebut sudah menjadi prefab. Kamu bisa menghapus button yang ada di scene karena kita hanya membutuhkan Prefab nya.
[caption id="" align="aligncenter" width="106"]
Membuat Generator
Akhirnya, setelah kita punya tombol yang akan di-generate, sekarang kita akan membuat generatornya. Yay!
Pertama-tama, buat dulu GameObject baru di canvas (klik kanan Canvas di Hierarchy, pilih Create Empty). Kemudian beri GameObject tersebut script baru dengan nama <em>ButtonGenerator</em>. Game object dengan script ini yang akan membantu proses generate.
[caption id="" align="aligncenter" width="519"]
Selanjutnya beri script ini di dalam ButtonGenerator
using UnityEngine;
using System.Collections;
[ExecuteInEditMode]
public class ButtonGenerator : MonoBehaviour {
public GameObject OriginalPrefab;
public int Row;
public int Col;
public float ButtonWidth;
public float ButtonHeight;
public bool Generate;
void Update () {
if (Generate) {
Generate = false;
GenerateButtons ();
}
}
private void GenerateButtons()
{
for (int i = 0; i < Row; i++) {
for (int j = 0; j < Col; j++) {
GameObject g = Instantiate (OriginalPrefab) as GameObject;
g.transform.parent = this.transform;
g.transform.localScale = this.transform.localScale;
// set posisi tombol
g.transform.position =
new Vector2 (
j * ButtonWidth,
i * ButtonHeight
);
}
}
}
}
Jika kamu kembali ke scene maka GameObject yang baru dibuat tadi akan memiliki component script ButtonGenerator dengan banyak property, salah satunya adalah <em>OriginalPrefab. Nah, di property ini masukkan prefab <em>Button</em> yang telah kita buat.
[caption id="" align="aligncenter" width="700"]
Original Prefab[/caption]
Coba isi properti row, col, width, dan height dan kemudian tekan tombol Generate. Tombol akan digenerate sebanyak yang kamu minta.
[caption id="" align="alignnone" width="367"]
[caption id="" align="alignnone" width="700"]
Horee. Agar posisinya pas kamu bisa mengatur property Button Width dan Button Height dari Button Generator.
Tapi tunggu, tombol yang dibuat masih memiliki teks bertuliskan "Button". Nah, agar bisa diotomasi tulisannya kita bisa memanggil method yang sudah kita buat sebelumnya di ButtonModel sebelumnya.
Untuk melakukan hal tersebut, di script ButtonGenerator edit methode GenerateButtons menjadi seperti ini:
private void GenerateButtons()
{
for (int i = 0; i < Row; i++) {
for (int j = 0; j < Col; j++) {
GameObject g = Instantiate (OriginalPrefab) as GameObject;
g.transform.parent = this.transform;
g.transform.localScale = this.transform.localScale;
// set posisi tombol
g.transform.position =
new Vector2 (
j * ButtonWidth,
i * ButtonHeight
);
ButtonModel buttonModel = g.GetComponent ();
buttonModel.SetButtonText ("tombol " + i + "," + j);
}
}
}
Bisa kamu perhatikan di script tersebut ada variabel buttonModel yang mengambil component ButtonModel dari prefab dan kemudian memanggil SetButtonText untuk mengubah tulisan teks yang ada dalam tombol. Untuk mencobanya hapus tombol yang sudah di generate sebelumnya dan klik lagi checkbox <em>Generate</em> di ButtonGenerator.
[caption id="" align="aligncenter" width="700"]
That's it!
Tutorial ini hanya kulit luar untuk mempermudah pembuatan game. Masih banyak yang bisa kamu eksplorasi untuk membuat tools kamu sendiri. Misalnya kamu bisa membuat tombol untuk permainan mengingat kartu yang dibalik, atau membuat tombol untuk memilih warna, dan lain sebagainya.
Semoga tutorial ini membantu kamu dalam menggunakan Unity. Sampai jumpa di tutorial selanjutnya!
Tags:
What do you think?
Reactions