main-bab-9.pdf

BAB 9 User Interface 9.1 Tujuan • Mahasiswa dapat membuat graphical user interface (GUI) game pada Unity3D. • Mahasiswa dapat melakukan manipulasi GUI dan menambahkan HUD (Head-up display) pada game yang dirancang. . 9.2 Pengantar Kekuatan utama dalam sebuah game yaitu graphical user interface (GUI) yang interaktif dan menarik. Dengan adanya GUI yang menarik ini, pemain game akan merasa betah dan senang untuk tetap memainkan sebuah game. Selain itu, GUI ini juga akan memberikan informasi apa saja yang bisa dilakukan didalamnya sehingga pemain dapat dengan mudah menjalankan dan mengoperasikan game yang akan dimainkan. Pembuatan user interface game dalam Unity3D dapat dilakukan dengan beberapa cara, antara lain menggunakan script langsung, atau menggunakan properties yang dimiliki Unity. Keduanya sama-sama powerfull, dan akan lebih menguatkan lagi jika memahami keduanya. Beberapa bahasan tentang GUI lebih lanjut dapat ditemukan di internet baik dari dokumentasi manual resminya maupun dari tutorial lain yang ditulis oleh pengguna. Salah satu referensi pada kegiatan praktikum bab 9 ini adalah dari sini. https://www.raywenderlich.com/149464/introduction-to-unity-ui-part-1. 54 BAB 9. USER INTERFACE 9.3 9.3.1 55 Kegiatan Praktikum Kegiatan 1: Membuat GUI Menu Utama 1. Buat project baru dan simpan Scene pertama dengan nama ”MenuScene”. 2. https://www.raywenderlich.com/149464/introduction-to-unity-ui-part-1, adalah tempat mengunduh assets berupa gambar-gambar dan font pendukung. 3. Download assets dan ekstrak file tersebut lalu masukkan/import asset tersebut ke dalam project Unity dengan cara drag and drop ke project window. Dengan demikian assets yang dibutuhkan sudah masuk kedalam project. 4. Hal pertama adalah mengatur background game. Dari menu Game Object, pilih UI → Image → ganti nama Image menjadi img background. (a) (b) (c) Gambar 9.1: Pengaturan UI Canvas 5. Pilih asset gambar ”menu background” yang tadi diimport, perhatikan window inspector, ubah properties tersebut menjadi seperti pada gambar 9.1 (b). 6. Kembali ke window hierarchy dan pilih objek img background tadi, isi Source Image dengan gambar menu background yang baru saja diubah. Selanjutnya tekan tombol Set Native Size untuk mengatur ukuran asli gambar tersebut. Atur juga Pos X dan Pos Y pada posisi 0. 7. Pilih objek Canvas → Perhatikan Canvas Scaler (Sript) pada bagian Inspector window, ubah komponen window dari Constant Pixel Size menjadi Scale With Screen Size dan atur resolusinya menjadi 1136 x 600 seperti yang terlihat pada Gambar 9.1 (c). Dengan demikian, tampilan background akan terlihat full menutupi seluruh layar. 8. Selanjutnya akan kita tambahkan header game berupa gambar, untuk itu buat UI baru dengan cara: Game Object → UI → Image., lalu ubah namanya menjadi img header. → Isi Source Image dengan gambar header label. BAB 9. USER INTERFACE 56 9. Klik Set Native Size → Set Achors ke top-center → Atur posisi Pos X : 0 dan Pos Y : -100. (a) (b) (c) Gambar 9.2: Pengaturan gambar header. 10. Berikutnya adalah menambahkan Start Button, pilih menu Game Object → UI → Button → ubah namanya menjadi Btn start → Set Anchor menjadi bottomstrech → Atur Rect Transform Left dan Right = 350, Height = 80, Pos Y = 300 seperti pada gambar 9.2 (b). 11. Pilih elemen Text dibawah Btn start → Ganti text menjadi ”Start Game” → Ganti font menggunakan TitanOne-Regular → Ubah ukuran fornt menjadi 32 sehingga terlihat lebih besar. 12. Berikutnya mengatur background button, sebelumnya cari asset gambar btn 9slice normal yang bisa ditemukan di project window. Perhatikan bagian inspector window, ubah properties nya menjadi seperti pada gambar 9.2 (c) 13. Klik tombol Sprite Editor, ubah nilai Border menjadi L:14, R:14, B:16, T:16 dan klik apply. 14. Lakukan hal yang sama untuk asset gambar btn 9slice highlighted dan btn 9slice pressed, sprite tersebut akan digunakan untuk membuat perilaku berbeda ketika tombol ditekan dan saat mouse berada diatas button. 15. Kembali ke objek Btn start, atur Source Image : btn 9slice normal, Transition : Sprite Swap dan atur masing-masing komponen untuk Highlighted Sprite dan Pressed Sprite seperti pada gambar 9.3 16. Jalankan game dan perhatikan tombol tersebut saat ditekan maupun mouse berada diatas tombol. BAB 9. USER INTERFACE 57 Gambar 9.3: Pengaturan behavior button 17. Berikutnya lakukan hal yang sama untuk membuat tombol pengaturan dengan ketentuan sebagai berikut : nama: Btn Settings; Rect Transform: Left dan Right : 400, Height : 70 dan Pos Y : 180 Text: Settings; Fontsize: 24 9.3.2 Kegiatan 2: Event Handler 1. Saat membuat button untuk menangani event (event handler ), perlu menentukan fungsi (method) mana yang digunakan untuk memanggilnya. Karena tidak mungkin menggunakan fungsi/method statis, maka perlu membuat method yang bersifat public agar dapat diakses kelas (class) lain. 2. Buat Game object kosong : Game Object → Create Empty → Ubah namanya menjadi UIManager. 3. Tambahkan Script C# baru dengan nama UIManagerScript pada obejk UIManager tersebut yang nantinya akan digunakan untuk melakukan pemanggilan method/fungsi ketika button Start Game diklik maka akan lari ke Scene berikutnya, yaitu play game arena. 4. Buka Script tersebut dan tambahkan using UnityEngine.SceneManagement; di header program atau bagian atas program sebelum nama kelas (class). 5. Buat Scene baru dengan nama GameScene, yang akan digunakan sebagai arena permainan. 6. Tambahkan objek baru berupa plane dan Cube seperti pada kegiatan-kegiatan praktikum sebelumnya. BAB 9. USER INTERFACE 58 7. Supaya dapat dipanggil saat game dijalankan, maka GameScene tersebut perlu ditambahkan ke build & setting, caranya : File → Build & Settings → tekan tombol Add Open Scenes. Atau dengan cara lain, drag and drop GameScene kedalam Scene in Build. 8. Tambahkan Script berikut pada UIManagerScript: 1 2 3 4 ♣✉❜❧✐❝ ✈♦✐❞ JalankanGameScene() { SceneManager.LoadScene("GameScene"); } 9. Kembali ke MenuScene dan pilih tombol Btn start. Perhatikan komponen Button (Script) pada bagian inspector window, tekan tombol plus untuk menambah action seperti pada gambar 9.4 (a). (a) (b) Gambar 9.4: Menambahkan action event handler. 10. Isikan filed None dengan UIManager, Pilih method JalankanGameScene, yaitu fungsi/method yang dibuat sebelumnya seperti pada gambar 9.4 (b). 11. Jalankan game dan tekan tombol Star Game maka akan dilarikan ke GameScene. 9.3.3 Kegiatan 3: Menambahkan HUD 1. HUD atau Head-up Display merupakan user interface suatu game yang memberikan informasi tentang kondisi game saat itu, misalnya skor, health dan komponen lain. HUD ini akan selalu berada pada koordinat yang sama meskipun karakter game bergerak menelusuri seluruh area. 2. Buka GameScene, karena HUD akan dipasang disitu. 3. Pada objek Main Camera, tambahkan Script baru bernama Hud , kemudian buka file tersebut dan tambahkan variabel counter bertipe integer serta nilai awal 0. int counter = 0; BAB 9. USER INTERFACE 59 4. Tambahkan method/fungsi baru bernama OnGUI (perhatikan huruf besar kecilnya karena case sensitive), lalu tambahkan label dengan script: GUI.Label (new Rect (10, 10, 200, 50), "Clicked: "+counter);. Sehingga script menjadi: 1 2 ✈♦✐❞ OnGUI() { GUI.Label (♥❡✇ Rect (10, 10, 200, 50), "Counter: "+counter); 3 } 5. Bagian method/fungsi Update(), tambahkan script berikut: 1 2 3 4 5 6 7 8 ✈♦✐❞ Update() { ✐❢ (Input.GetKeyDown("space")){ print("space key was pressed"); counter = counter + 1; } ✐❢ (Input.GetKey(KeyCode.RightArrow)){ transform.Translate(Vector3.right * Time.deltaTime, Camera.main.transform); print("right arrow ditekan"); 9 10 11 12 13 14 15 16 } ✐❢ (Input.GetKey(KeyCode.LeftArrow)) { transform.Translate(Vector3.left * Time.deltaTime, Camera.main.transform); print("left arrow ditekan"); } } 6. Jalankan game dan jika tombol spasi ditekan, maka nilai counter akan bertambah satu. Sementara jika tombol panah kanan dan kiri ditekan, maka kamera akan bergerak, sedangkan posisi nilai counter akan tetap. 9.4 Tugas 1. Lakukan modifikasi HUD kegiatan 3 agar tampilannya menjadi lebih menarik seperti pada kegiatan 1 dan 2. BAB 9. USER INTERFACE 60 2. Buat beberapa HUD baru untuk menampilkan prperty health atau properti yang lain. 3. Tambahkan tombol stop atau exit GameScene, artinya jika tombol tersebut ditekan maka akan keluar dari GameScene dan kembali ke menu utama (MenuScene). 4. Lakukan eksperimen untuk GUI selain Button dan label, misalnya Box, Text, Toggle, dll.