Kali ini saya ingin membahas topik cara membuat game <a href="https://www.codepolitan.com/tag/virtual-reality/">virtual reality</a> 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 <a href="https://www.dicoding.com/academies/9" target="_blank">tautan berikut ini</a>.
<h2>Persiapan</h2>
Sebelum memulai tutorial ini, ada beberapa hal yang perlu Anda unduh terlebih dahulu:
<ul>
	<li><a href="https://unity3d.com/get-unity" target="_blank">Unity Engine </a></li>
	<li><a href="https://github.com/googlesamples/cardboard-unity" target="_blank">Google Cardboard SDK</a></li>
	<li><a href="https://github.com/googlesamples/cardboard-unity/blob/master/CardboardDemoForUnity.unitypackage?raw=true" target="_blank">Sample Project Google Cardboard</a></li>
	<li><a href="http://developer.android.com/sdk/index.html" target="_blank">Google SDK</a></li>
</ul>
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"]<img class="wp-image-8236 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/03/ANT-VR-Headset-for-Lenovo-700x490.jpg" alt="Lenovo K4 Note dengan Theater Max" width="450" /> Lenovo K4 Note dengan Theater Max[/caption]
<h2>Integrasi Unity dengan Google Cardboard SDK</h2>
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:
<ol>
	<li>Buka project baru Unity. Pastikan kita memilih 3D sebelum membuat project baru.
<img class="aligncenter size-full wp-image-8385" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_1.jpg" alt="vr_1" width="674" height="411" /></li>
	<li>Import package Google Cardboard SDK For Unity. Klik Assets -&gt; Import Package -&gt; Custom Package, lalu pilih file CardboardSDKForUnity.unitypackage<img class="aligncenter size-full wp-image-8386" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_2.jpg" alt="vr_2" width="351" height="367" /></li>
</ol>
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:
<ol>
	<li>Hapus Main Camera yang ada di dalam hierarchy dengan cara klik kanan "Main Camera" -&gt; Delete<img class="aligncenter size-full wp-image-8371" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_3.jpg" alt="vr_3" width="700" height="616" /></li>
	<li>Masukan prefab yang bernama CardboardMain ke dalam herarchy dengan cara klik di tab project Assets -&gt; Cardboard -&gt; Prefabs, lalu drag file CardboardMain ke dalam hierarchy.<img class="aligncenter size-full wp-image-8372" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_4.jpg" alt="vr_4" width="700" height="419" />
<img class="aligncenter size-full wp-image-8373" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_5.jpg" alt="vr_5" width="700" height="421" /></li>
	<li>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.<img class="aligncenter size-full wp-image-8392" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_6_update.jpg" alt="vr_6_update" width="700" height="424" /></li>
</ol>
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.
<h2>Implementasi Input Pada Google Cardboard</h2>
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.

<img class="aligncenter size-full wp-image-8391" src="https://www.codepolitan.com/wp-content/uploads/2016/03/cardboard.jpg" alt="cardboard" width="800" height="450" />

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.
<ol>
	<li>Buat UI Canvas dengan cara klik kanan di tab hiearchy, klik UI -&gt; Button. Setelah itu maka akan muncul Game Object baru berupa Canvas dan EventSystem<img class="aligncenter size-full wp-image-8376" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_8.jpg" alt="vr_8" width="700" height="562" />
<img class="aligncenter size-full wp-image-8377" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_9.jpg" alt="vr_9" width="700" height="668" /></li>
	<li>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.<img class="aligncenter size-full wp-image-8378" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_10.jpg" alt="vr_10" width="275" height="545" />
<img class="aligncenter size-full wp-image-8379" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_11.jpg" alt="vr_11" width="700" height="422" /></li>
	<li>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.</li>
</ol>
Di tab Project, klik Assets -&gt; Cardboard -&gt; Script, lalu drag GazeInputModule ke dalam GameObject EventSystem di tab Hierarchy. Pastikan komponen GazeInputModule berada paling atas agar menjadi prioritas ketika program dijalankan.

