How to Make Menu (Button) in Unity 3d …[part 1] –dengan GUI Texture

Tombol menu di Unity 3d engine dapat dibuat dengan beberapa cara yaitu:

  1. Menggunakan  Plugin misalnya EZ-GUI
  2. Menggunakan GUI texture dan mengaplikasikan script untuk tombol sebagai Component dari GUI texture tersebut
  3. Menggunakan class GUI.Button

Dalam tulisan ini saya akan coba menuliskan langkah-langkah pembuatan tombol menu dengan menggunakan GUI texture.
Hal yang perlu disiapkan terlebih dahulu adalah texture atau gambar tombol yang diinginkan. Gambar tombol tersebut dapat dibuat menggunakan software pengolah gambar misalnya Adobe Photoshop.
Format gambar yang akan digunakan sebagai texture dapat berupa .png atau .tiff, tapi berdasarkan pengalaman, format .png kadang-kadang memperlihatkan border putih disekeliling text. Jadi saya memilih menggunakan format .tiff dengan format background gambar transparan.
Setelah texture tersedia, lakukan langkah-langkah berikut:

  1. Import gambar tombol yang sudah anda siapkan sebagai aset dengan cara:

    Klik tombol assets–> import new assets–> pilih file yang akan digunakan –>klik import.

    Dalam contoh ini saya melakukan import sebanyak dua kali karena saya ingin tampilan tombol berubah ketika disorot oleh mouse. Saya menggunakan file menuAwal.tiff dan menuAwal_sorot.tiff. MenuAwal.tiff akan saya gunakan sebagai tampilan tombol pada saat tombol tidak dalam keadaan disorot oleh mouse. Sedangkan menuAwal_sorot.tiff akan digunakan sebagai tampilan tombol ketika tersorot oleh mouse.
    Sesudah klik Import anda perhatikan nama file yang anda import dimunculkan di jendela Project. Sekarang anda sudah mempunyai aset gambar yang akan digunakan sebagai tombol di dalam project anda.

  2. Selanjutnya buat GUI texture menggunakan gambar yang telah anda import dengan cara:

    sorot gambar yang akan digunakan di panel project–> klik gameObject–> create other –> GUI Texture

  3.  GUI texture yang anda buat di scene tersebut belum dapat berfungsi sebagai tombol. Untuk memfungsikan texture sebagai tombol, anda perlu membuat script untuk tombol terlebih dahulu dengan cara

    Klik kanan jendela project –> pilih create –> pilih javascript. Jendela project dan inspector akan memunculkan new behaviour script.

  4. Klik new behaviour script di jendela project, kemudian klik sekali lagi untuk mengubah nama script, ganti dengan nama button.
  5. Edit kode dengan cara klik dua kali script button dari jendela project, masukkan kode:

    var levelToLoad : String;
    var normalTexture : Texture2D;
    var rollOverTexture : Texture2D;
    var beep : AudioClip;

    function OnMouseEnter(){
      guiTexture.texture = rollOverTexture;
    }
    function OnMouseExit(){
      guiTexture.texture = normalTexture;
    }

    function OnMouseUp(){
      audio.PlayOneShot(beep);
      yield new WaitForSeconds(0.35);
      Application.LoadLevel(levelToLoad);
    }

              klik ikon save.

  6. Sorot object GUI texture yang telah dibuat tadi di jendela Hierarchy. Klik Component –> Script –> button. 
  7. Di jendela Inspector akan muncul panel tambahan untuk button script. Di bagian bawah ada default reference (button), berisi variabel-variabel yang telah diisikan di dalam script.
    Level to load –> scene level yang akan ditampilkan ketika tombol di-klik
    normal texture –> teksture pada saat tombol ada dalam kondisi normal
    Roll Over Texture–> teksture pada saat tombol tersorot oleh mouse
    beep –> suara pada saat tombol diklik
    Pada konsisi awal semuanya masih berisi none, karena belum memilih level/tekstur/suara mana yang akan diasosiasikan sebagai variabel-variabel tersebut.
    Untuk memilih, klik ikon bulat kecil yang ada disamping kanan “none” yang ada masing-masing variabel.
  8. Posisikan GUI texture anda. [lihat di cara memposisikan objek-objek GUI]

    Anda juga dapat membuat tombol menggunakan texture dengan cara lain yaitu:

    1. Sesudah melakukan import gambar, buat game object kosong dengan cara:

      klik Game Object –> create empty –> dalam jendela hierachy muncul GameObject baru yang masih kosong. Rename dengan nama misal cobaMenu.

    2. Game Object kosong ini akan digunakan sebagai tombol. Anda perlu mengaplikasikan script tombol ke Game Object kosong tersebut. Gunakan script yang sama dengan diatas dengan cara:

      klik dan seret script button dari jendela project ke cobaMenu di jendela Hierarchy

    3. Klik cobaMenu di jendela Hierarchy, perhatikan di jendela Inspector telah muncul panel tambahan untuk Button(script). Isikan variabel-variabel Level to Load, normal texture, roll over texture dan beep sesuai dengan yang diperlukan.

    4. Atur posisi tombol yang telah anda buat.
    5. Tes dalam tampilan Game View.

      Referensi: Unity Game Development Essentials, Will Goldstone

    1 comment

    1. charcoal pencils July 5, 2015 7:57 am  Reply

      It’s hard to find educated people ffor ths subject, but you seem
      lik you know what you’re talking about! Thanks

    Leave a comment

    Your email address will not be published. Required fields are marked *