Membuat Game Virtual Reality untuk Android Menggunakan Google Cardboard SDK For Unity

Kali ini saya ingin membahas topik cara membuat game virtual reality untuk Android dengan menggunakan Google Cardboard SDK For Unity. Dengan memanfaatkan game engine Unity dan juga SDK yang sudah disediakan oleh Google, kita dapat membuat game virtual reality memanfaatkan Google Cardboard.

Dalam tutorial kali ini, fokus dari artikel ini adalah cara untuk mengimplementasikan Google Cardboard SDK ke dalam Unity Engine dan juga mengeksplorasi sample game project yang disediakan oleh Google untuk memberikan kita gambaran mengenai virtual reality menggunakan Unity. Saya tidak akan membahas dalam tentang Unity atau cara membuat game. Jika ingin belajar mengenai pembuatan game menggunakan Unity, Anda bisa mengikuti kelas Dicoding Academy secara cuma-cuma di tautan berikut ini.

Persiapan

Sebelum memulai tutorial ini, ada beberapa hal yang perlu Anda unduh terlebih dahulu:

• Unity Engine
• Google Cardboard SDK
• Sample Project Google Cardboard
• Google SDK

Sedikit informasi saja, jika Anda sudah punya Unity Engine di komputer Anda, pastikan Anda menggunakan Unity versi 5. Jika Anda menggunakan Unity versi 4, pastikan Unity yang Anda gunakan adalah yang versi Pro.

Sedangkan untuk mencoba game virtual reality yang kita buat, Anda dapat menggunakan smartphone Android apapun dengan bantuan Google Cardboard. Adapun untuk mencicipi pengalaman virtual reality yang optimal, Anda bisa menggunakan smartphone yang memang dirancang khusus untuk virtual reality, salah satunya seperti Lenovo K4 Note.

[caption id="attachment_8236" align="aligncenter" width="450"] Lenovo K4 Note dengan Theater Max[/caption]

Integrasi Unity dengan Google Cardboard SDK

Selanjutnya saya akan menjelaskan tahapan integrasi antara Unity dengan Google Cardboard SDK. Hal utama yang perlu diintegrasi adalah Stereoscopic Camera. Stereoscopic Camera merupakan sistem pada kamera di dalam game kita yang dibagi menjadi kamera kanan dan kamera kiri agar dapat terbaca oleh Cardboard dengan baik.

Tahapan pertama adalah setup package Google Cardboard SDK. Yang perlu kita lakukan adalah sebagai berikut:

1. Buka project baru Unity. Pastikan kita memilih 3D sebelum membuat project baru.
2. Import package Google Cardboard SDK For Unity. Klik Assets -> Import Package -> Custom Package, lalu pilih file CardboardSDKForUnity.unitypackage

Tahapan kedua adalah setup kamera di dalam game kita menjadi Stereoscopic Camera. Ada beberapa cara untuk melakukan hal ini. Yang paling mudah adalah dengan menggunakan prefab yang sudah disediakan di dalam Google Cardboard SDK. Caranya adalah sebagai berikut:

1. Hapus Main Camera yang ada di dalam hierarchy dengan cara klik kanan "Main Camera" -> Delete
2. Masukan prefab yang bernama CardboardMain ke dalam herarchy dengan cara klik di tab project Assets -> Cardboard -> Prefabs, lalu drag file CardboardMain ke dalam hierarchy.
3. Untuk memastikan kamera di dalam game kita sudah Stereoscopic Camera, kita bisa menekan tombol Play dan melihat di dalam tab Game layar kita sudah terbagi dua.

Setelah memasukan prefab CardboardMain ke dalam tab hierarchy, secara umum fungsi deteksi gyroscope sudah terpasang di dalam game kita sehingga game yang kita buat sudah compatible dengan Google Cardboard. Selanjutnya kita tinggal menambahkan komponen di dalam scene untuk membuat game yang kita buat lebih menarik.

Implementasi Input Pada Google Cardboard

Dengan tahapan yang sudah kita lakukan, game kita masih terasa kurang lengkap. Pemain yang menggunakan aplikasi yang kita kembangkan sejauh ini hanya bisa melihat objek di dalam dunia game saja. Mungkin jika kita ingin membuat game yang sifatnya eksplorasi saja, kita hanya perlu menambahkan fungsi maju sesuai dengan arah kamera memandang.

Untuk menambah pengalaman bermain yang lebih seru, kita perlu menambahkan interaktivitas di dalam game seperti input. Produk virtual reality seperti Oculus dan HTC Vive memiliki perangkat tambahan yang bisa digunakan sebagai input. Namun dalam Google Cardboard, kita tidak bisa menggunakan alat tambahan. Ada dua metode input yang bisa kita gunakan. Yang pertama adalah dengan menyentuh layar dan yang kedua dengan menggunakan magnet.

