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

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 virtual reality? 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 Pengembangan Game dengan Unity di Dicoding Academy.

Persiapan

1. 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 sini.

   [caption id="attachment_8491" align="alignnone" width="503"] Pastikan opsi Android Built Support terpilih pada saat proses instalasi Unity.[/caption]

2. Install Android SDK. Unduh installer yang SDK Tools Only di sini. Kalo di komputer Kamu sudah terinstal Android Studio, itu sudah cukup.
3. Install Java Platform (JDK). Unduh installernya di sini.
4. Unduh sample game Starter Ninja di sini. 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 Raywenderlich dan akan saya sesuaikan dengan keperluan tutorial kita.
5. Download Google Cardboard SDK for Unity di sini. Nama file yang didownload adalah CardboardSDKForUnity.unitypackage.

Mencoba Game Ninja Starter

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"] 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"] Penampakan game Ninja Starter sebelum dikonversikan ke dalam bentuk VR[/caption]

Menambahkan Google Cardboard SDK

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 > Import Package > 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"] 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.

Menambahkan Prefab CardboardMain

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"] 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"] 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.

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.

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"] Posisi CardboardMain setelah diset posisinya ke koordinat (5.65, 1.22, 0)[/caption]

Testing di Handphone Android

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 > Preferences..., lalu pada jendela Unity Preferences pilih tab External Tools. Isikan kolom Android SDK dan JDK ke lokasi folder instalasi masing-masing.

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"] Aktifkan USB Debugging pada handphone Android[/caption]

Kemudian pilih menu File > 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.

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

Menonaktifkan Objek Ninja

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:

_shooterOffset = new Vector3(0.0f, -0.4f, 1.0f);

Kemudian pada prosedur Update(), ganti isi kode prosedur menjadi seperti ini:

void Update () {
    if (Cardboard.SDK.VRModeEnabled && Cardboard.SDK.Triggered &&
        !_gameController.isGameOver) {
            GameObject vrLauncher =
                Cardboard.SDK.GetComponentInChildren<CardboardHead>().gameObject;
            LaunchNinjaStarFrom(vrLauncher, _shooterOffset);
    }
}

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

Memperbaiki Posisi Tombol Play Again

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.

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.

Menambahkan Gaze Input

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"] Expand objek CardboardMain > 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.

Penutup

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: www.raywenderlich.com dengan penyesuaian