Membuat game AR menggunakan AR Foundation Unity

1. Ringkasan

ARCore adalah framework Google untuk membangun pengalaman augmented reality di smartphone. Anda dapat menggunakan AR Foundation Unity untuk membangun aplikasi AR lintas platform.

Yang akan Anda build

Dalam codelab ini, Anda akan membuat game sederhana menggunakan AR Foundation. Tujuan game ini adalah mengumpulkan paket menggunakan mobil yang Anda kendalikan menggunakan perangkat genggam.

Namun, hal ini tidak akan terjadi di dunia virtual sepenuhnya. Anda akan memadukan atom fisik dan bit digital untuk menciptakan jenis pengalaman pemain baru dengan membuat game yang memahami lingkungan di sekitar pemain.

Di akhir codelab ini, game Anda akan dapat:

  • Mendeteksi bidang dunia nyata dan menggambar lapangan bermain di atasnya.
  • Memancarkan sinar dari tampilan kamera dan mendeteksi persimpangan dengan bidang.
  • Bereaksi terhadap kondisi pencahayaan dunia nyata untuk memberikan realisme ekstra pada game Anda.

Yang akan Anda pelajari

  • Cara menyiapkan project yang menggunakan AR Foundation Unity.
  • Cara menggunakan ARPlaneManager untuk berlangganan pesawat baru.
  • Cara menggunakan Raycast untuk menemukan persimpangan dengan geometri virtual
  • Cara menggunakan ARLightEstimationData untuk menerangi adegan Anda.

Yang Anda butuhkan

2. Menyiapkan lingkungan pengembangan

Pada langkah ini, Anda akan menyiapkan lingkungan untuk pengembangan dengan AR Foundation Unity.

Pastikan perangkat Anda kompatibel dengan AR

Pengalaman AR di perangkat Android didukung oleh ARCore, yang tersedia di perangkat yang didukung ARCore. Pastikan perangkat pengembangan Anda kompatibel dengan AR. Atau, Anda dapat menggunakan instance Emulator Android yang kompatibel dengan AR dan dikonfigurasi dengan benar.

Menyiapkan proses debug USB di perangkat Anda

Anda harus mengaktifkan Opsi developer di perangkat untuk menjalankan aplikasi debug. Jika Anda belum melakukannya, lihat dokumentasi Android tentang Mengaktifkan opsi developer dan proses debug USB.

Instal Unity (2020.3 LTS)

Di workstation Anda, instal Unity 2020 LTS. Dalam codelab ini, screenshot UI Unity ditampilkan dalam versi 2020.3 (LTS). Versi Unity lainnya mungkin berfungsi, tetapi mungkin memerlukan langkah tambahan. Tampilannya mungkin berbeda dengan screenshot yang ditampilkan di sini.

Membuat project baru

Buat project baru menggunakan template Universal Render Pipeline. Beri nama deskriptif dan lokasi yang sesuai, lalu tekan BUAT.

Instal framework yang diperlukan

AR Foundation Unity dapat ditemukan di Unity Package Manager.

  1. Buka dengan mengklik Window > Package Manager.

  1. Di jendela ini, instal paket yang akan Anda gunakan dalam codelab ini. Lihat versi terbaru framework ini dengan meluaskan entri menggunakan ikon . Instal versi terbaru untuk setiap framework berikut:
    • AR Foundation
    • Plugin XR ARCore

Setelah selesai, Pengelola Paket Anda akan terlihat seperti ini:

Instal paket awal

Untuk codelab ini, kami telah menyediakan paket awal yang berisi prefab dan skrip yang akan mempercepat beberapa bagian codelab sehingga Anda dapat berfokus pada cara menggunakan AR Foundation.

  1. Instal paket permulaan dengan membuka Assets > Import Package > Custom Package..., lalu buka starter-package.unitypackage.
  2. Di jendela yang muncul, pastikan semuanya dipilih.
  3. Klik Impor.

Mengubah Setelan Build

