Membuat Game AR dengan Vuforia

[Ada GIF 3D di bawah potongan]

Augmented reality (AR) tiba-tiba menjadi istilah yang sangat populer. Berkat Vuforia, pengembang dapat dengan mudah melengkapi dunia fisik dengan konten digital.

Meskipun rilis ARKit dan ARCore membantu meningkatkan popularitas augmented reality, platform lain dan SDK sudah ada. Salah satunya adalah Vuforia; dan baru-baru ini, Unity menandatangani perjanjian kemitraan dengan Vuforia dan mengintegrasikan platform AR ini ke dalam mesin permainan Unity.

Dalam tutorial ini, saya akan membuat game AR menggunakan Vuforia SDK yang terintegrasi dengan mesin Unity. Dalam prosesnya, saya akan berbicara tentang komponen utama berikut:

• Siapkan transfer data dari kamera augmented reality
• Pelacakan gambar - apa itu dan cara kerjanya
• Melampirkan Konten Digital ke Objek Fisik
• Buat interaksi khusus yang memicu tergantung pada apa yang dilihat kamera

Catatan: tutorial tentang Vuforia ini mengasumsikan bahwa Anda sudah mengetahui dasar-dasar pengembangan di Unity. Jika Anda baru mengenal Unity, lihat tutorial Memulai In Unity yang luar biasa .

Pengembangan AR-games di Unity

Ada banyak perangkat AR di pasaran, tetapi tujuan utama aplikasi AR adalah ruang seluler platform seperti iOS dan Android. Di sinilah kombinasi Unity dan Vuforia nyaman - dalam pengembangan lintas platform. Kelebihan lainnya adalah aplikasi tersebut dapat diuji di editor. Untuk ini, Anda hanya perlu webcam!

Sebelum Anda mulai, unduh versi terbaru Unity dan instal komponen Dukungan Vuforia Augmented Reality . Jika Anda menggunakan Unity Hub , Anda dapat menambahkan komponen ini ke versi Unity yang sudah diinstal.

Mulai bekerja

Sekarang Anda memiliki Unity, Vuforia, dan webcam, Anda perlu mengunduh proyek sampel ( dari sini ).

Setelah mengunduh, ekstrak file dan buka proyek Cara Membuat Game AR Menggunakan Vuforia Starter di Unity. Ketika proyek dimuat, buka adegan Starter dari folder Adegan dan lihat jendela Hierarchy:


Setelah meninjau komposisi proyek, klik tombol Play di editor untuk mengisi pesanan di permainan pizza kami.


Hebat, kita bisa bermain dengan pizza, tetapi tantangan kita yang sebenarnya adalah mengubahnya menjadi permainan AR.

Catatan: Aset UI untuk tutorial ini telah diunduh dari shareicon.net

.

Temui Vuforia Chef

Untuk melakukan ini, kita perlu membuat pizza virtual muncul pada gambar pelacak yang kita miliki di dunia nyata. Setelah menambahkan isian ke pesanan, Anda dapat "melayani" pizza secara fisik, mengeluarkannya dari visibilitas kamera ...

Tapi semuanya punya waktu. Pertama, Anda perlu mengganti Kamera Utama dengan Kamera AR . Hapus Kamera Utama dari tempat kejadian, lalu klik kanan di Hierarchy .

Kemudian tambahkan Vuforia -> AR Camera . Ini akan memunculkan jendela ini:


Klik Impor dan tunggu Paket Vuforia diimpor ke proyek, dan beberapa file akan ditambahkan.


Anda dapat mengabaikan file baru di folder Editor dan Streaming Aset . Ini hanya templat; File-file yang kita butuhkan dimasukkan dalam proyek.

Folder Vuforia berisi semua cetakan dan skrip yang digunakan oleh platform Vuforia yang akan kita gunakan.

Perlu juga menyebutkan file VuforiaConfiguration di dalam folder Resources . File ini ditambahkan karena diperlukan lisensi untuk mengembangkan aplikasi Vuforia. Namun, jika mau, Anda bisa mendapatkan lisensi pengembang gratis untuk Portal Pengembang Vuforia .

Catatan: jika proyek Anda tidak memiliki Kunci Lisensi Aplikasi, maka itu dapat ditemukan di file README. Salin baris ke bidang inspektur file VuforiaConfiguration .

Sekarang kami memiliki AR Camera di tempat kejadian, hanya ada satu hal lagi yang harus dilakukan - nyalakan Augmented Reality!

Pergi ke Edit -> Pengaturan Proyek -> Player . Gulir ke bawah ke opsi Pengaturan XR dan pastikan kotak centang Vuforia Augmented Reality yang Didukung dicentang.

Klik editor Play dan ucapkan halo pada diri Anda sendiri!


Catatan: jika Anda mengeklik permainan dan layar "Vuforia Inisialisasi Gagal" muncul, maka cobalah memulai kembali Unity. Ini adalah bug acak yang hanya muncul di beberapa sistem.

Pengantar Pengenalan Pola

Mengagumi diri sendiri memang hebat, tentu saja, tetapi bukankah kita akan membuat permainan pizza?

