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. Screen Shot 2016-03-07 at 11.16.28 PM

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"] Screen Shot 2016-03-07 at 11.23.56 PM

Jangan lupa untuk menyimpan scene[/caption] Selanjutnya buat tombol dengan menggunakan menu Create/UI/Button di window Hierarchy. Screen Shot 2016-03-07 at 11.19.04 PM

Unity akan membuat GameObject `Button` di dalam canvas. Screen Shot 2016-03-07 at 11.19.29 PM

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 `Button` yang baru dibuat dan pada tombol `Add Component` pilih `New Script` dan buat script baru dengan nama `ButtonModel`. Script yang dibuat ini akan langsung ada di folder `Assets` di window `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 `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 `Text` yang berada di bawah hierarki `Button`. [caption id="" align="aligncenter" width="700"] Screen Shot 2016-03-07 at 11.23.28 PM

Drag instance Text ke dalam properti ButtonModel[/caption] Tombol kamu sudah jadi. Kamu bisa bebas mengaturnya. Misalnya saya membuatnya lebih lebar sedikit. Screen Shot 2016-03-07 at 11.56.20 PM

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"] Screen Shot 2016-03-07 at 11.58.07 PM

folder Prefab[/caption] Selanjutnya drag tombol yang telah dibuat dari window Hierarchy ke folder Prefab pada window Project. [caption id="" align="aligncenter" width="592"] Screen Shot 2016-03-07 at 11.53.57 PM

Drag tombol yang sudah dibuat. Bukan `text`nya 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"] Screen Shot 2016-03-07 at 11.24.21 PM

Button yang sudah menjadi prefab[/caption]

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 `ButtonGenerator`. Game object dengan script ini yang akan membantu proses generate. [caption id="" align="aligncenter" width="519"] Screen Shot 2016-03-07 at 11.24.40 PM

Script Button Generator di GameObject baru[/caption] 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 `OriginalPrefab`. Nah, di property ini masukkan prefab `Button` yang telah kita buat. [caption id="" align="aligncenter" width="700"] Screen Shot 2016-03-07 at 11.28.50 PM

Drag prefab button ke dalam kolom properti `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"] Screen Shot 2016-03-07 at 11.32.01 PM

contoh isi property[/caption] [caption id="" align="alignnone" width="700"] Screen Shot 2016-03-07 at 11.32.04 PM

Hasil generate[/caption] 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 `Generate` di ButtonGenerator. [caption id="" align="aligncenter" width="700"] Screen Shot 2016-03-07 at 11.33.35 PM

Tombol memiliki tulisan berbeda-beda yang diatur menggunakan script[/caption]

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!

Explore Roles

Explore Generative AI

Explore Cybersecurity

Explore Technologies

Explore Skill Assessments

KelasFullstack

RuangAI

JagoanSiber

Coding Playground

Membuat Generator Tombol Di Unity

Baca Artikel Lainnya

Membuat Generator Tombol Di Unity