Karena aplikasi akan berjalan di Android, ubah platform build ke Android:

  1. Buka File > Build Settings.
  2. Di panel Platform, pilih Android.
  3. Secara opsional, aktifkan Build Pengembangan dan Proses Debug Skrip untuk mempertahankan informasi proses debug saat aplikasi Anda berjalan.
  4. Klik Switch Platform.

Mengubah Setelan Project

AR Foundation perlu dikonfigurasi untuk melakukan inisialisasi sistem XR saat startup.

  1. Buka Edit > Project Settings... dan klik bagian XR Plug-in Management.
  2. Di tab Android, aktifkan ARCore.

  1. Di panel sebelah kiri, klik bagian Pemutar.
  2. Di tab Android, di bagian Setelan Lainnya, hapus Vulkan dari API Grafis.

  1. Aplikasi yang Memerlukan AR yang menggunakan ARCore memerlukan API level minimum 24. Scroll ke bawah dan temukan Minimum API Level. Tetapkan level API minimum ke 24.

Tambahkan elemen adegan yang diperlukan

Template Universal Render Pipeline dilengkapi dengan beberapa objek game yang tidak akan Anda gunakan dalam tutorial ini.

  1. Menghapus semua objek game di SampleScene.

  1. Tambahkan objek AR Foundation. Klik kanan di panel Hierarchy. Gunakan menu ini untuk menambahkan:
  • XR > Sesi AR: Objek ini mengontrol siklus proses pengalaman AR.
  • XR > AR Session Origin: Objek ini mengubah koordinat AR menjadi koordinat dunia Unity.
  • Cahaya > Cahaya Terarah: Memberikan sumber cahaya untuk menerangi objek game.

Hierarki Anda akan terlihat seperti ini:

  1. Luaskan AR Session Origin yang Anda buat di hierarki, lalu pilih objek AR Camera. Di pemeriksa, ubah tagnya menjadi MainCamera.

Menyiapkan rendering

Universal Render Pipeline Unity memerlukan satu perubahan agar kompatibel dengan AR Foundation.

  1. Di panel Project, buka Assets > Settings untuk menemukan aset ForwardRenderer.

  1. Pilih ForwardRenderer.
  2. Di panel Inspector, gunakan Add Renderer Feature untuk menambahkan AR Background Renderer Feature. Komponen ini akan merender feed kamera di adegan Anda.

Memverifikasi penyiapan

  1. Pastikan perangkat Anda dicolokkan, dan proses debug ADB diaktifkan.
  2. Klik File > Build And Run... Tindakan ini akan mengupload aplikasi ke perangkat Anda dan memulainya setelah diinstal.
  3. Anda akan melihat feed kamera di layar perangkat.

Pada langkah berikutnya, Anda akan mulai menambahkan fungsi ke aplikasi.

3. Mendeteksi bidang di dunia nyata

Setelah adegan dasar disiapkan, Anda dapat mulai mengembangkan game. Pada langkah ini, Anda akan mendeteksi bidang dan menggambarnya ke adegan.

Menambahkan komponen ARPlaneManager

ARPlaneManager mendeteksi ARPlane dan membuat, memperbarui, serta menghapus objek game saat pemahaman perangkat tentang lingkungan berubah.

  1. Dengan menggunakan panel Hierarchy, buat GameObject kosong.
  2. Ganti namanya menjadi Driving Surface Manager. Komponen ini akan menampilkan bidang hingga salah satunya dipilih oleh pemain.
  3. Pilih objek game baru. Di panel Inspector, klik Add Component untuk menambahkan AR Plane Manager.

  1. Konfigurasi ARPlaneManager dengan menyetel kolom Plane Prefab:
    1. Klik tombol di samping None untuk membuka jendela Select GameObject.
    2. Pilih tab Aset dan cari Driving Surface Plane.

Prefab dari paket starter ini menyediakan tekstur lantai kasar yang akan digunakan sebagai dekorasi bidang.

  1. Ubah Detection Mode menjadi Horizontal. Tindakan ini mengonfigurasi ARPlaneManager untuk hanya menyediakan bidang horizontal, yang ideal untuk mengemudi.

