Hai Coders, diantara kalian pastinya udah pada ga asing kan sama game Counter Strike atau Call of Duty, atau game-game bergenre first person shooter (FPS) lainnya? Udah pada nyobain belum gimana sensasinya pas maenin game FPS dengan mode <a href="https://www.codepolitan.com/tag/virtual-reality/" target="_blank">virtual reality</a>? Wah, seru Bro! Kayaknya :P Coba aja googling misalnya dengan kata kunci "Counter Strike Virtual Reality" dan simak beberapa demo videonya. Nah pada tutorial kali ini saya akan mengajak Kamu merasakan sensasi virtual reality (VR) langsung dari hape Android Kamu. Tentunya Kamu harus punya Google Cardboard buat bisa menikmati VRnya. Kamu bisa beli online dengan harga 35-50ribuan. Lebih keren lagi kalo Kamu bisa nyicip pake smartphone Lenovo Vibe K4 Note yang memang didesain untuk VR. Saya sudah coba dan layarnya emang bening banget Brooo!

Karena ini artikel tutorial, jadi saya akan membahas bagaimana membuat game VR bergenre first person shooter (FPS) sederhana menggunakan Unity 3D dan Google Cardboard SDK. Dan lagi, tutorial ini saya set levelnya beginner, jadi kita akan fokus bagaimana menerapkan virtual reality pada game FPS dan mencobanya di smartphone Android. Siapapun, bahkan yang tidak terlalu kenal dengan Unity, mestinya bisa mengikuti tutorial ini. Adapun supaya Kamu ga terlalu asing dengan Unity, Kamu boleh ikuti course gratis tentang <a href="https://www.dicoding.com/academies/9" target="_blank">Pengembangan Game dengan Unity</a> di Dicoding Academy.
<h2>Persiapan</h2>
<ol>
	<li>Instal terlebih dahulu Unity3D. Pada saat instalasi, pastikan Kamu menceklis opsi Android Built Support karena kita akan export game ke Android. Installernya dapat diunduh di <a href="http://unity3d.com/get-unity/download?ref=personal" target="_blank">sini</a>.

[caption id="attachment_8491" align="alignnone" width="503"]<img class="wp-image-8491 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/android-support.png" alt="android-support" width="503" height="389" /> Pastikan opsi Android Built Support terpilih pada saat proses instalasi Unity.[/caption]</li>
	<li>Install Android SDK. Unduh installer yang SDK Tools Only di <a href="http://developer.android.com/sdk/index.html#Other" target="_blank">sini</a>. Kalo di komputer Kamu sudah terinstal Android Studio, itu sudah cukup.</li>
	<li>Install Java Platform (JDK). Unduh installernya di <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">sini</a>.</li>
	<li>Unduh sample game Starter Ninja di <a href="http://www.raywenderlich.com/wp-content/uploads/2015/10/StarterNinja.zip" target="_blank">sini</a>. Kita akan menggunakan sample game ini supaya kita bisa fokus pada bagaimana menerapkan Google Cardboard SDK pada game, atau dengan kata lain kita mengkonversi game ini menjadi bentuk game VR. Game ini saya dapat dari tutorial <a href="https://www.raywenderlich.com/116805/make-vr-game-unity-google-cardboard" target="_blank">Raywenderlich</a> dan akan saya sesuaikan dengan keperluan tutorial kita.</li>
	<li>Download Google Cardboard SDK for Unity di <a href="https://developers.google.com/cardboard/unity/download" target="_blank">sini</a>. Nama file yang didownload adalah CardboardSDKForUnity.unitypackage.</li>
</ol>
<h2>Mencoba Game Ninja Starter</h2>
Sebelum kita mengkonversi game Ninja Starter, kita coba buka game tersebut di Unity. Ekstrak terlebih dahulu file StarterNinja.zip kemudian buka folder ekstraknya, dan dobelklik file StarterNinja/Assets/MainScene.unity. Nantinya aplikasi Unity akan terbuka dengan folder Assets yang sudah muncul di bagian panel Project.

