Mengenal Komponen Pada User Interface Unity

Pembelajaran lengkap dari pembuatan game menggunakan Unity dapat anda pelajari lebih mendalam di Dicoding Academy Belajar Membangun Game 2D dan 3D dengan Unity :  https://www.dicoding.com/academies/39

Pada artikel kali ini, kami ingin mengenalkan berbagai komponen yang ada pada tampilan user interface (UI) Unity. Bagi yang pertama kali membuka software Unity, tentu akan merasa bingung karena ada banyak sekali window dan tab pada tampilan awal. Tak hanya itu, bahkan bagi yang sudah menggunakan Unity dalam waktu cukup lama pun belum tentu sudah mengenal semua komponen UI yang ada pada Unity. Manfaat dengan mengetahui masing-masing komponen yang ada pada UI Unity akan membantu mempercepat dan mempermudah proses pengerjaan game kita.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

1

Ketika pertama kali membuka Unity dan setup project, akan muncul halaman yang berisikan beberapa window terbuka. Ada lima window utama yang akan menjadi fokus pengenalan kita dan yang akan paling sering kita gunakan ketika mengembangkan game menggunakan Unity. Kelima window tersebut adalah window Scene, Project, Hierarchy, Inspector, dan Game. Secara umum, berikut adalah penjelasan dari masing-masing window :

  • Scene: Window yang digunakan untuk membangun game kita. Di dalamnya kita bisa melihat dan mengatur object di dalam sebuah scene.
  • Project: Window yang berisikan seluruh aset yang digunakan untuk membuat proyek game kita bisa terdiri dari file, script, texture, 3D model, audio clip, dan lain-lain yang juga disimpan di dalam harddrive komputer kita.
  • Hierarchy: Window yang berisi game object atau kumpulan game object yang kita gunakan di dalam scene. Urutan game object bisa kita pindah posisinya dan bisa kita grupkan menjadi parent and child.
  • Inspector: Window yang menampilkan konteks atau keterangan dari object atau aset yang sedang kita pilih. Window ini bisa menampilkan informasi property atau component dari sebuah game object ataupun asset.
  • Game: Window ini digunakan untuk melihat tampilan ketika permainan di jalankan. Di bagian atas, terdapat tombol play, pause, dan set frame by frame yang akan ditampilkan pada window Game.
  •  Toolbar: Toolbar berisikan tombol yang membantu kita mengatur berbagai komponen di dalam permainan.

Scene

Window scene digunakan untuk melihat secara visual game yang kita bangun. Dengan transform tools yang berada pada toolbar Unity, kita bisa melakukan modifikasi kepada Game Object yang kita masukan ke dalam scene.

2

Ada lima tools yang bisa kita gunakan untuk memodifikasi Game Object atau biasa disebut dengan transform tools. Diberi nama transform tools karena komponen Game Object yang akan kita modifikasi adalah komponen transform yang di dalamnya terdapat informasi posisi, rotasi, dan skala/ukuran.

Untuk mengakses masing-masing tools yang ada di atas, kita bisa dengan klik tools yang ingin kita gunakan. Selain itu, terdapat juga shortcut untuk mengakses tools tersebut menggunakan keyboard yakni huruf Q, W, E, R dan T untuk mengakses hand tools, position transform tools, rotation transform tools, scale transform tools, dan rectangle transform tools. Berikut adalah fungsi untuk masing-masing transform tools :

  • Hand tools : Digunakan untuk menggerakan posisi sudut pandang di dalam scene.
  • Position transform tools: Digunakan untuk mengubah komponen posisi sebuah Game Object terhadap sumbu x, y, dan z. Terdapat handle yang bisa membantu kita untuk mengubah posisi terhadap satu sumbu saja misalnya sumbu merah bisa kita drag untuk menggerakan terhadap sumbu x saja atau kita bisa drag icon kotak di antara tiga panah (merah, hijau, dan biru) untuk menggerakan object terhadap komponen x, y, dan z.
    3
  • Rotation transform tools: Digunakan untuk mengubah komponen rotasi pada sebuah Game Object terhadap sumbu x, y, dan z. Sama seperti tools lainnya, terdapat juga ikon sumbu yang akan membantu kita merotasi objek terhadap satu sumbu saja.
    4
  • Scale transform tools: Digunakan untuk mengubah komponen scale/ukuran dari sebuah Game Object terhadap sumbu x, y, dan z. Terdapat juga sumbu bantuan untuk mengubah scale terhadap satu sumbu saja.
    5
  • Rectangle transform tools: Digunakan untuk mengubah komponen dari sudut pandang 2D. Biasanya tools ini akan sangat membantu jika ingin memodifikasi komponen UI dalam game.

