Cara Pembuatan Scene Dan User Interface Di Unity

     Pada kali ini adalah cara pembuatan scene, kali ini saya mencoba membuatnya dua buah scene yang saya beri nama scene menu dan scene tampilan daftar nama buah. Tahap ini menggabungkan asset-asset seperti background gambar dan gambar lainnya yang akan kita pergunakan yang sebelumnya telah kita import, pembuatan script dan memasukan elemen lainnya agar dapat dijadikan satu dalam satu scene.  

•   Scene Dan User Interface Menu, Daftar Nama Buah, Tentang, Dan Bantuan.

Berikut ini adalah langkah-langkah untuk membuat scene dan user interface menu pada unity:

1.      Klik File à New Scenes untuk membuat scenes baru.

 2.      Masukkan Panel pada UI, klik GameObject à UI à Panel.

 

Gambar 1 Insert Panel

3.   Pilih gambar Assets background menu pada folder background yang telah di import sebelumnya, ubah Texture Type pada Inspector menjadi Sprite (2D and UI) lalu klik Apply.

 Gambar 2 Mengubah Texture Type Background

4.      Drag background menu ke source image yang terdapat pada window Inspector pane.

Gambar 3 Source Image Background Menu

5.      Warna Panel pada Inspector Panel diubah dengan cara klik Color lalu ubah Sliders R=225, G=225, B=225, dan A=225. Agar background terlihat lebih jelas.

Gambar 4 Mengubah Warna Panel

Setelah warna Panel diubah maka tampilan Canvas akan seperti gambar dibawah ini:

 

  Gambar 5 Tampilan Background Menu

6.     Langkah selanjutnya adalah memasukkan button mulai, tentang, bantuan, dan keluar.  Pada menu bar klik GameObject à UI à Button. Lakukan cara tersebut sebanyak empat kali agar menghasilkan empat button.

Gambar 6 Insert Button

7.  Rename setiap button sesuai dengan fungsinya ganti dengan nama mulai, tentang, bantuan, dan keluar. Klik kanan pada setiap button lalu pilih rename. Dan hapus teks yang terdapat pada button tersebut.

Gambar 7 Rename Button

8.      Masukkan source image untuk button yang telah dibuat. Klik button pada Panel, ubah source image pada button dengan mengubah terlebih dahulu gambar button menjadi 2D Sprite. Kemudian kunci button agar button tidak bergerak saat dibuild.

 Gambar 8 Mengganti Tampilan Button

Setelah langkah ini dilakukan maka tampilan awal menu akan tampak seperti gambar di bawah ini:

Gambar 9 Tampilan Menu

9.      Simpan scene dengan cara menekan Ctrl+S dan simpan dengan nama menu. Lakukan hal yang sama pada pembuatan scene Tentang dan Bantuan seperti cara yang teah diuraikan di atas.

• Scene Dan User Interface Daftar Buah

Berikut ini adalah langkah-langkah untuk membuat scene dan user interface daftar buah pada unity:

1.      Klik File à New Scene untuk membuat scene baru.

2.      Masukkan Panel pada UI dengan cara klik GameObject à UI à Panel.

 

  Gambar 10 Insert Panel

3.   Pilih gambar Assets background daftar buah pada folder background yang telah di import sebelumnya, ubah Texture Type pada window Inspector menjadi Sprite (2D and UI) lalu klik Apply.

4.      Drag background daftar buah ke source image yang terdapat pada window Inspector panel.

5.    Warna Panel pada Inspector Panel diubah dengan cara klik Color lalu ubah Sliders R=225, G=225, B=225, dan A=225. Agar background terlihat lebih jelas. Setelah warna Panel diubah maka tampilan Canvas akan seperti gambar dibawah ini:

 Gambar 11 Tampilan Background Daftar  Buah

6.    Langkah selanjutnya adalah memasukkan button durian, jeruk, semangka, melon, lemon, kiwi, pisang, nanas, pir, apel dan kembali.  Pada menu bar klik GameObject à UI à Button. Lakukan cara tersebut sebanyak sebelas kali agar menghasilkan sebelas button.

7.      Rename setiap button sesuai dengan fungsinya ganti dengan nama durian, jeruk, semangka, melon, lemon, kiwi, pisang, nanas, pir, apel dan beranda. Klik kanan pada setiap button lalu pilih rename. Dan hapus teks yang terdapat pada button tersebut.

8.     Masukkan source image untuk button yang telah dibuat. Klik button pada Panel, ubah source image pada button dengan mengubah terlebih dahulu gambar button menjadi 2D Sprite. Kemudian kunci button agar button tidak bergerak saat di build.

 Gambar 12 Tampilan Daftar Buah

9.   Simpan scene dengan cara menekan Ctrl+S pada keyboard lalu simpan dengan nama Daftar buah.