Pada panel Project, pilih folder Assets lalu dobelklik file MainScene untuk membuka scene game Ninja Starter.

[caption id="attachment_8493" align="alignnone" width="520"]<img class="wp-image-8493 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/panelAsset.png" alt="panelAsset" width="520" height="304" /> Pilih file MainScene pada folder Assets dan dobel klik untuk membuka[/caption]

Maka MainScene akan terbuka di bagian panel Scene. Kita coba bagaimana gameplay dari game ini. Klik tombol play yang ada di bagian tengah atas aplikasi Unity. Unity akan mengcompile game tersebut dan menjalankan gamenya di bagian panel Game. Skenarionya adalah ada dua karakter, yakni ninja dan karakter lawan, seperti hantu tapi warnanya hijau. Cara memainkannya adalah dengan mengklik karakter hantu, maka sang ninja akan melemparkan shuriken ke arah hantu tersebut. Game berakhir ketika karakter hantu berhasil lolos ke batas berwarna merah di belakang sang ninja. Sederhana tapi keren bukan?

[caption id="attachment_8495" align="alignnone" width="500"]<img class="wp-image-8495 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/ninjastarter-first.png" alt="ninjastarter-first" width="500" height="293" /> Penampakan game Ninja Starter sebelum dikonversikan ke dalam bentuk VR[/caption]
<h2>Menambahkan Google Cardboard SDK</h2>
Sekarang kita akan menambahkan SDK Google Cardboard for Unity supaya bisa dibuat menjadi game VR. Untungnya karena game ini sudah berbentuk 3D dan gameplaynya sudah berjalan dengan baik, kita bisa langsung menambahkan beberapa komponen Google Cardboard.

Import terlebih dahulu file SDK Google Cardboard ke dalam Unity melalui menu Assets &gt; Import Package &gt; Custom Package.., lalu pilih file yang bernama CardboardSDKForUnity.unitypackage yang sudah Kamu unduh seperti pada tahap Persiapan. Akan muncul jendela Import Unity Package. Lepaskan tanda centang pada folder Legacy karena kita tidak akan menggunakannya. Kemudian klik tombol Import.

[caption id="attachment_8496" align="alignnone" width="367"]<img class="wp-image-8496 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/import-google-cardboard-sdk.png" alt="import-google-cardboard-sdk" width="367" height="386" /> Lepas tanda centang pada folder Legacy, lalu klik tombol Import di kanan bawah jendela[/caption]

Maka sekarang di bagian panel Assets akan bertambah folder Cardboard dan Plugins. Ini adalah asset dari SDK Google Cardboard yang akan kita gunakan pada game.
<h2>Menambahkan Prefab CardboardMain</h2>
Prefab dalam Unity adalah objek game yang sudah memiliki konfigurasi awal yang dapat kita masukkan ke dalam Scene/area game. Google Cardboard sudah menyediakan satu prefab bernama CardboardMain yakni objek yang menjadi kamera untuk VR. Perbedaannya dengan kamera yang sudah ada pada game Ninja Starter ini adalah, CardboardMain memiliki dua buah kamera kiri dan kanan sekaligus yang merepresentasikan sudut pandang mata kiri dan kanan --salah satu konsep utama dalam virtual reality.

Prefab CardboardMain terdapat pada folder Assets/Cardboard/Prefabs/. Untuk menambahkan CardboardMain ke dalam scene game kita adalah mengklik-geser file tersebut ke bagian panel Hierarchy pada aplikasi Unity.

[caption id="attachment_8498" align="alignnone" width="528"]<img class="wp-image-8498 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/drag-drop-cardboardMain.png" alt="drag-drop-cardboardMain" width="528" height="468" /> Klik dan geser file CardboardMain ke bagian panel Hierarchy[/caption]

Dengan demikian objek CardboardMain akan otomatis dimasukkan ke dalam scene. Kamu juga bisa langsung mendrag CardboardMain ke dalam area scene untuk langsung menempatkannya di posisi tertentu.