Selain toolbars di atas, terdapat juga shortcut seperti tahan alt lalu klik kanan untuk mengubah sudut pandang kita terhadap sebuah object di dalam scene. Masih terkait dengan toolbars, terdapat tombol center dan local. Tombol ini akan mempengaruhi efek dari transformasi yang kita lakukan apabila kita memanipulasi lebih dari satu objek. Contohnya antara center dan lokal mempengaruhi sumbu jika sekumpulan objek diputar. Apakah perputarannya terhadap center dari semua objek atau relatif terhadap posisi pivot masing-masing objek.

Selanjutnya kita akan mencoba mengenali tools yang terdapat di dalam toolbars window scene.

6

  • Shaded: Digunakan untuk mengganti mode tampilan objek-objek di dalam game scene.
  • 2D: Digunakan untuk mengubah perspektif dari 3D menjadi 2D dan sebaliknya.
  • Scene Lighting: Mengatur tampilan pencahayaan pada scene.
  • Audio: Mematikan atau menyalakan audio di dalam scene.
  • Efek: Menampilkan atau menghilangkan efek dari Skybox, Flares, Fog, dan lain-lain di dalam scene.
  • Gizmos: Digunakan untuk memilih objek-objek yang ditampilkan di dalam scene.
  • Search Bar: Digunakan untuk mencari sebuah game object di dalam scene.

Project Window

7

Project window digunakan untuk mengorganisir aset yang kita gunakan. Struktur file yang kita buat di dalam project window akan disimpan dalam struktur yang sama juga di dalam harddisk kita. Di dalam project window, kita bisa memasukan aset yang akan kita gunakan.

Untuk membuat aset baru di dalam sebuah folder pada project window, kita bisa klik tombol Create di bagian atas project window atau bisa klik kanan lalu pilih tulisan Create dan kita bisa pilih akan membuat aset baru dalam bentuk apa. Kita bisa membuat sebuah folder kosong untuk merapikan struktur penyimpanan file, kita bisa membuat sebuah file kode, kita bisa membuat material, dan lain sebagainya.

8

Selain membuat secara manual, kita juga bisa memasukan aset dari sumber eksternal. Kita bisa memasukan aset dengan cara import aset ataupun drag and drop aset dari sumber file nya ke dalam window project secara langsung. Lalu ketika kita ingin menggunakan aset tersebut ke dalam game, kita hanya perlu drag and drop dari project window ke scene window.

Satu hal yang perlu diingat, apabila kita ingin melakukan rename atau merubah struktur folder, lakukan hal tersebut di dalam unity. Jika kita mengubah strukturnya secara manual di harddisk kita, bisa jadi akan ada file yang error.


Hierarchy

Hierarchy berisikan seluruh game object yang ada di dalam di dalam game scene. Jika di dalam project window adalah aset yang ada di dalam harddisk kita, hiearchy berisikan aset yang kita gunakan di dalam scene. Kita bisa memasukan aset dari project window ke hierarchy dengan cara drag and drop atau kita juga bisa create aset menggunakan drop down create yang ada di toolbar hierarchy.

9

Susunan aset yang ditampilkan di dalam heirarchy berdasarkan waktu kemunculannya. Namun kita juga bisa mengubah susunan tersebut seara manual. Lalu jika game objek dihapus dari game scene, maka di dalam hierarchy juga akan hilang.

Kemudan di dalam hierarchy ada konsep parent and child. Kita bisa memasukan sebuah objek menjadi child dari objek lain. Caranya adalah dengan drag and drop game object di hierarchy ke dalam game object lain yang ingin dijadikan parent.

10

Ketika kita melakukan transformasi elemen dari sebuah game object, kalau game object tersebut tidak memiliki parent, maka perubahan akan terjadi relatif terhadap world space. Sedangkan kalau memiliki parent object, transformasi relatif terhadap parent. Lalu apabila kita melakukan transformasi kepada parent object, maka child object juga akan terkena efeknya.


Inspector

11

Window inspector adalah tempat untuk mengubah nilai dari properti dan setting. Window inspector bisa berbeda tampilan dan fungsinya untuk tiap komponen yang berbeda. Inspector bisa menampilkan informasi dari player setting, asset, game object, scene, prefab, dan lain-lain. Jika kita sedang melihat sebuah game object, maka yang ditampilkan oleh inspector adalah komponen yang ada di dalamnya. Pada umumnya bagian atas akan berisikan nama game object yang sedang dilihat beserta beberapa informasi seperti tag dan layer, lalu di bagian bawahnya adalah komponen yang terdapat dalam game object tersebut. Satu hal yang pasti, setiap game object pasti memiliki header dan komponen transform.