Selanjutnya kita akan membahas bagaimana memberikan input dalam mode virtual reality dimana kita menggunakan Stereoscopic Camera. Trigger yang diberikan oleh pengguna adalah dengan cara menekan layar atau dengan menekan magnet yang ada di Google Cardboard yang mereka gunakan.

1. Buat UI Canvas dengan cara klik kanan di tab hiearchy, klik UI -> Button. Setelah itu maka akan muncul Game Object baru berupa Canvas dan EventSystem
2. Klik Canvas lalu pada tab Inspector, ganti Render Mode menjadi World Space dan isi Event Camera dengan Main Camera di dalam CardboardMain. Kemudian posisikan Button di dalam Scene sehingga berada dalam jarak pandang Main Camera kita.
3. Yang ingin kita lakukan adalah jika mata pemain mengarah ke suatu objek, maka objek tersebut akan menjadi aktif berinteraksi. Dimana jika pemain memberi input, objek tersebut akan memberikan aksi. Caranya adalah kita berikan script GazeInputModule ke dalam EventSystem.

Di tab Project, klik Assets -> Cardboard -> Script, lalu drag GazeInputModule ke dalam GameObject EventSystem di tab Hierarchy. Pastikan komponen GazeInputModule berada paling atas agar menjadi prioritas ketika program dijalankan.

Dengan mengimplementasikan GazeInputModule, maka ketika kamera mengarah ke objek button lalu kita klik mouse kita sebagai representasi input dari user, objek button akan mendapatkan trigger dan bisa memberikan aksi.

Jika Anda ingin berinteraksi dengan objek 3D di dalam scene, Anda bisa menggunakan komponen PhysicsRaycaster ke dalam Event Camera. Kita juga harus menyiapkan script respon dari interaksi tersebut, bisa menggunakan EventTrigger. Dan yang tidak kalah penting, objek 3D tersebut harus kita beri collider.

Eksplorasi Sample Project Google Cardboard

Dengan mengintegrasikan Google Cardboard SDK kita bisa mengimplementasikan Stereoscopic Camera dan 3D UI ke dalam game virtual reality yang ingin kita kembangkan. Dua modal tersebut sudah cukup untuk selanjutnya kita berkreasi dan berinovasi mengembangkan game yang menarik.

Untuk referensi, kita bisa menggunakan sample project milik Google. Yang pertama adalah kita perlu import package yang berisi sample project yang sudah kita unduh sebelumnya.

1. Cara untuk import package adalah klik Assets -> Import Package -> Custom Package, lalu pilih file CardboardDemoForUnity.unitypackage. Jika prosesnya telah selesai, kita akan melihat ada folder baru di dalam tab Project.
2. Selanjutnya kita hanya perlu membuka Scene demo yang diberikan dengan cara di Tab Project klik Assets -> Cardboard -> DemoScene -> double klik file DemoScene. Maka kita akan dialihkan menuju scene baru yang berisi demo project dari Cardboard.
3. Kita bisa mencoba memainkan sample project dari Cardboard ini dengan cara menekan alt + gerakan mouse untuk menggerakan kamera seolah-olah kepala kita bergerak. Lalu jika mata kita melihat objek berupa kubus, kita bisa klik kiri pada mouse kita yang merepresentasikan trigger yang diberikan oleh pemain menggunakan Cardboard mereka. Jika objek di klik, maka akan berpindah posisi dan tugas kita adalah menemukan posisi baru dari kubus tersebut dan memberikan input ketika melihat objek tersebut di layar.
4. Di dalam game ini, Anda bisa berinteraksi dengan sebuah objek 3D berupa kubus. Anda bisa perhatikan di dalam tab Hierarchy -> CardboardMain -> Head -> Main Camera, pada tab Inspector terdapat komponen PhysicsRaycaster. Komponen tersebut yang memungkinkan pemain berinteraksi tidak hanya dengan UI Canvas, tapi juga dengan objek di dalam game.
5. Untuk mempermudah interaksi dengan user, dalam sample project ini terdapat best practice yang sangat baik yakni visual cue terhadap objek yang masuk dalam jarak pandang. Kita diberikan lingkaran yang menunjukan titik fokus pandangan kita. Ketika titik fokus tersebut masuk ke dalam objek, maka objek yang berada dalam jarak pandang yang terbaca oleh script GazeInputModule memberikan feedback.

Untuk objek lingkaran pada kamera, ketika bertemu dengan kubus maka akan berubah ukurannya.