Karena kita akan menggunakan kamera dari Google Cardboard, maka kita akan menonaktifkan Main Camera bawaan game. Pada panel Hierarchy, pilih Main Camera dan lepas tanda centang pada opsi di sebelah judul objek pada panel Inspector.

[caption id="attachment_8500" align="alignnone" width="481"]<img class="wp-image-8500 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/disable-main-camera.png" alt="disable-main-camera" width="481" height="259" /> Pilih Main Camera pada panel Hierarchy dan klik untuk melepas centang pada opsi di sebelah judul objek Main Camera pada panel Inspector[/caption]

Selanjutnya kita posisikan CardboardMain pada posisi yang sama dengan posisi karakter ninja. Kamu bisa mendrag dan memposisikan langsung melalui area scene. Tapi supaya lebih presisi kita bisa langsung set posisi koordinatnya melalui panel Inspector.
<div class="alert alert-info">Tips: Kamu bisa mengatur sudut pandang area Scene dengan mendrag area Scene sambil menekan tombol Alt.</div>
Objek karakter ninja pada game bernama racoon-ninja. Objek ini berada pada posisi X:-5.65, Y:0.02, dan Z:0. Objek ini juga menghadap ke arah 90 derajat dari sumbu Y. Nilai posisi ini akan kita pasang juga pada objek CardboardMain. Pilih objek CardboardMain lalu set Position X, Y dan Z serta Rotation Y pada panel Inspector seperti gambar di bawah ini.

<img class="alignnone size-full wp-image-8504" src="https://www.codepolitan.com/wp-content/uploads/2016/03/CardboardMain-position.png" alt="CardboardMain-position" width="485" height="166" />

Perhatikan gambar di atas. Alih-alih mengeset posisi Y dengan 0.02 seperti posisi Y dari karakter ninja, kita mengeset posisi Y objek CardboardMain dengan 1.22. Kita posisikan seperti ini supaya posisi CardboardMain sejajar dengan posisi mata ninja, dan bukan sejajar dengan kaki. Bila kita perhatikan pada area Scene, objek CardboardMain akan nampak seperti gambar di bawah ini.

[caption id="attachment_8505" align="alignnone" width="614"]<img class="wp-image-8505 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/CardboardMain-in-scene.png" alt="CardboardMain-in-scene" width="614" height="333" /> Posisi CardboardMain setelah diset posisinya ke koordinat (5.65, 1.22, 0)[/caption]
<h2>Testing di Handphone Android</h2>
Kita sudah menambahkan komponen utama untuk VR. Kamu bisa mencoba menjalankan gamenya di Unity. Kamu bisa mensimulasikan arah pandang kamera dengan menggeser posisi kursor mouse sambil menekan tombol Alt. Kamu juga bisa mensimulasikan kamera miring ke kiri dan kanan dengan menggeser kursor mouse sambil menekan tombol Ctrl. Dan Kamu bisa menembaki lawan dengan mengklik kiri pada area game.

Setelah itu mari kita lihat bagaimana penampakannya di handphone android. Pastikan Kamu sudah menginstal Android SDK dan Java JDK. Kita akan mengarahkan Eksternal Tools Unity ke folder instalasi keduanya. Pilih menu Edit &gt; Preferences..., lalu pada jendela Unity Preferences pilih tab External Tools. Isikan kolom Android SDK dan JDK ke lokasi folder instalasi masing-masing.

<img class="alignnone size-full wp-image-8506" src="https://www.codepolitan.com/wp-content/uploads/2016/03/set-android-sdk-jdk.png" alt="set-android-sdk-jdk" width="516" height="433" />

Kemudian, kita akan membuild game ini ke dalam bentuk Android Package atau .apk dan menjalankannya di handphone Android. Hubungkan handphonemu ke komputer melalui kabel USB. Pastikan pengaturan USB Debugging pada Android sudah diaktifkan.

[caption id="attachment_8507" align="alignnone" width="233"]<img class="wp-image-8507 " src="https://www.codepolitan.com/wp-content/uploads/2016/03/62e6a0cb-9caf-4504-8121-3d793bfa88ff-393x700.jpg" alt="62e6a0cb-9caf-4504-8121-3d793bfa88ff" width="233" height="415" /> Aktifkan USB Debugging pada handphone Android[/caption]