<img class="aligncenter size-full wp-image-8380" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_12.jpg" alt="vr_12" width="700" height="425" />

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.
<h2>Eksplorasi Sample Project Google Cardboard</h2>
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.
<ol>
	<li>Cara untuk import package adalah klik Assets -&gt; Import Package -&gt; Custom Package, lalu pilih file CardboardDemoForUnity.unitypackage. Jika prosesnya telah selesai, kita akan melihat ada folder baru di dalam tab Project.<img class="aligncenter size-full wp-image-8381" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_13.jpg" alt="vr_13" width="700" height="421" /></li>
	<li>Selanjutnya kita hanya perlu membuka Scene demo yang diberikan dengan cara di Tab Project klik Assets -&gt; Cardboard -&gt; DemoScene -&gt; double klik file DemoScene. Maka kita akan dialihkan menuju scene baru yang berisi demo project dari Cardboard.<img class="aligncenter size-full wp-image-8382" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_14.jpg" alt="vr_14" width="700" height="420" /></li>
	<li>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.<img class="aligncenter size-full wp-image-8383" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_15.jpg" alt="vr_15" width="700" height="424" /></li>
	<li>Di dalam game ini, Anda bisa berinteraksi dengan sebuah objek 3D berupa kubus. Anda bisa perhatikan di dalam tab Hierarchy -&gt; CardboardMain -&gt; Head -&gt; 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.<img class="aligncenter size-full wp-image-8384" src="https://www.codepolitan.com/wp-content/uploads/2016/03/vr_16.jpg" alt="vr_16" width="700" height="423" /></li>
	<li>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.</li>
</ol>
Untuk objek lingkaran pada kamera, ketika bertemu dengan kubus maka akan berubah ukurannya.
<pre>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;
}
</pre>
Untuk objek kubus, ketika bertemu dengan fokus mata kita maka akan berubah warnanya.
<pre>public void SetGazedAt(bool gazedAt)
{
 GetComponent&lt;Renderer&gt;().material.color = gazedAt ? Color.green : Color.red;
}
</pre>
<h2 style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Export Installer APK</h2>
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.
<ol>
	<li>Unduh file Google SDK di tautan yang sudah diberikan di atas. Sesuaikan dengan sistem operasi yang Anda gunakan.
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.40.33-PM-700x360.png" alt="Screen Shot 2016-03-12 at 2.40.33 PM" width="700" height="360" /></li>
	<li>Di dalam Unit, klik File -&gt; Build Setting
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.33.03-PM-700x435.png" alt="Screen Shot 2016-03-12 at 2.33.03 PM" width="700" height="435" /></li>
	<li>Setelah itu akan muncul halaman baru. Kita klik logo Android lalu klik Switch Platform.
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.33.13-PM.png" alt="Screen Shot 2016-03-12 at 2.33.13 PM" width="549" height="598" /></li>
	<li>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.
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.38.47-PM-419x700.png" alt="Screen Shot 2016-03-12 at 2.38.47 PM" width="419" height="700" />
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.38.25-PM.png" alt="Screen Shot 2016-03-12 at 2.38.25 PM" width="269" height="205" /></li>
	<li>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.
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.44.57-PM.png" alt="Screen Shot 2016-03-12 at 2.44.57 PM" width="554" height="602" /></li>
	<li>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.
<img class="attachment-large size-large aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-12-at-2.37.40-PM.png" alt="Screen Shot 2016-03-12 at 2.37.40 PM" width="441" height="198" /></li>
</ol>
Untuk tutorial lebih detil tentang cara membuat file APK di Unity, Anda bisa mengikuti kelas Dicoding Academy tentang Pengembangan Game Menggunakan Unity.
<h2>Penutup</h2>
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: <a href="https://www.codepolitan.com/lenovo-virtual-reality-challenge/">https://www.codepolitan.com/lenovo-virtual-reality-challenge</a>.

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
<a href="http://www.lenovo.com/id/in/" target="_blank"><img class="size-full wp-image-8388 alignleft" src="https://www.codepolitan.com/wp-content/uploads/2016/03/LenovoLogo-POS-Red.png" alt="LenovoLogo-POS-Red" width="126" height="42" /></a>

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

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

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

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

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

Teknologi Versus Hipokinetik

Membuat Game Virtual Reality Android yang Mendukung Kontrol Joystick

Mengintegrasikan Google Leaderboard pada Game VR Android