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 membangun game sederhana menggunakan AR Foundation. Tujuan game ini adalah mengumpulkan paket menggunakan mobil yang dapat Anda kontrol menggunakan perangkat genggam.

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

Di akhir codelab ini, game Anda akan dapat:

  • Deteksi pesawat di dunia nyata dan gambar lapangan permainan di atasnya.
  • Pancarkan sinar dari pandangan kamera dan deteksi persimpangan dengan bidang.
  • Bereaksilah terhadap kondisi pencahayaan dunia nyata untuk membuat game Anda lebih realistis.

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

Yang Anda butuhkan

2. Menyiapkan lingkungan pengembangan

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

Memastikan perangkat Anda kompatibel dengan AR

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

Menyiapkan Proses debug USB di perangkat

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.

Menginstal Unity (LTS 2020.3)

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

Membuat project baru

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

Menginstal framework yang diperlukan

AR Foundation Unity dapat ditemukan di Unity Package Manager.

  1. Buka dengan mengklik Window > Pengelola Paket.

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

Setelah selesai, Pengelola Paket Anda akan terlihat seperti ini:

Menginstal 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 awal dengan membuka Assets > Impor Paket > Custom Package... dan membuka 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 > Setelan Build.
  2. Di panel Platform, pilih Android.
  3. Jika ingin, aktifkan Development Build dan Script Debugging untuk mempertahankan informasi proses debug saat aplikasi berjalan.
  4. Klik Switch Platform.

Mengubah Setelan Project

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

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

  1. Di panel sebelah kiri, klik bagian Player.
  2. Di tab Android, pada bagian Setelan Lainnya, hapus Vulkan dari Graphics API.

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

Menambahkan elemen suasana yang diperlukan

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

  1. Hapus semua objek game di SampleScene.

  1. Menambahkan 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.
  • Ringan > Cahaya Terarah: Mode ini menyediakan sumber cahaya untuk menerangi objek game.

Hierarki Anda akan terlihat seperti ini:

  1. Luaskan AR Session Origin yang Anda buat dalam hierarki, lalu pilih objek AR Camera. Di inspector, 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 aktif.
  2. Klik File > Bangun dan Jalankan... Ini akan mengunggah aplikasi ke perangkat Anda dan memulainya saat telah dipasang.
  3. Anda akan melihat feed kamera di layar perangkat.

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

3. Mendeteksi pesawat di dunia nyata

Setelah adegan dasar disiapkan, Anda bisa mulai mengembangkan game. Pada langkah ini, Anda akan mendeteksi pesawat dan menggambarnya ke tempat kejadian.

Menambahkan komponen ARPlaneManager

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

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

  1. Konfigurasikan ARPlaneManager dengan menyetel kolom Plane Prefab:
    1. Klik tombol di samping None untuk memunculkan jendela Select GameObject.
    2. Pilih tab Assets, lalu telusuri Driving Surface Plane.

Prefab dari paket pemula ini memberikan tekstur lantai kasar yang akan digunakan sebagai dekorasi bidang.

  1. Ubah Detection Mode menjadi Horizontal. Tindakan ini akan mengonfigurasi ARPlaneManager agar 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 bernama Driving Surface Manager dipilih di panel Hierarki.
  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 helper dari Paket Pemula yang memungkinkan pemilihan ARPlane. Setelah ARPlane dipilih, semua pesawat lainnya akan disembunyikan, dan pesawat baru akan dinonaktifkan.

  1. Pastikan objek bernama Driving Surface Manager dipilih di panel Hierarki.
  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 Dan Jalankan... untuk menguji perubahan.
  2. Arahkan perangkat Anda ke permukaan horizontal dunia nyata dan gerakkan perangkat Anda untuk meningkatkan pemahaman ARCore tentang dunia.

  1. Saat ARCore mendeteksi sebuah 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 lapangan permainan.

4. Lakukan hit test terhadap bidang yang terdeteksi