Secara default, Vuforia bekerja dengan Pengenalan Gambar . Pengenalan pola, juga disebut Pelacak Pengakuan atau Pelacakan Gambar, adalah proses di mana kamera mengenali gambar yang telah ditentukan dan tahu apa yang harus dilakukan dengannya, misalnya, membuat beberapa konten di atasnya. Ini berfungsi paling baik ketika gambar pelacakan entah bagaimana cocok dengan konten, misalnya, denah lantai untuk membuat rendering berfungsi dengan baik di atas gambar dengan bangunan.

Cara kerjanya: sangat penting untuk memilih gambar berkualitas baik untuk pelacakan. Saat menggunakan Vuforia, Anda dapat mengunggah gambar yang dipilih ke portal pengembang untuk memeriksa kualitas pelacakannya, dan ini harus dilakukan sebelum memulai pengembangan. Portal pengembang memberikan peringkat pada gambar, tetapi, yang lebih penting, menunjukkan "titik karakteristik" nya. Agar pelacak menjadi baik, titik karakteristik ini (titik fitur) harus didistribusikan secara padat di atas gambar dan tidak boleh ada pola berulang di dalamnya. Saat runtime, kamera mencari titik karakteristik ini untuk menghitung lokasinya relatif terhadap gambar.

Untuk tutorial ini, database gambar dan pelacakan sudah dikonfigurasi. Gambar pizza terletak di folder Bahan yang Anda unduh sebelumnya. Idealnya, cetaklah. Atau Anda dapat membukanya di beberapa perangkat digital, dan kemudian "menunjukkannya" ke kamera. Seperti apa gambarnya di Database Vuforia Tracker:


Seperti yang Anda lihat, poin karakteristik terdistribusi dengan baik. Itu juga pizza, yang nyaman!

Menambahkan Target Gambar ke Adegan

Saatnya melakukan keajaiban! Kami akan membuat pizza virtual muncul di atas pizza kami. Sekali lagi, gunakan menu Create di Hierarchy dan pilih Vuforia -> Image .

Sekarang kita memiliki GameObject Target Gambar di tempat kejadian. Lihatlah target ini di inspektur dan Anda akan melihat beberapa komponen. Yang paling penting adalah Image Target Behavior dan Default Handable Event Handler . Kami akan memeriksa yang kedua lebih terinci nanti, tetapi untuk saat ini, pastikan bahwa opsi untuk daftar turun bawah Image Target Behavior dikonfigurasi sebagai berikut:

• Basis data diatur ke RW_ItsaPizza
  
• Target Gambar ditetapkan ke PizzaClipArt

Ingat file yang ditambahkan sebelumnya ke proyek yang saya minta abaikan? Kamu menemukan mereka! Vuforia menambahkan beberapa database sampel Target Gambar sehingga kami dapat mulai mengembangkan dan menggunakannya untuk contoh, seperti yang kami gunakan, sudah ditambahkan ke materi.

Catatan: pelacak Pizza adalah satu-satunya target gambar di basis data Anda; namun, bisa ada ratusan gambar dalam satu basis data. Selain itu, mungkin ada beberapa database dalam satu aplikasi.

Sekarang kami telah mengonfigurasi AR Camera dan Image Tracker di tempat kejadian, kami memiliki semua yang Anda butuhkan agar augmented reality berfungsi! Di Editor, klik tombol Play dan letakkan gambar yang dicetak di depan kamera.


Kami mendapat pizza!

Melampirkan Objek Game ke Pelacak sebagai Obyek Anak

Pizza ini agak kecil, tetapi sangat menempel pada gambar pelacak. Anda juga dapat melihat bahwa jika Anda menghapus gambar yang dilacak, pizza akan tetap menggantung di udara.

Faktanya adalah bahwa sementara webcam dapat melihat pelacak gambar , Vuforia mampu memperbarui posisi Kamera AR di tempat kejadian. Jika Anda ingin melihat ini dalam tindakan, konfigurasikan Unity Editor sehingga kedua jendela Game dan Scene terlihat secara bersamaan, lalu pilih AR Camera dan klik Play.


Bagaimana cara membuat pizza berperilaku benar saat kamera bekerja? Pilih ImageTarget di Hierarki. Anda akan melihat bahwa skalanya pada setiap sumbu adalah 10 . Ini dikendalikan oleh komponen Image Target Behavior . Di bagian lanjutan, Anda dapat melihat bahwa parameter Lebar memiliki nilai 10 . Itu diatur ketika gambar diunggah ke situs web Pengembang Vuforia.

Petunjuk: tidakkah Anda mengerti mengapa Target Gambar disetel ke lebar 10 dalam tutorial ini? Ketika ukuran bukan merupakan faktor penting untuk aplikasi, pengaturan ke 10 memberikan kamera dengan kemungkinan peningkatan pelacakan, sambil mempertahankan posisi yang baik untuk konten antara pesawat AR Camera yang dekat dan jauh. Namun, kadang-kadang perlu bahwa augmented reality memiliki skala tertentu. Dalam hal ini, Anda perlu mengatur ukuran pelacak gambar sehingga cocok dengan pengukuran fisik saat mengunggah ke portal pengembang.