Menambahkan komponen ARRaycastManager

ARRaycastManager mengekspos fungsi raycast. Pada langkah berikutnya, kita akan menggunakan objek ini untuk menyediakan kontrol bagi pengguna.

  1. Pastikan objek yang disebut Driving Surface Manager dipilih di panel Hierarchy.
  2. Di Inspector, klik Add Component untuk menambahkan komponen ARRaycastManager ke objek game Anda.

Tidak ada konfigurasi lebih lanjut yang diperlukan untuk komponen ini.

Menambahkan komponen DrivingSurfaceManager

DrivingSurfaceManager adalah skrip pembantu dari Paket Pemula yang memungkinkan ARPlane dipilih. Setelah ARPlane dipilih, semua bidang lainnya akan disembunyikan, dan bidang baru akan dinonaktifkan.

  1. Pastikan objek yang disebut Driving Surface Manager dipilih di panel Hierarchy.
  2. Di Inspector, klik Add Component untuk menambahkan komponen DrivingSurfaceManager ke objek game Anda.

Tidak ada konfigurasi lebih lanjut yang diperlukan untuk komponen ini.

Menjalankan aplikasi

  1. Klik File > Build And Run... untuk menguji perubahan Anda.
  2. Arahkan perangkat Anda ke permukaan dunia nyata horizontal dan gerakkan perangkat Anda untuk meningkatkan pemahaman ARCore tentang dunia.

  1. Setelah ARCore mendeteksi bidang, Anda akan melihat tekstur tanah menutupi permukaan dunia nyata. ARPlaneManager membuat instance Plane Prefab yang diberikan untuk setiap bidang yang terdeteksi. Prefab Driving Surface Plane memiliki komponen ARPlaneMeshVisualizer yang membuat mesh untuk ARPlane tertentu.

Pada langkah berikutnya, Anda akan menggunakan bidang yang terdeteksi sebagai area bermain.

4. Melakukan uji hit terhadap bidang yang terdeteksi

Pada langkah sebelumnya, Anda telah memprogram aplikasi yang dapat mendeteksi pesawat. Bidang ini tercermin dalam adegan game Anda. Sekarang, Anda akan menambahkan interaktivitas dengan bidang ini dengan membuat retikel bidik dan mobil yang akan melaju di permukaan bidang yang terdeteksi.

Membuat reticle bidik

Skema kontrol untuk aplikasi ini melibatkan pemain yang mengarahkan ponsel ke permukaan. Untuk memberikan masukan visual yang jelas untuk lokasi yang ditentukan, Anda akan menggunakan reticle bidik.

Untuk "menempelkan" retikel ini ke bidang AR, gunakan hit test. Uji hit adalah teknik yang menghitung persimpangan saat memancarkan sinar ke arah tertentu. Anda akan menggunakan uji hit untuk mendeteksi persimpangan ke arah tampilan kamera.

Menambahkan reticle

  1. Di panel Project di dekat bagian bawah layar, buka Assets > Starter Package.
  2. Tempatkan Reticle Prefab ke dalam adegan dengan menariknya ke Hierarchy pane project.
  3. Pilih retikel dalam hierarki.
  4. Di pemeriksa, klik Tambahkan Komponen. Tambahkan skrip ReticleBehaviour dari Paket Pemula. Skrip ini berisi beberapa boilerplate untuk mengontrol retikula.
  5. Skrip ReticleBehaviour bergantung pada Driving Surface Manager yang Anda buat sebelumnya, jadi tambahkan dependensi dengan mengklik pemilih Driving Surface Manager. Pilih tab Scene dan pilih Driving Surface Manager.

Edit ReticleBehaviour

Skrip ReticleBehavior akan memosisikan reticle pada bidang yang berada di tengah area pandang perangkat.

  1. Buka skrip ReticleBehaviour.cs dengan mengklik dua kali kolom Script.
  2. Tentukan bagian tengah layar menggunakan ViewToScreenPoint Kamera. Edit metode Update() untuk menambahkan hal berikut:
