Membuat game AR menggunakan AR Foundation Unity

Membuat game AR menggunakan AR Foundation Unity

Tentang codelab ini

subjectTerakhir diperbarui Jun 25, 2021
account_circleDitulis oleh Dereck Bridie

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.

Dalam codelab ini, Anda akan mem-build game sederhana menggunakan AR Foundation. Tujuan dalam game ini adalah mengumpulkan paket dengan 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 jenis 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.
  • Mentransmisikan 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 paket baru.
  • Cara menggunakan Raycast untuk menemukan persimpangan dengan geometri virtual
  • Cara menggunakan ARLightEstimationData untuk menerangi tampilan.

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 didukung oleh ARCore, yang tersedia di perangkat yang mendukung 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, instal Unity 2020 LTS. Dalam codelab ini, screenshot UI Unity ditampilkan 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. Beri nama deskriptif dan lokasi yang sesuai, lalu tekan BUAT.

Menginstal 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 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 API level minimum ke 24.

Menambahkan elemen scene 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.
  • Light > Directional Light: 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 tampilan Anda.

Memverifikasi penyiapan

  1. Pastikan perangkat Anda dicolokkan dan proses debug ADB aktif.
  2. Klik File > Bangun dan Jalankan... 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 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 serta membuat, memperbarui, dan 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. Di dalam panel Inspector, klik Add Component untuk menambahkan AR Plane Manager.

  1. Konfigurasikan ARPlaneManager dengan menetapkan kolom Plane Prefab:
    1. Klik tombol di samping None untuk memunculkan jendela Select GameObject.
    2. Pilih tab Aset dan 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 memberikan 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 diperlukan konfigurasi lebih lanjut untuk komponen ini.

Menambahkan komponen DrivingSurfaceManager

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

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

Tidak diperlukan konfigurasi lebih lanjut untuk komponen ini.

Menjalankan aplikasi

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

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

4. Lakukan hit test terhadap bidang yang terdeteksi

Pada langkah sebelumnya, Anda memprogram aplikasi yang dapat mendeteksi pesawat. Bidang ini tercermin dalam tampilan game Anda. 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 ke permukaan. Untuk memberikan masukan visual yang jelas bagi lokasi yang ditetapkan, 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 di arah tampilan kamera.

Menambahkan reticle

  1. Di panel Project di dekat bagian bawah layar, buka Assets > Paket Pemula.
  2. Tempatkan Reticle Prefab ke dalam tampilan dengan menariknya ke panel Hierarki project.
  3. Pilih reticle dalam hierarki.
  4. Di inspector, klik Add Component. Tambahkan skrip ReticleBehaviour dari Paket Pemicu. 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.

Mengedit ReticleBehaviour

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

Variabel hits akan berisi ARRaycastHit yang mendeskripsikan titik pada objek pelacakan yang bersimpangan dengan ray.

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

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

Membuat 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 Hierarki, klik Tambahkan Komponen 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.
    • Driving Surface Manager: Di Scene, pilih Driving Surface Manager.

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

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 Hierarki, klik Tambahkan Komponen 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.

Menguji game

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

5. Menyiapkan Estimasi Pencahayaan

Setelah game dasar ini selesai, tambahkan sentuhan realisme 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 tampilan 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 Perkiraan Pencahayaan menjadi Semua.

Mengubah arah cahaya

  1. Di Hierarchy, pilih objek Directional Light.
  2. Tambahkan komponen LightEstimation ke dalamnya. Komponen ini dari Paket Awal 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 Anda. 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 paket baru.
  • Cara menggunakan Raycast untuk menemukan persimpangan dengan geometri virtual.
  • Cara menggunakan ARLightEstimationData untuk menerangi suasana.

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 menempel ke bidang tersebut.