Kemudian pilih menu File &gt; Build Settings.... Pada jendela Build Settings, pilih platform Android. Lalu klik tombol Player Settings... untuk menampilkan properti Inspector untuk Player Settings. Pada panel Inspector, bagian Resolution and Presentation, set opsi Default Orientation menjadi Landscape Left. Dan pada bagian Other Settings, set Bundle Identifier menjadi apapun Kamu mau dengan format penulisan com.mycompany.myapp.

<img class="alignnone wp-image-8509" src="https://www.codepolitan.com/wp-content/uploads/2016/03/landscape-left.png" alt="landscape-left" width="343" height="183" />
<img class="alignnone size-full wp-image-8508" src="https://www.codepolitan.com/wp-content/uploads/2016/03/identifier.png" alt="identifier" width="342" height="352" />

Kemudian klik tombol Build and Run. Nantinya setelah selesai mengcompile, game akan dijalankan di handphone Android. Kamu bisa mencicipi game VR pertama hasil build sendiri hehe..
<h2>Menonaktifkan Objek Ninja</h2>
Setelah Kamu coba gamenya dari hape, Kamu akan menemukan ada beberapa hal yang belum beres, seperti bagian tubuh ninja yang menghalangi pandangan dan arah tembakan yang tidak sesuai dengan arah kepala menghadap. Kita tidak akan menggunakan karakter ninja pada game kita, maka kita akan menonaktifkan objek ninja ini. Klik objek racoon-ninja pada panel Hierarchy, dan lepaskan tanda centang pada panel Inspector seperti pada saat kita menonaktifkan objek Main Camera pada langkah sebelumnya.

Kemudian, kita akan menggunakan CardboardMain sebagai pengarah tembakan shuriken kita, sehingga kita dapat menembakkan ke arah yang sama dengan arah mata kita. Untuk itu, kita akan sedikit mengedit kode program. Pada panel Hierarchy, klik objek GameLogic. Kemudian pada Inspector untuk GameLogic, pada komponen NinjaStarLauncher dobelklik bagian script. Maka akan muncul jendela MonoDevelop dengan menampilkan kode program NinjaStarLauncher.cs.

Pada bagian prosedur Start(), edit variabel _shooterOffset pada baris kode ke-15 menjadi seperti ini:
<pre>_shooterOffset = new Vector3(0.0f, -0.4f, 1.0f);</pre>
Kemudian pada prosedur Update(), ganti isi kode prosedur menjadi seperti ini:
<pre>void Update () {
 if (Cardboard.SDK.VRModeEnabled &amp;&amp; Cardboard.SDK.Triggered &amp;&amp;
 !_gameController.isGameOver) {
 GameObject vrLauncher =
 Cardboard.SDK.GetComponentInChildren&lt;CardboardHead&gt;().gameObject;
 LaunchNinjaStarFrom(vrLauncher, _shooterOffset);
 }
}
</pre>
Pada fungsi Update(), kita memastikan bahwa game sedang dalam state bermain dan belum game over. Kemudian kita memanggil fungsi LaunchNinjaStarFrom() dengan parameter pertama berupa kepala karakter dari objek CardboardHead yang mengarahkan kamera sesuai yang kita inginkan, dan parameter kedua adalah batas posisi shuriken terbang, mulai dari depan dan sedikit agak lebih bawah dari kepala supaya terkesan memang dilempar, bukan disembur hehe..
<h2>Memperbaiki Posisi Tombol Play Again</h2>
Satu lagi yang harus diperbaiki, yakni posisi tombol Play Again yang masih statis di tengah layar dan bahkan tidak bisa diklik. Kita akan membuatnya melayang di depan masing-masing kamera VR. Game ini menggunakan mode Display Canvas yang membuat layar game over muncul di atas jendela game. Kita akan mengubahnya menggunakan GUI Canvas yang membuatnya dirender di dalam dunia 3D.