var screenCenter = Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f));
  1. Gunakan titik ini untuk melakukan raycast. Tambahkan perintah berikut:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

Variabel hits akan berisi ARRaycastHit yang menjelaskan titik-titik pada objek yang dapat dilacak yang berpotongan dengan ray.

  1. Tentukan titik persimpangan yang diinginkan dengan membuat kueri daftar hits. Memprioritaskan bidang terkunci yang ada dalam DrivingSurfaceManager, dan jika tidak ada, gunakan hit bidang pertama. Tambahkan kode berikut ke akhir Update():
CurrentPlane = null;
ARRaycastHit? hit = null;
if (hits.Length > 0)
{
    // If you don't have a locked plane already...
    var lockedPlane = DrivingSurfaceManager.LockedPlane;
    hit = lockedPlane == null
        // ... use the first hit in `hits`.
        ? hits[0]
        // Otherwise use the locked plane, if it's there.
        : hits.SingleOrDefault(x => x.trackableId == lockedPlane.trackableId);
}
  1. Jika hit berisi hasil, pindahkan transformasi GameObject ini ke posisi hit.
if (hit.HasValue)
{
    CurrentPlane = DrivingSurfaceManager.PlaneManager.GetPlane(hit.Value.trackableId);
    // Move this reticle to the location of the hit.
    transform.position = hit.Value.pose.position;
}
Child.SetActive(CurrentPlane != null);

Menguji retikel

  1. Klik File > Build And Run... untuk menguji perubahan Anda.
  2. Saat Anda mengarahkan perangkat ke bidang, Anda akan melihat reticle mengikuti gerakan kamera Anda.

Membuat mobil

Pemain akan mengontrol mobil mainan yang akan melaju ke lokasi retikula. Model dan perilaku untuk mobil ini disediakan dalam Paket Pemula.

Menambahkan CarManager ke adegan Anda

  1. Di Hierarchy, buat GameObject kosong baru.
  2. Ganti namanya menjadi Car Spawner.
  3. Pilih objek yang Anda buat. Di panel Hierarchy, klik Add Component untuk menambahkan komponen CarManager.
  4. Siapkan dependensi CarManager dengan mengklik pemilih untuk setiap kolom:
    • Prefab Mobil: Di Aset, pilih Prefab Mobil.
    • Reticle: Di Scene, pilih Reticle Prefab.
    • Pengelola Permukaan Jalan: Di Scene, pilih Driving Surface Manager.

Perilaku CarManager ini memunculkan mobil mainan di bidang tempat retikel berada. Jika Anda mau, lihat skrip CarBehaviour untuk mempelajari cara memprogram mobil.

Uji jalan

  1. Klik File > Build And Run untuk menguji perubahan Anda.
  2. Saat Anda mengetuk bidang, Anda akan melihat mobil kecil muncul di lokasi tersebut. Mobil ini akan mengikuti retikel.

Menambahkan elemen game

Sekarang setelah pemain dapat mengontrol entitas dalam adegan, beri pemain tujuan untuk dikendarai.

  1. Buat GameObject kosong baru di Hierarki.
  2. Ganti namanya menjadi Package Spawner.
  3. Pilih objek yang Anda buat. Di panel Hierarchy, klik Add Component untuk menambahkan komponen PackageSpawner ke dalamnya.
  4. Siapkan dependensi PackageSpawner dengan mengklik pemilih untuk setiap kolom:
    • Prefab Paket: Di Aset, pilih Prefab Paket.
    • Driving Surface Manager Di Scene, pilih Driving Surface Manager.

Perilaku PackageSpawner ini akan memunculkan paket baru di lokasi acak pada ARPlane yang terkunci jika belum ada paket.

Menguji game

  1. Klik File > Build And Run untuk menguji perubahan Anda. 2, Setelah Anda membuat mobil, paket akan muncul.
  2. Kendarai mobil Anda ke lokasi paket.
  3. Yang baru akan muncul di lokasi acak.

