17 BAB IV PEMBAHASAN 4.1. Konsep dan Perancangan Game Seperti yang sudah disampaikan pada bab pendahuluan, game ini dibuat sebagai tempat untuk mendapatkan informasi mengenai Kawasan Kota Lama. Agar informasi yang ada dapat tersampaikan dengan cara yang menarik dan tidak membosankan, maka informasi disampaikan dengan memanfaatkan teknologi virtual reality. Informasi disebar dalam arena permainan dengan gameplay tertentu, baik dengan mengumpulkan benda atau dengan menyusun puzzle. Selama berjalan-jalan, sebuah mini map akan muncul di pojok layar pemain sehingga pemain mengetahui posisi dalam arena. Setelah pemain selesai mengumpulkan benda dan mengerjakan puzzle, pemain dapat menjawab pertanyaan-pertanyaan dalam babak kuis, di mana pemain harus memilih apakah pernyataan yang muncul benar atau salah berdasarkan informasi yang sudah didapat di dalam game. Tahap ini merupakan tahap dimana dijelaskan bagaimana desain gameplay aplikasi dan alur perjalanan permainan game "Jelajah Kota Lama”. Alur tersebut dapat dilihat dalam Gambar 4.1. Diagram Alur Permainan. Gambar 4.1. Diagram Alur Permainan
55
Embed
BAB IV PEMBAHASAN - repository.unika.ac.idrepository.unika.ac.id/19732/5/14.N2.0009 MARIA VANESSA SUNDO… · Permainan utama pada “Jelajah Kota Lama” dilakukan dengan cara berjalan-jalan
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
17
BAB IV PEMBAHASAN
4.1. Konsep dan Perancangan Game
Seperti yang sudah disampaikan pada bab pendahuluan, game ini dibuat
sebagai tempat untuk mendapatkan informasi mengenai Kawasan Kota Lama.
Agar informasi yang ada dapat tersampaikan dengan cara yang menarik dan tidak
membosankan, maka informasi disampaikan dengan memanfaatkan teknologi
virtual reality. Informasi disebar dalam arena permainan dengan gameplay
tertentu, baik dengan mengumpulkan benda atau dengan menyusun puzzle.
Selama berjalan-jalan, sebuah mini map akan muncul di pojok layar pemain
sehingga pemain mengetahui posisi dalam arena. Setelah pemain selesai
mengumpulkan benda dan mengerjakan puzzle, pemain dapat menjawab
pertanyaan-pertanyaan dalam babak kuis, di mana pemain harus memilih apakah
pernyataan yang muncul benar atau salah berdasarkan informasi yang sudah
didapat di dalam game.
Tahap ini merupakan tahap dimana dijelaskan bagaimana desain gameplay
aplikasi dan alur perjalanan permainan game "Jelajah Kota Lama”. Alur tersebut
dapat dilihat dalam Gambar 4.1. Diagram Alur Permainan.
Gambar 4.1. Diagram Alur Permainan
18
Saat pertama kali membuka aplikasi “Jelajah Kota Lama” pemain akan
masuk ke area tutorial untuk belajar bagaimana cara memainkan game Jelajah
Kota Lama. Dalam area ini pemain dapat belajar bagaimana cara berjalan dan
menekan tombol dalam game. Di bawah ini adalah Gambar 4.2. Stage Tutorial.
Gambar 4.2. Stage Tutorial
Jika pemain sudah selesai di area tutorial, pemain dapat berpindah ke area
main menu yang berisi beberapa tombol: Play untuk memulai permainan, Tutorial
untuk kembali masuk ke arena tutorial dan mempelajari dasar-dasar kontrol
permainan, Credits, dan tombol Exit untuk keluar dari aplikasi. Berikut adalah
Gambar 4.3. Main Menu.
19
Gambar 4.3. Main Menu
Permainan utama pada “Jelajah Kota Lama” dilakukan dengan cara
berjalan-jalan di sekeliling area Kota Lama, mengumpulkan benda berupa kristal
dan informasi yang ada di dalamnya. Selain itu, selama menjelajahi Kawasan
Kota Lama pemain dapat menemukan puzzle untuk diselesaikan dan mendapat
tambahan informasi. Berikut adalah Gambar 4.4. Main Arena.
20
Gambar 4.4. Main Arena
Metode input yang digunakan dalam game ini adalah dengan tatapan.
Pemain harus menatap suatu objek selama kurang lebih dua detik untuk memilih
objek tersebut. Metode input ini digunakan dalam tombol-tombol dalam game
juga pada objek-objek kepingan puzzle yang ada di sepanjang area permainan.
21
Dalam game ini terdapat empat puzzle yang mengandung gambar gedung
ikonik di Kota Lama, yaitu Spiegel, Taman Srigunting, Dream Museum Zone, dan
Gereja Blenduk. Setelah puzzle diselesaikan, akan muncul info yang berkaitan
dengan gedung-gedung ikonik tersebut. Tiap puzzle mengandung empat kepingan
yang masing-masing harus dipilih menggunakan metode input tatapan. Setelah
terdengar suara yang menandakan kepingan puzzle sudah terpilih, langkah
selanjutnya adalah memilih tempat yang sekiranya cocok untuk kepingan yang
sudah dipilih sebelumnya, juga dengan tatapan.
Berikut adalah gambar-gambar yang digunakan dalam puzzle seperti yang
dapat dilihat pada Gambar 4.5. Puzzle Spiegel.
Gambar 4.5. Puzzle Spiegel
Di bawah ini adalah Gambar 4.6. Puzzle Taman Srigunting.
22
Gambar 4.6. Puzzle Taman Srigunting
Di bawah ini adalah Gambar 4.7. Puzzle Dream Museum Zone.
Gambar 4.7. Puzzle Dream Museum Zone
Di bawah ini adalah Gambar 4.8. Puzzle Gereja Blenduk.
23
Gambar 4.8. Puzzle Gereja Blenduk
Selain puzzle, ada juga benda yang harus player kumpulkan berupa batu
permata yang tersebar di seluruh area permainan. Area permainan dibagi menjadi
lima bagian. Pemain hanya dapat menjelajahi satu bagian saat pertama kali
memulai, namun bagian baru akan terbuka setelah pemain berhasil
mengumpulkan batu permata dalam jumlah tertentu. Jumlah batu permata yang
tersisa dapat dilihat pada bagian pojok kiri atas layar, dan jumlahnya akan
berkurang sesuai dengan jumlah batu yang sudah diambil. Batu permata juga
memiliki informasi mengenai gedung-gedung Kota Lama. Untuk mengambil batu
permata, pemain hanya perlu berjalan melewati/menabrak batu permata tersebut,
dan informasi akan muncul di bagian yang tersedia di layar bagian atas.
Setelah pemain selesai mengumpulkan benda, pemain dapat masuk ke
babak kuis. Untuk bermain pada babak kuis ini, pemain menentukan apakah
pertanyaan yang muncul adalah pernyataan yang benar atau salah. Jika pemain
menjawab dengan benar, skor pemain akan bertambah. Jika pemain salah
menjawab, maka nyawa pemain akan berkurang. Setelah pemain menjawab,
24
pernyataan baru akan dimunculkan dari daftar array pertanyaan. Jika pemain
sudah menjawab semua pertanyaan yang ada di dalam array, kuis akan berakhir
dan skor akhir pemain akan dimunculkan. Jika nyawa pemain habis sebelum
pemain menjawab semua pertanyaan, maka kuis akan berhenti dan pemain akan
mendapat pesan “game over”.
4.2. Pembuatan Aset Game
Aset game Jelajah Kota Lama berupa model 3D gedung-gedung Kawasan
Kota Lama dibuat dengan menggunakan software SketchUp. Model 3D beberapa
gedung diambil dari 3D warehouse SketchUp, seperti misalnya gedung Jiwasraya,
gedung Marba, gedung Spiegel, dan Gereja Blenduk.
Untuk membuat model, pertama yang harus dilakukan adalah
mengumpulkan data referensi dari gedung-gedung yang ada. Referensi yang dicari
berupa foto, gambar-gambar, juga hasil penelusuran dari Google Street View.
Berikut adalah Gambar 4.9. Gambar referensi dari Google Street View.
Gambar 4.9. Gambar referensi dari Google Street View
25
Setelah data terkumpul, model mulai dibuat dengan SketchUp. Berikut
gambar model 3D yang sedang dalam tahap pembuatan dalam Gambar 4.10.
Pembuatan Model 3D.
Gambar 4.10. Pembuatan Model 3D
Model 3D yang sudah dirasa sesuai kemudian diberi warna agar semakin
nampak mendekati aslinya. Berikut adalah gambar model 3D yang sudah selesai
diberi warna dalam Gambar 4.11. Pewarnaan Model 3D.
Gambar 4.11. Pewarnaan Model 3D
26
Agar bisa diekspor ke dalam Unity, model 3D yang sudah jadi perlu
diekspor dalam format FBX. Beri tanda centang pada bagian “Export two-sided
faces” seperti yang dapat dilihat pada Gambar 4.12. Pengaturan menyimpan
sebagai FBX.
Gambar 4.12. Pengaturan menyimpan sebagai FBX
Pembuatan model-model gedung yang lain menggunakan metode yang
sama dengan yang sudah dilakukan di atas.
4.3. Pengaturan Objek
Model 3D yang sudah jadi kemudian diimport ke dalam Unity. Import
dilakukan dengan melakukan klik kanan pada tab Asset, lalu pilih Import New
Asset.
Setelah diimport, klik prefab tiap model 3D. Akan muncul tab Inspector
dan dalam tab ini, beri tanda centang pada Generate Collider. Hal ini dilakukan
untuk memberi batasan agar pemain tidak bisa berjalan menembus gedung.
27
Langkah tersebut dapat dilihat sebagai berikut dalam Gambar 4.13. Generate
Collider.
Gambar 4.13. Generate Collider
Setelah semua model 3D diimport ke dalam Unity dan diberi collider,
model 3D kemudian diatur dalam Unity sesuai dengan gambar referensi yang
didapat dari Google Map. Referensi tersebut dapat dilihat sebagai berikut dalam
Gambar 4.14. Referensi Google Maps.
28
Gambar 4.14. Referensi Google Maps
Setelah gedung-gedung diatur sesuai dengan referensi yang didapat dari
Google Maps, objek pohon ditambahkan untuk menunjang suasana Kota Lama.
Objek pohon yang digunakan diambil dari Asset Store yang tersedia di Unity. Di
bawah ini adalah Gambar 4.15. Asset Pohon.
Gambar 4.15. Asset Pohon
4.4. Pemrograman Gameplay Game
Pada Tahap ini akan dijelaskan pembuatan script kode pemrograman
gameplay pada permainan.
29
4.4.1. VRAutowalk
Yang harus dilakukan untuk membuat aplikasi virtual reality adalah
melakukan import aset berupa Google Cardboard SDK. SDK ini dapat
diunduh melalui laman https://github.com/googlevr/gvr-unity-sdk. Berikut
tampilan laman unduh SDK dalam Gambar 4.16. Laman unduh GoogleVR
SDK.
Gambar 4.16. Laman unduh GogoleVR SDK
Dalam Unity, hapus Main Camera karena nantinya yang digunakan
adalah kamera dari SDK Google Cardboard. Persiapkan satu game object
kosong dan beri komponen-komponen Google Cardboard di dalamnya.
Setelah itu, beri tag “Player” pada game object untuk memberi
referensi pada script lain bahwa Player merujuk pada objek ini. Berikut
Gambar 4.17. Tag Player.
30
Gambar 4.17. Tag Player
Untuk memberi fungsi berjalan, beri komponen Character Controller
pada objek. Berikan juga komponen Capsule Collider agar pemain tidak
dapat menembus benda seperti yang terlihat pada Gambar 4.18. Capsule
Collider.
Gambar 4.18. Capsule Collider
Di bawah ini adalah pengaturan Character Controller dalam Gambar
4.19. Character Controller.
Gambar 4.19. Character Controller
31
Setelah Character Controller, objek diberi script VRAutowalk seperti
yang dapat dilihat pada Script 4.1. VR Autowalk.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class VRAutowalk : MonoBehaviour { public float speed = 3.0f; public bool moveForward; public float toggleAngle = 30.0f; private CharacterController controller; private Cardboard gvrViewer; private Transform vrHead; void Start () { controller = GetComponent<CharacterController> (); gvrViewer = transform.GetChild (0).GetComponent<Cardboard> (); vrHead = Camera.main.transform; } void Update () { if (vrHead.eulerAngles.x >= toggleAngle && vrHead.eulerAngles.x < 90.0f) { moveForward = true; } else { moveForward = false; } if (moveForward) { Vector3 forward = vrHead.TransformDirection (Vector3.forward); controller.SimpleMove (forward * speed); } } }
Script 4.1. VRAutowalk
4.4.2. Pemrograman Input System
Karena tombol magnet pada perangkat VR sudah digunakan untuk
fungsi berjalan, aplikasi Jelajah Kota Lama membutuhkan metode input
lain. Untuk itu, dibuat script Gaze Interaction yang kemudian dapat
digunakan sebagai metode input dengan cara menatap objek sampai
32
beberapa objek. Script Gaze Interaction dapat dilihat sebagai berikut dalam
Script 4.2. GazeInteraction.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class GazeInteraction : MonoBehaviour { public AudioSource klikSound; public float gazeTime = 2f; public float timer; private bool gazedAt; // Use this for initialization void Start () { klikSound = GetComponent<AudioSource> (); } // Update is called once per frame void Update () { if (gazedAt) { timer += Time.deltaTime; if (timer >= gazeTime) { ExecuteEvents.Execute (gameObject, new PointerEventData (EventSystem.current), ExecuteEvents.pointerDownHandler); timer = 0f; klikSound.Play (); } } } public void PointerEnter(){ gazedAt = true; } public void PointerExit(){ gazedAt = false; } public void PointerDown(){ } }
Script 4.2. GazeInteraction
33
Selain itu, hapus komponen Standalone Input Module pada objek
Event System karena metode input tersebut tidak akan digunakan dalam
aplikasi ini. Sebagai gantinya, tambahkan komponen Gaze Input Module
seperti yang dapat dilihat dalam Gambar 4.20. Gaze Input Module.
Gambar 4.20. Gaze Input Module
Untuk menambah efek suara dapat dilakukan dengan melakukan
import efek suara yang diinginkan kemudian menambahkan komponen
Audio Source pada objek Button yang diinginkan. Pengaturan itu dapat
dilihat sebagai berikut dalam Gambar 4.21. Audio Source.
34
Gambar 4.21. Audio Source
Setelah komponen Audio Source ditambahkan, drag klip suara yang
sudah diimport ke dalam Unity pada kolom AudioClip yang tersedia.
Matikan juga opsi Play On Awake agar efek suara tidak langsung terputar
saat scene dimuat, melainkan menunggu saat klip suara dipanggil melalui
script.
4.4.3. Pembuatan Mini Map
Mini map dibuat dengan cara menambahkan satu kamera tambahan
yang diletakkan di atas player dan akan mengikuti player. Untuk
melakukannya, klik kanan pada kolom Hierarchy, lalu pilih Camera.
Pengaturan letak kamera dapat dilihat pada Gambar 4.22. Pengaturan
kamera mini map.
35
Gambar 4.22. Pengaturan kamera mini map
Setelah pengaturan letak kamera dirasa cocok, pada kamera mini
map ditambahkan komponen script followPlayer seperti yang dapat dilihat
dalam Script 4.3. Follow Player.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class FollowPlayer: MonoBehaviour { public GameObject player; public Vector3 followThis; public int offset; void Update () { followThis = new Vector3 (player.transform.position.x, player.transform.position.y + offset, player.transform.position.z); transform.position = followThis; } }
Script 4.3. Follow Player
36
Setelah menambahkan script, drag objek player VrMain pada kolom
yang sudah disediakan di tab Inspector objek miniMapCamera. Berikut
adalah Gambar 4.23. Memasukkan objek VrMain ke kamera mini map.
Gambar 4.23. Memasukkan objek VrMain ke kamera mini map
Untuk menampilkan gambar yang ditangkap oleh kamera mini map
pada layar, buat prefab Render Texture. Klik kanan pada tab Asset, lalu
pilih Create, kemudian pilih Render Texture. Ganti nama Render Texture
menjadi Minimap.
Setelah itu buka tab Inspector kamera mini map dan drag Render
Texture Minimap pada kolom Target Texture yang tersedia. Berikut adalah
Gambar 4.24. Render Texture miniMap sebagai Target Texture.
37
Gambar 4.24. Render Texture miniMap sebagai Target Texture
Setelah itu, buat objek Canvas sebagai child dari objek Main Camera
VRMain. Hal ini dilakukan agar kanvas akan selalu berada di depan
pemain dan mengikuti arah pandang kamera. Atur ukuran kanvas lalu ubah
Render Mode ke World Space. Berikut adalah Gambar 4.25. World Space
sebagai Render Mode.
Gambar 4.25. World Space sebagai Render Mode
Buat objek Raw Image sebagai child dari objek kanvas, lalu pada tab
Inspector, drag Render Texture Minimap ke kolom Texture yang sudah
disediakan seperti yang dapat dilihat dalam Gambar 4.26. Raw Image
sebagai child miniMapCanvas.
38
Gambar 4.26. Raw Image sebagai Child miniMapCanvas
Berikut adalah Gambar 4.27. Memasukkan Render Texture miniMap
pada Raw Image.
Gambar 4.27. Memasukkan Render Texture miniMap pada Raw Image
Setelah itu, atur ukuran dan letak objek Raw Image pada bagian
kanan atas kamera.
4.4.4. Pembuatan Objek Foto
Foto adalah objek yang harus dikumpulkan pemain untuk membuka
lebih banyak area yang bisa dijelajahi. Objek Foto dibuat dengan
menggunakan 3D object Cube dengan cara klik kanan tab Hierarchy, pilih
3D Object, lalu Cube. Beri tag “Pickup” pada objek untuk menandai obyek
39
sebagai benda yang akan diambil. Berikut adalah Gambar 4.28. Tag
Pickup.
Gambar 4.28. Tag Pickup
Pada tab Inspector, klik pada box IsTrigger. Hal ini dilakukan agar
objek dapat menjadi trigger yang menjalankan fungsi script yang akan
diberikan. Berikut adalah Gambar 4.29. Is Trigger.
Gambar 4.29. Is Trigger
Kemudian pada objek VrMain, beri komponen script PickUpItem.
Script ini ditambahkan untuk mengambil objek Cube setelah collision
dengan objek Cube terjadi dan trigger aktif. Script PickUpItem dapat
dilihat sebagai berikut dalam Script 4.4. PickUpItem
using System.Collections; using System.Collections.Generic; using UnityEngine;
40
using UnityEngine.UI; public class PickUpItem : MonoBehaviour { public int count; public Text countText; public AudioSource pickItem; public GameObject border1; public GameObject border2; public GameObject border2a; public GameObject border3; public GameObject border4a; public GameObject border4b; public GameObject border4c; void Start(){ pickItem = GetComponent<AudioSource> (); count = 15; countText.text = count.ToString (); } void Update(){ if (count == 12) { border1.SetActive (false); } else if (count == 9) { border2.SetActive (false); border2a.SetActive (false); } else if (count == 6) { border3.SetActive (false); } else if (count == 3) { border4a.SetActive (false); border4b.SetActive (false); border4c.SetActive (false); } } void OnTriggerEnter (Collider other){ if (other.gameObject.CompareTag("Pickup")){ pickItem.Play (); other.gameObject.SetActive(false); count--; countText.text = count.ToString(); } } }
Script 4.4. PickUpItem
41
Selain itu, objek juga diberi script dialogTrigger untuk memunculkan
dialog saat objek diambil. Di bawah ini adalah Script 4.5. dialogTrigger.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class dialogTrigger : MonoBehaviour { public Dialog dialog; void OnTriggerEnter(Collider other) { if(other.gameObject.CompareTag("Player")) { FindObjectOfType<DialogManager> ().StartDialogue(dialog); } } }
Script 4.5. dialogTrigger
Melengkapi script dialogTrigger adalah script DialogManager.
Script tersebut dapat dilihat sebagai berikut dalam Script 4.6.
DialogManager.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class DialogManager : MonoBehaviour { public AudioSource typeSound; public Text nameText; public Text dialogText; public float typingSpeed; public float waitTime; public float timer; public bool nextText; private Queue<string> sentences;
42
// Use this for initialization void Start () { typeSound = GetComponent<AudioSource> (); nextText = false; sentences = new Queue<string> (); } // Update is called once per frame void Update () { if (nextText) { timer += Time.deltaTime; if (timer >= waitTime) { DisplayNextSentence (); timer = 0f; } } } public void StartDialogue(Dialog dialog) { nameText.text = dialog.name; sentences.Clear (); foreach (string sentence in dialog.sentences) { sentences.Enqueue (sentence); } DisplayNextSentence (); nextText = true; } public void DisplayNextSentence() { nextText = false; if (sentences.Count == 0) { DialogEnd (); return; } string sentence = sentences.Dequeue (); StartCoroutine (Type (sentence)); nextText = true; } IEnumerator Type(string sentence){ dialogText.text = ""; foreach (char letter in sentence.ToCharArray()) { typeSound.Play (); dialogText.text += letter; yield return new WaitForSeconds(typingSpeed);
Juga sebagai pelengkap adalah script class Dialog. Berikut adalah
Script 4.7. class Dialog.
using System.Collections; using System.Collections.Generic; using UnityEngine; [System.Serializable] public class Dialog { public string name; [TextArea(3,10)] public string[] sentences; }
Script 4.7. class Dialog
Kalimat dalam dialog dapat diisi melalui tab Inspector yang terdapat
pada tiap objek yang telah diberi komponen dialogTrigger. Berikut adalah
contoh isian kalimat dalam Gambar 4.30. Pengaturan Dialog Trigger.
44
Gambar 4.30. Pengaturan Dialog Trigger
4.4.5. Pembagian Babak
Pembagian babak dalam aplikasi ini dilakukan dengan menambah
area yang dapat dijelajahi sesuai dengan jumlah objek foto yang
ditemukan. Untuk itu pertama area dalam game dibagi dalam lima area,
yang kemudian akan dibatasi menggunakan objek Cube. Berikut adalah
Gambar 4.31. Pembagian babak dalam game.
Gambar 4.31. Pembagian babak dalam game
Objek Border ini akan dihancurkan melalui fungsi Update pada
script PickUpItem. Script fungsi Update tersebut dapat dilihat sebagai
berikut dalam Script 4.8. Fungsi Update script PickUpItem.
Kemudian, pada objek VrMain yang sudah diberi script PickUpItem,
drag objek Cube border yang ingin dihancurkan dalam kolom yang
tersedia di tab Inspector. Pengaturan tersebut dapat dilihat pada Gambar
4.32. Pengaturan objek pada script PickUpItem.
Gambar 4.32. Pengaturan objek pada script PickUpItem
4.4.6. Pembuatan Puzzle
Puzzle dibuat dengan logika membandingkan tag objek. Pertama
yang harus dilakukan adalah membuat sebuah game object kosong yang
diberi nama puzzleManager. Objek ini yang akan digunakan sebagai
46
pembanding tag dengan objek puzzle yang lain. Beri tag startingPoint
pada objek sebagai permulaan. Pengaturan tersebut dapat dilihat dalam
Gambar 4.33. Tag startingPoint.
Gambar 4.33. Tag startingPoint
Setelah itu gambar potongan-potongan puzzle yang akan digunakan
disiapkan, lalu import dalam bentuk Sprite. Setelah itu, siapkan objek
Image, lalu drag Sprite potongan puzzle pada kolom Sprite yang tersedia.
Objek Image potongan puzzle ini kemudian diberi nama sesuai dengan
urutan kepingan puzzle objek tersebut. Objek Image potongan puzzle ini
kemudian diberi tag sesuai dengan nomor potongan seperti yang dapat
dilihat dalam Gambar 4.34. Tag Objek Potongan Puzzle.
47
Gambar 4.34. Tag Objek Potongan Puzzle
Objek juga diberi komponen Box Collider 2D agar bisa berinteraksi
dengan Cardboard Reticle. Berikut adalah Gambar 4.35. Box Collider 2D.
Gambar 4.35. Box Collider 2D
Objek kemudian diberi script PuzzleChoosing. Script tersebut dapat
dilihat sebagai berikut pada Script 4.9. puzzleChoosing.
using System.Collections; using System.Collections.Generic;
48
using UnityEngine; public class puzzleChoosing : MonoBehaviour { public AudioSource pushSound; public GameObject obj; public GameObject piece; void Start(){ pushSound = GetComponent<AudioSource> (); } public void Picking (){ pushSound.Play (); obj.tag = piece.tag; Debug.Log ("Picked"); } }
Script 4.9. puzzleChoosing
Setelah diberi script, dalam tab Inspector, drag objek puzzleManager
dan objek potongan Puzzle ke dalam kolom yang telah tersedia.
Pengaturannya dapat dilihat sebagai berikut dalam Gambar 4.36.
Memasukkan objek sesuai script puzzleChoosing.
Gambar 4.36. Memasukkan objek sesuai script puzzleChoosing
Setelah itu beri komponen script Gaze Interaction pada objek untuk
menambahkan metode input. Tambahkan juga komponen Event Trigger
untuk mengatur event yang akan terjadi saat input masuk. Pengaturan pada
Event Trigger dapat dilihat pada Gambar 4.37. Pengaturan Event Trigger
potongan Puzzle.
49
Gambar 4.37. Pengaturan Event Trigger potongan Puzzle
Kemudian siapkan juga objek Button sebagai tempat potongan
puzzle. Setelah itu, beri tag objek sesuai dengan tag potongan puzzle yang
akan menempati tempat tersebut seperti yang dapat dilihat dalam Gambar
4.38. Tag objek tempat potongan puzzle.
Gambar 4.38. Tag objek tempat potongan puzzle
50
Objek kemudian diberi komponen script Puzzle, lalu drag objek
puzzle Manager, objek potongan puzzle, juga objek tempat puzzle pada
tempat yang tersedia di tab Inspector. Berikut adalah Script 4.10. Puzzle.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class Puzzle : MonoBehaviour { public AudioSource pushSound; public GameObject obj; public GameObject place; public GameObject piece; void Start(){ pushSound = GetComponent<AudioSource> (); } public void Matching(){ if(obj.tag == place.tag) { pushSound.Play (); piece.transform.position = place.transform.position; Debug.Log("Match"); Destroy (piece.GetComponent<EventTrigger> ()); obj.tag = "startingPoint"; }else{ Debug.Log("Not Match"); obj.tag = "startingPoint"; } } }
Script 4.10. Puzzle
Berikut adalah Gambar 4.39. Memasukkan objek sesuai script
Puzzle.
Gambar 4.39. Memasukkan objek sesuai script Puzzle
51
Seperti objek potongan puzzle, objek tempat puzzle juga diberi
komponen Gaze Interaction dan Event Trigger. Pengaturan Event Trigger
untuk objek tempat puzzle dapat dilihat pada Gambar 4.40. Pengaturan
Event Trigger tempat potongan Puzzle.
Gambar 4.40. Pengaturan Event Trigger tempat potongan puzzle
Setelah pemain menyelesaikan puzzle, tombol info akan muncul.
Untuk mengecek apakah puzzle sudah diselesaikan dan memunculkan
tombol info, tambahkan komponen script solvePuzzle pada objek
puzzleManager. Di bawah ini adalah Script 4.11. solvePuzzle.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class solvePuzzle : MonoBehaviour { public GameObject p1;
52
public GameObject p1place; public GameObject p2; public GameObject p2place; public GameObject p3; public GameObject p3place; public GameObject p4; public GameObject p4place; public GameObject p5; public GameObject p5place; public GameObject p6; public GameObject p6place; public GameObject p7; public GameObject p7place; public GameObject p8; public GameObject p8place; public GameObject p9; public GameObject p9place; public GameObject p10; public GameObject p10place; public GameObject p11; public GameObject p11place; public GameObject p12; public GameObject p12place; public GameObject p13; public GameObject p13place; public GameObject p14; public GameObject p14place; public GameObject p15; public GameObject p15place; public GameObject p16; public GameObject p16place; public GameObject infoSpiegel; public GameObject infoSrigunting; public GameObject infoDmz; public GameObject infoBlenduk; // Use this for initialization void Start () { infoSpiegel.SetActive (false); infoSrigunting.SetActive(false); infoDmz.SetActive (false); infoBlenduk.SetActive (false); } // Update is called once per frame void Update () { if (p1.transform.position == p1place.transform.position && p2.transform.position == p2place.transform.position && p3.transform.position == p3place.transform.position && p4.transform.position == p4place.transform.position) { infoSpiegel.SetActive (true); } else if (p5.transform.position == p5place.transform.position && p6.transform.position == p6place.transform.position && p7.transform.position == p7place.transform.position && p8.transfor
Kemudian drag masing-masing potongan puzzle dan tempatnya pada
kolom-kolom yang tersedia di tab Inspector objek puzzleManager. Di
bawah ini adalah pengaturan objek tersebut seperti dapat dilihat dalam
Gambar 4.41. Puzzle Manager.
54
Gambar 4.41. Puzzle Manager
4.4.7. Fungsi ShowHide
Fungsi ShowHide digunakan untuk memunculkan dan
menyembunyikan puzzle di dalam game scene. Hal ini dilakukan agar
puzzle hanya terlihat saat pemain ingin menyelesaikannya dan tampilan
map saat pemain melakukan eksplorasi tampak rapi tanpa canvas puzzle
terlihat tersebar.
Untuk membuat fungsi ShowHide, objek UI berupa Button dibuat.
Button inilah yang akan mendapat input sehingga bisa menjalankan fungsi
ShowHide.
55
Setelah itu, pada objek UI yang ingin disembunyikan, beri script
ShowAndHide. Berikut adalah Script 4.12. ShowAndHide.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class ShowAndHide : MonoBehaviour { public GameObject infoObject; private bool show = false; // Use this for initialization void Start () { } // Update is called once per frame void Update () { } public void ShowHide () { if (!show) { infoObject.SetActive (true); show = true; } else { infoObject.SetActive (false); show = false; } } }
Script 4.12. ShowAndHide
Setelah script ditambahkan, drag panel yang ingin disembunyikan
pada kolom yang telah tersedia di tab Inspector seperti yang dapat dilihat
dalam Gambar 4.42. Memasukkan objek yang ingin disembunyikan.
Gambar 4.42. Memasukkan object yang ingin disembunyikan
56
Langkah selanjutnya adalah memasukkkan metode input. Seperti
sebelumnya, input dilakukan dengan cara menambahkan komponen Gaze
Interaction pada objek Button, juga dengan menambahkan komponen
Event Trigger. Pengaturan pada Event Trigger dapat dilihat dalam Gambar
4.43. Pengaturan Event Trigger fungsi ShowHide.
Gambar 4.43. Pengaturan Event Trigger fungsi ShowHide
57
4.5. Main Menu, Tutorial, dan Scene Manager
Berikut adalah script yang digunakan dalam mengoperasikan perpindahan
scene. Di bawah ini adalah Script 4.13. loadingLevel.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; public class loadingLevel : MonoBehaviour { // Use this for initialization public void Play(){ SceneManager.LoadScene ("mainArena"); } public void Tutorial(){ SceneManager.LoadScene ("tutorialArena"); } public void Exit(){ Application.Quit (); } public void mainMenu(){ SceneManager.LoadScene ("mainMenu"); } public void quizStage(){ SceneManager.LoadScene ("quizScene"); } }
Script 4.13. loadingLevel
Script Puzzle Manager yang digunakan dalam tutorial berbeda dengan yang
digunakan dalam permainan utama. Hal ini dikarenakan lebih sedikitnya objek
yang harus diperiksa untuk dapat memunculkan Button berisi info. Perbedaan
tersebut dapat diamati sebagai berikut dalam Script 4.14. tutorialPuzzleManager.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class tutorialPuzzleManager : MonoBehaviour {
58
public GameObject p1; public GameObject p1place; public GameObject p2; public GameObject p2place; public GameObject p3; public GameObject p3place; public GameObject p4; public GameObject p4place; public GameObject infoButton; // Use this for initialization void Start () { infoButton.SetActive (false); } // Update is called once per frame void Update () { if (p1.transform.position == p1place.transform.position && p2.transform.position == p2place.transform.position && p3.transform.position == p3place.transform.position && p4.transform.position == p4place.transform.position) { infoButton.SetActive (true); } } }
Script 4.14. tutorialPuzzleManager
Script PickUp yang digunakan pada tutorial juga berbeda dengan yang
digunakan dalam permainan utama. Perbedaan tersebut dapat dilihat sebagai
berikut pada Script 4.15. tutorialPickUp.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class tutorialPickUp : MonoBehaviour { public AudioSource pickItem; public Text countText; public int count; void Start(){ countText.text = "0"; pickItem = GetComponent<AudioSource> (); } void OnTriggerEnter (Collider other){ if (other.gameObject.CompareTag("Pickup")){ pickItem.Play (); count++;
59
countText.text = count.ToString (); } } }
Script 4.15. tutorialPickUp
4.6. Pembuatan Kuis
Pada babak kuis ini, pemain menentukan apakah pertanyaan yang muncul
adalah pernyataan yang benar atau salah. Jika pemain menjawab dengan benar,
skor pemain akan bertambah. Jika pemain salah menjawab, maka nyawa pemain
akan berkurang. Setelah pemain menjawab, pernyataan baru akan dimunculkan
dari daftar array pertanyaan. Jika pemain sudah menjawab semua pertanyaan
yang ada di dalam array, kuis akan berakhir dan skor akhir pemain akan
dimunculkan. Jika nyawa pemain habis sebelum pemain menjawab semua
pertanyaan, maka kuis akan berhenti dan pemain akan mendapat pesan “game
over”.
Pemrograman untuk babak kuis ini dapat dilihat di bawah ini pada Script
4.16. Script quizManager.
using System.Collections; using System.Collections.Generic; using System.Linq; using UnityEngine; using UnityEngine.UI; using UnityEngine.SceneManagement; public class quizManager : MonoBehaviour { public int skor = 0; public int nyawa = 3; public Text skorText; public Text nyawaText;
60
public GameObject quizCanvas; public GameObject gameOver; public GameObject highScore; public Text highScoreText; public Question[] questions; private static List<Question> unansweredQuestions; private Question currentQuestion; [SerializeField] private Text factText; [SerializeField] private float timeBetweenQuestions = 1f; void Start(){ if (unansweredQuestions == null || unansweredQuestions.Count == 0) { unansweredQuestions = questions.ToList<Question> (); SetCurrentQuestion (); } } void Update(){ if (nyawa == 0) { quizCanvas.SetActive (false); gameOver.SetActive (true); } if (unansweredQuestions.Count == 0) { quizCanvas.SetActive (false); highScore.SetActive (true); highScoreText.text = skor.ToString (); } } void SetCurrentQuestion(){ int randomQuestionIndex = Random.Range (0, unansweredQuestions.Count); currentQuestion = unansweredQuestions [randomQuestionIndex]; factText.text = currentQuestion.fact; } IEnumerator TransitionToNextQuestion(){ unansweredQuestions.Remove (currentQuestion); yield return new WaitForSeconds (timeBetweenQuestions); SetCurrentQuestion ();