public void OnGazeStart(Camera camera, GameObject targetObject, Vector3 intersectionPosition)
{
      SetGazeTarget(intersectionPosition);
}
/// Called every frame the user is still looking at a valid GameObject. This
/// can be a 3D or UI element.
///
/// The camera is the event camera, the target is the object the user is
/// looking at, and the intersectionPosition is the intersection point of the
/// ray sent from the camera on the object.
public void OnGazeStay(Camera camera, GameObject targetObject, Vector3 intersectionPosition)
{
      SetGazeTarget(intersectionPosition);
}
/// Called when the user's look no longer intersects an object previously
/// intersected with a ray projected from the camera.
/// This is also called just before OnGazeDisabled and may have have any of
/// the values set as null.
///
/// The camera is the event camera and the target is the object the user
/// previously looked at.
public void OnGazeExit(Camera camera, GameObject targetObject)
{
      reticleDistanceInMeters = kReticleDistanceMax;
      reticleInnerAngle = kReticleMinInnerAngle;
      reticleOuterAngle = kReticleMinOuterAngle;
}

Untuk objek kubus, ketika bertemu dengan fokus mata kita maka akan berubah warnanya.

public void SetGazedAt(bool gazedAt)
{
      GetComponent<Renderer>().material.color = gazedAt ? Color.green : Color.red;
}

Export Installer APK

Jika Anda telah selesai membuat game yang Anda inginkan, tahap selanjutnya adalah membuat file installer dalam bentuk APK. File ini nantinya dapat Anda gunakan untuk melakukan instalasi di perangkat berbasis Android atau dapat dimasukan ke Google Play Store.

1. Unduh file Google SDK di tautan yang sudah diberikan di atas. Sesuaikan dengan sistem operasi yang Anda gunakan.
2. Di dalam Unit, klik File -> Build Setting
3. Setelah itu akan muncul halaman baru. Kita klik logo Android lalu klik Switch Platform.
4. Lalu kita klik Player Settings lalu lihat halaman tab Inspector di sisi kanan. Pastikan Anda mengganti Bundle Identifier dengan nama buatan Anda sendiri agar program berhasil di-export. Anda juga bisa mengatur orientasi layar agar dalam posisi Landscape Left melalui tab Inspector dari Player Setting ini.
5. Setelah itu Anda bisa memasukan Scene ke dalam tab Scenes In Build dalam menu Build Setting. Scene tersebut yang akan dibuat menjadi APK. Jika Anda membuat lebih dari satu, pastikan semua Scene sudah Anda masukan dengan cara drag and drop ke kotak Scenes In Build.
6. Jika semua setting telah selesai, Anda bisa klik tombol Build. Anda diminta memasukan nama APK Anda. Lalu di tengah proses build, Unity akan meminta Google SDK. Anda bisa mengarahkan Windows Explorer atau Finder ke destinasi dimana Google SDK yang sudah Anda download berada. Anda juga akan diminta untuk meng-update SDK tersebut di awal. Jika proses ini telah selesai, maka Anda akan mendaptkan file dalam bentuk APK yang siap digunakan.

Untuk tutorial lebih detil tentang cara membuat file APK di Unity, Anda bisa mengikuti kelas Dicoding Academy tentang Pengembangan Game Menggunakan Unity.

Penutup

Dengan tutorial ini, Anda sudah dapat mengimplementasikan fungsi utama dari Cardboard yakni membuat Stereoscopic Camera dan berinteraksi dengan objek di dalam game. Contoh proyek yang diberikan oleh Cardboard juga sudah lebih dari cukup sebagai modal untuk mengembangkan kreativitas Anda dalam membuat game yang menarik.

Yang perlu diperhatikan adalah selalu track head di dalam permainan yang kita kembangkan, lalu juga kita perlu menjaga agar FPS stabil di angka 60 mengingat layar handphone akan selalu berada di depan mata pemain, dan hindari akselerasi karena dapat memberikan efek negatif pada penggunaan Cardboard. Jangan lupa untuk menjaga interaktivitas di dalam permainan agar game menjadi lebih menarik dan memastikan visual cue dapat dimengerti oleh user dengan baik.

Buat Anda yang sudah menguasai materi dan menyukai tantangan, Anda juga bisa mengikuti tantangan dari Lenovo untuk membuat game virtual reality berbasis Android. Info lengkapnya bisa dilihat melalui link berikut: https://www.codepolitan.com/lenovo-virtual-reality-challenge.

Semoga artikel tutorial ini bermanfaat. Jika ada pertanyaan lebih lanjut, bisa kontak saya di email adam@arsanesia.com atau via Twitter di @ardisaz atau bisa Line @ardisaz.

---

Tutorial ini disponsori oleh