5. Menyiapkan Estimasi Pencahayaan

Setelah game dasar selesai, tambahkan sentuhan realistis ke adegan AR Anda. Pada langkah ini, Anda akan menggunakan Lighting Estimation API ARCore untuk mendeteksi pencahayaan yang ada di dunia nyata berdasarkan frame kamera yang masuk. Informasi ini akan digunakan untuk menyesuaikan pencahayaan adegan agar sesuai dengan pencahayaan dunia nyata.

Mengaktifkan Estimasi Pencahayaan

  1. Di Hierarchy, luaskan AR Session Origin dan pilih objek AR Camera.
  2. Di Inspector, luaskan skrip AR Camera Manager.
  3. Ubah kolom Estimasi Pencahayaan menjadi Semua.

Mengubah cahaya terarah

  1. Di Hierarchy, pilih objek Directional Light.
  2. Tambahkan komponen LightEstimation ke dalamnya. Komponen dari Paket Starter ini menyediakan beberapa boilerplate untuk berlangganan perubahan pencahayaan.
  3. Dalam fungsi FrameReceived(), tambahkan:
ARLightEstimationData lightEstimation = args.lightEstimation;

if (lightEstimation.averageBrightness.HasValue)
    Light.intensity = lightEstimation.averageBrightness.Value;

if (lightEstimation.averageColorTemperature.HasValue)
    Light.colorTemperature = lightEstimation.averageColorTemperature.Value;

if (lightEstimation.colorCorrection.HasValue)
    Light.color = lightEstimation.colorCorrection.Value;

if (lightEstimation.mainLightDirection.HasValue)
    Light.transform.rotation = Quaternion.LookRotation(lightEstimation.mainLightDirection.Value);

if (lightEstimation.mainLightColor.HasValue)
    Light.color = lightEstimation.mainLightColor.Value;

if (lightEstimation.mainLightIntensityLumens.HasValue)
    Light.intensity = lightEstimation.averageMainLightBrightness.Value;

if (lightEstimation.ambientSphericalHarmonics.HasValue)
{
    RenderSettings.ambientMode = AmbientMode.Skybox;
    RenderSettings.ambientProbe = lightEstimation.ambientSphericalHarmonics.Value;
}

Menguji perubahan Anda

  1. Klik File > Build And Run untuk menguji perubahan Anda.
  2. Saat melihat objek dalam adegan, Anda mungkin melihat bahwa objek tersebut berwarna bergantung pada pencahayaan lingkungan.
  3. Jika memungkinkan, coba ubah pencahayaan Anda. Misalnya, coba matikan lampu di ruangan tempat Anda berada. Anda akan melihat pencahayaan pada objek beradaptasi dengan perubahan pencahayaan di dunia nyata.

6. Rangkuman

Selamat! Anda telah mencapai akhir codelab ini tentang Unity AR Foundation.

Yang telah Anda pelajari

  • Cara menyiapkan project dasar menggunakan AR Foundation Unity dan Universal Rendering Pipeline.
  • Cara menggunakan ARPlaneManager untuk berlangganan pesawat baru.
  • Cara menggunakan Raycast untuk menemukan persimpangan dengan geometri virtual.
  • Cara menggunakan ARLightEstimationData untuk menerangi adegan Anda.

Langkah berikutnya

Tugas bonus

Jika Anda ingin mengembangkan game yang telah Anda buat di sini, berikut beberapa ide yang dapat Anda lakukan:

  • Tambahkan penghitung skor ke game Anda dengan mengubah TextMeshPro saat PackageManager memunculkan paket baru.
  • Lihat informasi performa saat game Anda berjalan dengan mengaktifkan Overlay Performa.
  • Gunakan Persistent Raycasts untuk menempatkan objek baru di adegan Anda terlebih dahulu. Saat bidang terdeteksi di area tersebut, objek akan diperbarui untuk menyesuaikan bidang tersebut.