Sekarang pilih GameObject Pizza di Hierarchy . Seret ke ImageTarget untuk menjadikannya anak kecil. Skala akan berubah menjadi (X: 0.1, Y: 0.1, Z: 0.1) . Kembalikan ke nilai (X: 1, Y: 1, Z: 1) , dan juga geser Posisi hingga 0.01 sepanjang sumbu Y. Berkat ini, Pizza akan cocok dengan ImageTarget .


Tekan Mainkan lagi dan Anda akan melihat bahwa pizza ada di atas gambar, dan juga menghilang ketika gambar menghilang dari bingkai.

Menjelajahi DefaultTrackableEventHandler

Perilaku ini diambil dari DefaultTrackableEventHandler dari ImageTarget . Buka skrip dan melihatnya.

Naskahnya dikomentari dengan baik, tetapi perlu memperhatikan beberapa aspek:

• Fungsi Mulai mendaftarkan skrip ini sebagai Penangan Kejadian untuk TrackableBehaviour (dalam hal ini, ImageTargetBehaviour ).
• OnDestroy menghapus tautan ini.
• OnTrackableStateChanged adalah fungsi yang paling penting. Kode-nya memberi tahu apa yang harus terjadi ketika status pelacakan berubah.
• OnTrackingFound dan OnTrackingLost dipanggil dari OnTrackableStateChanged . Di DefaultTrackableEventHandler, mereka mengaktifkan komponen Renderer , Collider, dan Canvas dari setiap anak.

Ketika kamera mendeteksi gambar, itu tidak lagi hanya menggerakkan Kamera AR ; dia juga memesan Pizza GameObject untuk menghidupkan semua komponen Renderer -nya, dan ketika gambar menghilang dari kamera, dia lagi memerintahkan untuk mematikannya.


Cerna informasi ini untuk saat ini.

Buat tindakan pelacakan Anda sendiri

Inilah saatnya melakukan sesuatu dengan informasi ini!

Hapus komponen DefaultTrackableEventHandler dari ImageTarget . Kemudian tambahkan PizzaTrackableEventHandler , yang dapat ditemukan di folder Script . Kemudian buka PizzaTrackableEventHandler . Ini adalah tiruan dari DefaultTrackableEventHandler , tetapi kode di OnTrackingFound dan OnTrackingLost telah dihapus - Anda harus menyelesaikan masalah ini!

Mengaktifkan dan menonaktifkan komponen Renderer sangat berguna di hampir setiap aplikasi AR, jadi mari kita dapatkan kembali kode itu. Jika Anda buntu, Anda dapat menyalinnya dari DefaultTrackableEventHandler atau menemukannya di bawah spoiler di bawah ini.


Kami siap mengubah proyek ini menjadi game dalam augmented reality!

Lihatlah UI dan temukan tombol yang perlu ditekan pemain untuk menyelesaikan pizza mereka.


Seperti yang Anda lihat, ketika sebuah tombol ditekan, Event GameManager.CompleteOrder() dipanggil. Alih-alih memaksa pemain untuk menekan tombol, Anda dapat memastikan bahwa dia "menyajikan" pizza untuk menyelesaikan pesanan (memindahkan pelacak keluar dari visibilitas kamera).

Di awal PizzaTrackableEventHandler, tambahkan UnityEvent untuk menelepon saat Gambar kehilangan pelacakan.

 using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ... 

Sekarang mari kita panggil acara dalam metode OnTrackingLost :

 protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } //Trigger our event OnTrackingLostEvent.Invoke(); } 

Ini membuat PizzaTrackableEventHandler lebih fleksibel, karena sekarang kita dapat mengatur eksekusi tindakan apa pun jika pelacakan hilang. Simpan PizzaTrackableEventHandler , kembali ke Unity Editor dan tunggu kompilasi selesai. Saat berakhir, buat GameManager.CompleteOrder() dipanggil saat pelacak pizza pelacakan hilang. Terakhir, nonaktifkan atau hapus CompleteOrderButton di UI.


Simpan adegan itu, klik Mainkan dan sajikan pizza!

Ke mana harus pergi selanjutnya

Selamat, Anda telah menyelesaikan tutorialnya!

Contoh proyek dapat diunduh dari sini .

Untuk informasi lebih lanjut tentang pengembangan dengan Vuforia di Unity, lihat Perpustakaan Pengembang Vuforia atau tutorial Unity .

Jangan lupa membuat akun pengembang untuk Anda sendiri di portal Vuforia . Anda juga dapat mencoba mengunggah beberapa pelacak yang berbeda di sana untuk memeriksa bagaimana mereka dilacak.

Untuk lebih jelasnya, baca tentang tombol virtual . Situs web Vuforia memiliki bahan sampel. Periksa apakah Anda dapat membuat tombol virtual ini untuk mengganti UI di permainan pizza.

Munculkan ide baru untuk game augmented reality. Mungkin ini adalah permainan pertarungan kartu di mana makhluk melompat langsung dari kartu? Bagaimana dengan menara pertahanan, di mana Anda mengontrol helikopter tempur menggunakan telepon Anda?