12

Pada header dari Inspector, kita bisa melihat ada beberapa icon yang bisa kita ubah nilainya:

  • Icon Button: Dengan gambar berupa ikon bewarna merah, kuning, dan biru, icon button berfungsi untuk mengubah tampilan game object di dalam scene view. Icon ini bermanfaat terutama apabila game object yang kita masukan tidak memiliki representatif visual.
  • Check box: Digunakan untuk mengaktifkan atau non-aktifkan sebuah game object. Jika diceklis, maka semua komponen di dalamnya akan bersifat aktif.
  • Tag: Digunakan untuk menyematkan tag ke dalam suatu game object untuk membantu proses pencarian game object
  • Layer: Digunakan untuk memisahkan layer yang biasanya berpengaruh terhadap aturan yang spesifik semisal layer ground dimana isinya adalah game object yang bisa dipijak dan digunakan untuk melompat.

Dalam inspector, akan terdapat list setiap komponen yang terdapat di dalam game object. Pada window inspector ini kita bisa mengganti value dari berbagai property dari komponen. Property yang kita ubah bisa bermacam-macam bentuknya seperti check box (untuk boolean), numeric text box, drop down menu, dan lain-lain. Kita juga bisa memberikan reference ke game object lain sebagai value dari property yang cara setupnya dengan cara drag and drop game object yang akan dijadikan reference ke dalam value property yang kita inginkan.

Selain itu, terdapat beberapa penggunaan inspector yang cukup membantu kita seperti kita bisa mengubah lebih dari satu value property lebih dari satu game object. Tentunya hal tersebut bisa kita lakukan untuk game object yang memiliki komponen yang sama. Lalu kita juga bisa memilih tampilan inspector menjadi debug mode agar inspector juga menampilkan property yang bersifat private. Kemudian kita juga bisa enable dan disable satu atau lebih komponen dalam satu game object.


Game View

13

Window game view merupakan halaman untuk menampilkan current state dari game ketika dijalankan. Ada tiga opsi yang bisa kita lakukan ketika ingin masuk ke game view yakni play, pause, dan play frame by frame.

Pada Window game view terdapat beberapa tools di toolbar yang bisa membantu kita mengubah bagaimana game kita ditampilkan di layar. Display dropdown menu digunakan untuk memilih kamera yang ada di scene yang akan menampilkan game object di layar. Lalu terdapat dropdown free aspect yang bisa kita gunakan untuk mengubah resolusi dan rasio dari layar game. Menu ini cocok untuk testing game pada tampilan layar yang berbeda semisal untuk android, iphone, atau PC. Kita juga bisa membuat custom resolusi menggunakan menu ini. Lalu ada scale yang berguna untuk zoom in dan zoom out. Maximize on Play digunakan untuk menampilkan window game view secara full screen ketika diplay. Mute audio digunakan untuk mematikan audio di dalam game. Stats berguna untuk menampilkan status dari game, terutama dari sisi resource yang digunakan. Gizmos digunakan untuk memilih dan menampilkan game object tertentu di dalam scene.

Ketika kita masuk ke menu game mode dengan menekan tombol play, kita bisa mengubah value dari property di inspector secara run time. Namun perubahan itu hanya terjadi di play mode saja, ketika kita kembali ke editing mode, value yang kita ubah selama di play mode tidak akan tersimpan. Untuk membantu mengingatkan kita jika sedang masuk ke play mode, tampilan layar Unity akan menjadi lebih gelap apabila sedang masuk ke play mode.


Berikut tadi adalah penjelasan mengenai beberapa window yang akan sering digunakan jika mengembangkan game menggunakan Unity. Semoga penjelasannya bermanfaat dan bisa membantu teman-teman developer untuk mengembangkan karya terbaiknya.

Masih banyak pembahasan menarik di Dicoding Academy Belajar Membangun Game 2D dan 3D dengan Unity yang belum kita bahas di sini, untuk pembahasan lebih jauh silakan kunjungi Academy Belajar Membangun Game 2D dan 3D dengan Unity (https://www.dicoding.com/academies/39). Jika ada pertanyaan, saran atau masukan jangan sungkan untuk menuliskannya di kolom komentar.

Selamat belajar, semoga bermanfaat, dan nantikan tutorial pembuatan game menggunakan Unity selanjutnya.


Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.