Pada langkah sebelumnya, Anda telah memprogram aplikasi yang dapat mendeteksi bidang. Pesawat ini akan terlihat dalam adegan gamemu. Sekarang, Anda akan menambahkan interaktivitas dengan pesawat ini dengan membuat reticle bidik dan mobil yang akan melaju di permukaan pesawat yang terdeteksi.

Membuat reticle bidik

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

Untuk "menempel" reticle ini ke bidang AR, gunakan hit test. Hit test adalah teknik yang menghitung persimpangan saat melemparkan sinar ke arah tertentu. Anda akan menggunakan hit test untuk mendeteksi persimpangan ke arah tampilan kamera.

Menambahkan reticle

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

Edit ReticleBehaviour

Skrip ReticleBehavior akan memosisikan reticle pada bidang yang berada di tengah area tampilan 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 {i>raycast<i}. Tambahkan cuplikan berikut:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

Variabel hits akan berisi ARRaycastHit yang menjelaskan titik pada dapat dilacak yang berpotongan oleh ray.

  1. Tentukan titik menarik persimpangan dengan membuat kueri daftar hits. Prioritaskan bidang terkunci yang ada di 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 reticle

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

Buat mobil

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

Menambahkan CarManager ke suasana

  1. Di Hierarki, buat GameObject baru yang kosong.
  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:
    • Car Prefab: Di Assets, pilih Car Prefab.
    • Reticle: Di Scene, pilih Reticle Prefab.
    • Driving Surface Manager: Di Scene, pilih Driving Surface Manager.

Perilaku CarManager ini memunculkan mobil mainan di pesawat tempat reticle berada. Jika Anda mau, lihat skrip CarBehaviour untuk mempelajari cara mobil diprogram.

Uji jalan

  1. Klik File > Bangun dan Jalankan untuk menguji perubahan Anda.
  2. Saat mengetuk pesawat, Anda akan melihat mobil kecil muncul di lokasi tersebut. Mobil ini akan mengikuti reticle.

Menambahkan elemen game

Setelah pemain dapat mengontrol entitas dalam adegan, beri pemain tujuan untuk dituju.

  1. Buat GameObject baru yang kosong 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:
    • Package Prefab: Di Assets, pilih Package Prefab.
    • Driving Surface Manager Di Scene, pilih Driving Surface Manager.

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

Uji game

  1. Klik File > Bangun dan Jalankan untuk menguji perubahan Anda. 2, Setelah Anda membuat mobil, sebuah paket akan muncul.
  2. Kemudikan mobil Anda ke paketnya.
  3. Perangkat baru akan muncul di lokasi acak.

5. Menyiapkan Estimasi Pencahayaan

Setelah game dasar ini selesai, tambahkan sentuhan realisme ke adegan AR. 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 Anda agar sesuai dengan pencahayaan dunia nyata.

Aktifkan 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 Perkiraan Pencahayaan menjadi Semua.

Mengubah arah cahaya

  1. Di Hierarchy, pilih objek Directional Light.
  2. Tambahkan komponen LightEstimation ke dalamnya. Komponen dari Paket Pemula 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 > Bangun dan Jalankan untuk menguji perubahan Anda.
  2. Saat melihat objek dalam tampilan, Anda mungkin melihat objek tersebut berwarna tergantung pencahayaan lingkungan.
  3. Jika memungkinkan, coba ubah pencahayaan. Misalnya, coba matikan lampu di ruangan tempat Anda berada. Anda akan melihat pencahayaan pada objek beradaptasi dengan perubahan pada pencahayaan dunia nyata.

6. Rangkuman

Selamat! Anda telah berhasil sampai ke akhir codelab ini tentang Unity AR Foundation.

Yang telah Anda bahas

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

Langkah berikutnya

Penetapan bonus

Jika Anda ingin mengembangkan game yang telah Anda buat di sini, berikut adalah beberapa ide yang bisa Anda kejar:

  • 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 Raycast Persisten untuk menempatkan objek baru di adegan terlebih dahulu. Saat bidang terdeteksi di area tersebut, objek tersebut akan diperbarui agar pas dengan bidang tersebut.