Pada panel Hierarchy, pilih objek GameOverCanvas. Pada panel Inspector untuk objek tersebut, pada komponen Rect Transform, ganti Position X: 2.24, Y: 1.1, dan Z: 0.07, Rotation Y: 90 dan Scale X: 0.009 dan Y: 0.009. Kemudian pada komponen Canvas, ganti opsi Render Mode dari Screen Space - Overlay menjadi World Space.

<img class="alignnone size-full wp-image-8512" src="https://www.codepolitan.com/wp-content/uploads/2016/03/Gameover-canvas.png" alt="Gameover-canvas" width="484" height="334" />

Sip. Sampai sini tombol Play Again sudah ada di dalam dunia 3D. Silakan klik tombol play dan lihat bagaimana layar game over muncul di dalam dunia 3D.
<h2>Menambahkan Gaze Input</h2>
Tombol Play Againnya masih belum bisa diklik kan? Karena memang pada dasarnya tidak ada interaksi kursor mouse di dalam dunia 3D VR. Tapi Unity sudah menyediakan dukungan untuk memberikan perlakuan pada objek yang berada di tengah layar kamera, yang bernama Gaze.

Pada panel Hierarchy, pilih objek GameOverCanvas. Kemudian panel Inspector untuk objek ini, pada komponen Canvas, didalamnya ada opsi Event Camera. Ganti nilai opsi tersebut dengan Main Camera yang ada di dalam CardboardMain. Cara menggantinya adalah dengan mendrag objek Main Camera ke dalam kotak opsi Event Camera. Untuk memastikan apakah nilainya sudah terganti dengan yang baru, klik kotak opsi tersebut dan dia akan menunjukkan objek mana yang dipakai dengan menampilkan highlight kuning.

[caption id="attachment_8513" align="alignnone" width="483"]<img class="wp-image-8513 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/03/change-main-camera-canvas.png" alt="change-main-camera-canvas" width="483" height="206" /> Expand objek CardboardMain &gt; Head hingga muncul Main Camera, lalu klik objek GameOverCanvas. Drag objek Main Camera ke dalam kotak opsi Event Camera[/caption]

Langkah selanjutnya adalah pilih objek EventSystem pada panel Hierarchy. Kemudian pada bagian paling bawah panel Inspector, klik tombol Add Component. Lalu pada pilihan komponen, search GazeInputModule dan pilih. Maka pada panel Inspector akan bertambah satu komponen, yakni komponen Gaze Input Module. Klik centang pada opsi Vr Mode Only pada komponen tersebut.

Dan terakhir, agar komponen Gaze Input Module ini diprioritaskan sebelum komponen Touch Input Module dan Standalone Input Module, klik ikon gear yang ada di sebelah kanan atas komponen Gaze Input Module, lalu pilih Move Up dan lakukan dua kali sampai komponen ini ada di atas komponen Touch Input dan Standalone Input.

Silakan play gamenya dan tes. Mestinya setelah game berakhir, tombol Play Again akan muncul dan berwarna hijau ketika gaze berada di atas tombol (tombol berada di tengah layar). Kita dapat mengklik tombol ini pada saat posisi gaze ada di atas tombol.

<img class="alignnone size-large wp-image-8514" src="https://www.codepolitan.com/wp-content/uploads/2016/03/playagain-green-700x456.png" alt="playagain-green" width="700" height="456" />
<h2>Penutup</h2>
Silakan Kamu coba Build and Run game Kamu ke hape Android. Saya mencoba menginstal game ini di handphone Lenovo Vibe K4 Note dan memainkannya menggunakan Ant VR Headset. Hasilnya, pengalaman yang luar biasaaa.. :D

Referensi: <a href="https://www.raywenderlich.com/116805/make-vr-game-unity-google-cardboard" target="_blank">www.raywenderlich.com</a> dengan penyesuaian

Membuat Game Virtual Reality First Person Shooter Menggunakan Unity 3D dan Google Cardboard SDK

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 First Person Shooter Menggunakan Unity 3D dan Google Cardboard SDK

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino