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

Ditulis oleh Adam Ardisasmita, dipublikasi pada 12 Mar 2016 dalam kategori Tutorial
Membuat Game Virtual Reality untuk Android Menggunakan Google Cardboard SDK For Unity - CodePolitan.com

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 projectyang disediakan oleh Google untuk memberikan kita gambaran mengenai virtual realitymenggunakan Unity. Saya tidak akan membahas dalam tentang Unity atau cara membuat game.Jika ingin belajar mengenai pembuatan gamemenggunakan 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:

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 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 gamekita yang dibagi menjadi kamera kanan dan kamera kiri agar dapat terbaca oleh Cardboard dengan baik.

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

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

Tahapan kedua adalah setupkamera di dalam gamekita menjadi Stereoscopic Camera.Ada beberapa cara untuk melakukan hal ini. Yang paling mudah adalah dengan menggunakan prefabyang 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" -> Deletevr_3
  2. Masukan prefab yang bernama CardboardMain ke dalam herarchy dengan cara klik di tab project Assets -> Cardboard -> Prefabs, lalu drag fileCardboardMain ke dalam hierarchy.vr_4vr_5
  3. Untuk memastikan kamera di dalam gamekita sudah Stereoscopic Camera, kita bisa menekan tombol Play dan melihat di dalam tab Game layar kita sudah terbagi dua.vr_6_update

Setelah memasukan prefab CardboardMain ke dalam tab hierarchy, secara umum fungsi deteksi gyroscopesudah terpasang di dalam gamekita sehingga gameyang kita buat sudah compatibledengan Google Cardboard. Selanjutnya kita tinggal menambahkan komponen di dalam sceneuntuk membuat gameyang kita buat lebih menarik.

Implementasi Input Pada Google Cardboard

Dengan tahapan yang sudah kita lakukan, gamekita masih terasa kurang lengkap. Pemain yang menggunakan aplikasi yang kita kembangkan sejauh ini hanya bisa melihat objek di dalam dunia gamesaja. Mungkin jika kita ingin membuat gameyang 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 gameseperti input.Produk virtual realityseperti 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 inputyang bisa kita gunakan. Yang pertama adalah dengan menyentuh layar dan yang kedua dengan menggunakan magnet.

cardboard

Selanjutnya kita akan membahas bagaimana memberikan inputdalam mode virtual realitydimana kita menggunakan Stereoscopic Camera. Triggeryang 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 EventSystemvr_8vr_9
  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.vr_10vr_11
  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 scriptGazeInputModule ke dalam EventSystem.

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

vr_12

Dengan mengimplementasikan GazeInputModule, maka ketika kamera mengarah ke objek button lalu kita klik mousekita sebagai representasi inputdari user,objek button akan mendapatkan triggerdan bisa memberikan aksi.

Jika Anda ingin berinteraksi dengan objek 3D di dalam scene,Anda bisa menggunakan komponen PhysicsRaycasterke dalam Event Camera. Kita juga harus menyiapkan scriptrespon 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 realityyang ingin kita kembangkan. Dua modal tersebut sudah cukup untuk selanjutnya kita berkreasi dan berinovasi mengembangkan gameyang menarik.

Untuk referensi, kita bisa menggunakan sample projectmilik Google. Yang pertama adalah kita perlu import packageyang berisi sample projectyang sudah kita unduh sebelumnya.

  1. Cara untuk import packageadalah 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.vr_13
  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 projectdari Cardboard.vr_14
  3. Kita bisa mencoba memainkan sample projectdari Cardboard ini dengan cara menekan alt + gerakan mouseuntuk menggerakan kamera seolah-olah kepala kita bergerak. Lalu jika mata kita melihat objek berupa kubus, kita bisa klik kiri pada mousekita yang merepresentasikan triggeryang 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 inputketika melihat objek tersebut di layar.vr_15
  4. Di dalam gameini, 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.vr_16
  5. Untuk mempermudah interaksi dengan user,dalam sample projectini terdapat best practiceyang sangat baik yakni visual cueterhadap 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 scriptGazeInputModule 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.Screen Shot 2016-03-12 at 2.40.33 PM
  2. Di dalam Unit, klik File -> Build SettingScreen Shot 2016-03-12 at 2.33.03 PM
  3. Setelah itu akan muncul halaman baru. Kita klik logo Android lalu klik Switch Platform.Screen Shot 2016-03-12 at 2.33.13 PM
  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.Screen Shot 2016-03-12 at 2.38.47 PMScreen Shot 2016-03-12 at 2.38.25 PM
  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 dropke kotak Scenes In Build.Screen Shot 2016-03-12 at 2.44.57 PM
  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.Screen Shot 2016-03-12 at 2.37.40 PM

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 gameyang menarik.

Yang perlu diperhatikan adalah selalu track headdi dalam permainan yang kita kembangkan, lalu juga kita perlu menjaga agar FPS stabil di angka 60 mengingat layar handphoneakan 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 gamemenjadi lebih menarik dan memastikan visual cuedapat dimengerti oleh userdengan 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
LenovoLogo-POS-Red




Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.