Advertisement
  1. Code
  2. Augmented Reality

Membuat Pokemon Go Style Augmented Reality Game Dengan Vuforia: Sasaran Gambar

by
Read Time:19 minsLanguages:
This post is part of a series called Create a Pokémon GO Style Augmented Reality Game With Vuforia.
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Part 2
Tips and Tricks for Augmented Reality With Unity and Vuforia

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Dalam tutorial ini kita akan menyelam kembali ke perpustakaan Vuforia Augmented Reality (AR), menjelajahi salah satu sumber daya yang paling menarik -  Image Target. Kita akan memperluas permainan Shoot the Cubes yang kita buat di pelajaran sebelumnya, menambahkan level baru dimana pemain harus mempertahankan basis mereka dari menyerang kubus.

This Tutorial ini bisa diselesaikan sendiri, walaupun jika anda ingin pengenalan AR dengan Vuforia dan Unity3D, lihatlah posting sebelumnya di seri ini.

Sasaran gambar

Setiap jenis gambar bisa jadi Vuforia   Image Target. Namun, semakin detail dan rumit gambarnya, semakin baik ia akan dikenali oleh algoritma.  

Banyak faktor akan menjadi bagian dari penghitungan pengenalan, namun pada dasarnya gambar harus memiliki tingkat kontras, resolusi, dan elemen pembeda yang wajar.  Foto langit biru tidak akan bekerja dengan baik, tapi gambar rumput akan bekerja dengan anggun.  Sasaran Gambar dapat dikirimkan bersama aplikasi, diupload ke aplikasi melalui cloud, atau langsung dibuat di app oleh pengguna.

Menambahkan Target

Mari kita mulai dengan menambahkan sebuah elemen ImageTarget untuk proyek Unity kita.  

Pertama, download aset kursus dari tombol di sidebar. Kemudian, di proyek Unity anda, buatlah sebuah scene baru yang disebut   DefendTheBase: di Proyek jendela, pilih folder Scenes dan klik   Create Scene.   Sekarang buka scene tersebut dan hapus semua objek scene default dari hirarki.

Selanjutnya kita akan menambahkan cahaya dan kamera. Klik  Add >  Light Directional Light untuk menambahkan cahaya arah. Pilih lampu dan setingan baru ini  Soft Shadow  sebagai pilihan Shadow Type.  

Setelah itu, seret dan jatuhkan sebuah objek ARCamera  dari   Vuforia  Prwfabs.  Pilih ARCamera objek dan di panel inspektur,   atur  App License Key  yang dibuat di halaman pengembang Vuforia (lihat   tutorial pertama untuk petunjuk). Pilih DEVICE_TRACKING Untuk World Center Mod.

Akhirnya, seret dan jatuhkan ImageTarget ke hirarki dari Vuforia Prefabs.

Sekarang kita harus menambahkan Database Vuforia. Pertama, navigasikan ke   https://developer.vuforia.com/target-manager . Klik  Tambahkan Database  dan pilih nama.

Ada tiga jenis Database yang bisa dipilih:

  1. Device: Database disimpan di perangkat dan semua target diperbarui secara lokal.
  2. Cloud: database pada server Vuforia.
  3. VuMark: database eksklusif untuk target VuMark. Hal ini juga disimpan pada perangkat.

Dalam hal ini, pilih Device pilihan dan klik Create.

Pilih database baru sehingga kita bisa mulai menambahkan target untuk itu. Sekarang saatnya menambahkan target ke database. Untuk saat ini, kita hanya akan menggunakan pilihan Gambar tunggal.

Arahkan ke file download sebelumnya, pilih   ImageTarget1, dan atur Lebar menajdi 1   dan klik  Add. (Catatan: Jika anda ingin membuat Image Target sendiri, pertama baca  Petunjuk.)

Vuforia DatabaseVuforia DatabaseVuforia Database

Sekarang anda bisa mendownload database, pilih Editor Unity sebagai peron yang terpilih. Buka file dan pilih semua elemen yang akan diimpor. Kita juga harus mempersiapkan secene Unity kita untuk mengenali ImageTarget dengan database yang kita buat.

Di editor Unity, klik objek ImageTarget. Pertama, temukan dan kembangkan  Image Target Behavior di inspektur objek. Pilih Type dari  Predefined.  Pilih target gambar yang telah kita buat sebelumnya untuk Database. Akhirnya, pastikan bahwa pilihan Enable Extended Tracking dan Enable Smart Terrain dinonaktifkan.

Image Target settingsImage Target settingsImage Target settings

ImageTarget prefab terbuat dari serangkaian komponen, termasuk beberapa skrip seperti Image Target BehaviorTurn Off Behavior, dan Default Tracker Event Handler. Jika anda ingin memahami secara mendalam bagaimana sistem ini bekerja, baca skrip tersebut dan cobalah untuk memahami hubungan mereka terhadap komponen lainnya  

Untuk tutorial ini, kita tidak akan menggali terlalu dalam. Kita hanya perlu berkonsentrasi pada   Default Tracker Event Handler, yang menerima panggilan saat status pelacakan target gambar mengalami perubahan.  Jadi mari kita gunakan skrip ini sebagai dasar untuk membuat perilaku skrip kita sendiri.

Buat salinan naskah ini yang bisa kita perpanjang. Pilih dulu  Standar Tracker Event Handler, klik pada pilihan dan pilih  Mengedit Script.  Sekarang, buat salinan naskahnya. Jika anda menggunakan MonoDevelop, klik File Save As  dan simpan sebagai   ImageTargetBehavior, simpan ke dalam folder Scripts.

Skrip TargetBehaviorScript

Kita tidak akan membutuhkan namespace Vuforia dalam naskah kita. Hapus garis “namespace Vuforia” dan kurung. Itu berarti kita perlu secara eksplisit referensi   Vuforia namespace saat kita ingin mengakses kelasnya:   

Metode yang paling penting di kelas ini adalah metode OnTrackableStateChanged yang menerima panggilan saat target gambar ditemukan atau hilang oleh perangkat kamera.  Menurut status target, ia memanggil   OnTrackingFound or OnTrackingLost, dan kita harus mengedit metode mereka juga. Tapi pertama, mari kita pikirkan bagaimana kita menginginkan target gambar   berperilaku.  

Dalam game ini, pengguna akan mempertahankan basis yang muncul pada target gambar. Mari pertimbangkan mekanika permainan berikut ini:

  • Begitu target dikenali oleh sistem, markas muncul dan musuh mulai bertelur dan terbang menuju markas dengan gaya kamikaze.
  • Setiap kali musuh menyerang markas, markas akan menerima beberapa kerusakan dan musuh akan hancur.
  • Untuk memenangkan permainan, pengguna harus menembak dan menghancurkan semua musuh sebelum markas hancur.
  • Jika target gambar hilang (tidak lagi terlihat dari kamera perangkat), game akan memulai penghitung waktu mundur. Jika timer sampai ke nol, permainan hilang. Sementara targetnya hilang, semua musuh akan berhenti maju menuju markas.

Jadi kita harus menyesuaikan mekanika permainan di atas apa yang kita bangun di tutorial terakhir. Kita akan membuat logika pemijahan musuh di bagian selanjutnya dengan sebuah objek kosong bernama   _SpawnController, menggunakan logika yang sama diterapkan dalam bagian pertama dari permainan.

Untuk saat ini, mari kita lihat logika pencarian yang ditemukan.

Kembali di editor Unity, kita bisa membuat objek dasar yang akan dikembangkan oleh spawn controller.

Pertama, di objek ImageTarget , nonaktifkan skrip Default Trackable Event Handler.

Selanjutnya, klik Add Component dan pilih  Target Behavior Script. Dari Hirarki panel, klik kanan pada ImageTarget dan buat kubus baru bernama "Base". Kubus ini harus dimasukkan ke dalam  objek ImageTarget.

Pastikan bahwa Base mengaktifkan Box Collider dan Mesh Renderer.   

Opsional, anda juga bisa memasukkan objek Pesawat di dalam  ImageTarget  menggunakan ImageTarget  yang diajukan sebelumnya di Vuforia sebagai tekstur. Hal ini akan menciptakan efek yang menarik, memproyeksikan bayangan dari sasaran dan menciptakan pengalaman yang lebih kaya. 

Hierarchy and Image Target final settingsHierarchy and Image Target final settingsHierarchy and Image Target final settings

Mengadaptasi SpawnScript

Sekarang kita akan menyesuaikan   _SpawnController yang digunakan dalam tutorial terakhir. Simpan scene saat ini dan buka  ShootTheCubesMain dari tutorial terakhir.  Di dalam Hirarki  panel, pilih   _SpawnController dan seret ke Prefabs folder untuk membuatnya Unity prefab.

Simpan scene baru ini dan buka kembali   DefendTheBase.  Seret _SpawnController dari folder prefabs ke Hirarki panel.  Dengan _SpawnController yang dipilih, klik Tambahkan Tag  pada panel Inspector. Namai tag baru   _SpawnController  dan terapkan pada objek.  

Di jendela Project, pilih elemen Cube dalam folder Prefab dan atur Tag nya kembali pada inspektur, untuk 'Enemy'. 

Set Cubes tag to EnemySet Cubes tag to EnemySet Cubes tag to Enemy

Akhirnya, buka folder Scripts dan buka SpawnScript. Kita perlu membuat skrip ini menyesuaikan diri dengan scene yang dimuat.

Selanjutnya, kita perlu membuat dua metode umum untuk menerima panggilan dari   TargetBehaviorScript ketika target ditemukan atau hilang: 

  •  BaseOn (Vector3 basePosition) akan dipanggil saat target ditemukan oleh kamera dan objek Base ditampilkan. Ia akan mengubah posisi pemijahan, mulai prosesnya, dan informasikan semua kubus yang sebelumnya ditambahkan ke panggung bahwa base itu terlihat.

  •  Metode BaseOff() akan digunakan saat target hilang. Metode ini akan menghentikan proses pementasan dan menginformasikan semua elemen kubus bahwa basisnya hilang.  

SetPosition (System.Nullable pos) menggunakan posisi target saat ini untuk memodifikasi objek x, y, dan sumbu z, dan juga dapat menerima nilai null saat scene dimuat  merupakan ShootTheCubesMain.

InformBaseOnToCubes() dan InformBaseOffToCubes() bertanggung jawab untuk menginformasikan semua tahapan kubus dari status dasar saat ini.

Metode SpawnLoop() dan SpawnElement() menggunakan logika hampir sama dengan tutorial terakhir.

Menciptakan Musuh

Sekarang kita perlu membuat beberapa musuh. Kita akan menggunakan objek kubus yang kita buat di tutorial terakhir, membuat beberapa modifikasi pada skripnya.

Dalam folder Prefabs,  tambahkan objek kubus ke hirarki. Kemudian pilih objek dan edit CubeBehaviorScript.

Kita akan menyimpan logika yang hampir sama dalam skrip ini, namun dengan perbedaan berikut:

  • Kubus akan mengejar Base saat target ditemukan oleh kamera.
  • Ketika kubus menghantam Base, ia akan menghancurkan dirinya sendiri dan memberikan beberapa kerusakan pada Base.
  • Script perlu mengetahui nama scene yang dimuat dan menyesuaikan diri sesuai dengan itu.  

Jika nama scene itu adalah DefendTheBase, ia harus menemukan objek Base dan mulai bergerak ke arah itu.

CubeSettings() juga perlu beradaptasi sesuai dengan scene yang terisi. Kubus   hanya mengorbit pada sumbu y untuk scene DefendTheBase.

Kita akan menambahkan beberapa logika baru ke metode RotateCube(). Objek kubus akan berputar mengelilingi Base ketika sasaran terlihat.  Bila targetnya tidak terlihat, mereka akan terus berputar di sekitar kamera, menggunakan logika yang sama seperti pada tutorial terakhir.

Untuk memindahkan objek ke arah base, kita harus memeriksa dulu apakah basenya ada, dan kemudian menerapkan langkah-langkah posisi ke objek.

Metode DestroyCube() sama seperti sebelumnya, tapi sekarang kita akan menambahkan metode baru-metode TargetHit(GameObject) -yang akan disebut saat base diserang. Perhatikan bahwa BaseHealthScript yang dirujuk di   TargetHit() belum diciptakan.

Akhirnya, kami akan menambahkan metode umum untuk dipanggil saat kubus terkena hantaman, saat bertabrakan dengan base, atau saat status base berubah.

Mengontrol Kesehatan Base

Musuh sedang dipentaskan dan terbang ke markas, tapi tidak menimbulkan kerusakan saat bertabrakan-tidak ke base maupun musuh. Kita perlu membuat skrip untuk merespon tabrakan dan juga tambahkan bilah kesehatan ke layar, sehingga pengguna tahu seberapa baik kinerjanya.

Mari mulai menambahkan baris kesehatan. Dalam panel Hirarki  di editor Unity, klik   Create  >  UI  Slider.  Sebuah elemen Kanvas baru akan ditambahkan ke hirarki. Ia berisi elemen UI, termasuk Slider baru. Perluas Kanvas dan pilih Slider.

Ubah nama elemen slider menjadi UIHealth. Dalam panel Inspektur, luaskan Transformasi Rect dan atur Lebar menjadi 400 dan Tinggi 40. Atur Pos X menjadi -220,  Pos Y  30, dan Pos Z 0.

Sekarang buka slider script dalam hirarki. Batalkan pilihan pilihan Interaktif. Untuk Target Grafis, klik pada 'titik' kecil di sisi kanan dan pilih gambar Latar Belakang.  

  • Atur Nilai Min menjadi dan Nilai maks 100.
  • Pilih Nomor Utuh.
  • Atur Nilai menjadi 100
UIHealth SettingsUIHealth SettingsUIHealth Settings

Sekarang, luaskan panel Slider untuk mengekspos elemen anak-anaknya:  latar belakangFill Area, dan Handle Slide Area.

  • Hapus   Handle Slide Area.
  • Pilih Latar Belakang dan atur Warna ke warna hijau gelap seperti #2F568FF.
  • Perluas Fill Area dan pilih Mengisi  objek dan mengatur warnanya #7FEA89FF.

Begini Game Window sebaiknya terlihat dengan baris kesehatan.

Game window with health barGame window with health barGame window with health bar

Script Kesehatan Base

Kodenya sangat sederhana; ia hanya mengurangi kerusakan yang dilakukan oleh musuh dari jumlah total kesehatan dasar.  Begitu kesehatan menjadi nol, pemain kehilangan permainan.Ini juga akan menambahkan animasi rotasi ke Base. Buat script C # baru yang disebut  MyBase.

Sekarang kita perlu menambahkan dan mengkonfigurasi script.  

Pilih Base dalam hirarki, klik Add Component, dan tambahkan Audio Source Sekarang seret  MyBase  ke elemen Base dan, di  panel Inspektur, luaskan   MyBase.  Pilih efek suara untuk ledakan dan hantaman. Saya sudah menggunakan   klip explosion yang digunakan di tutorial terakhir, tapi jangan ragu untuk menambahkan punya anda sendiri. Akhirnya, di Health Slider, pilih elemen UISlider.

Base settingsBase settingsBase settings

Mempertahankan Base

Pengalaman permainan baru kita hampir selesai. Kita hanya perlu menembak beberapa laser untuk mulai mempertahankan base kita. Mari membuat skrip untuk laser!  

Pertama seret _PlayerController dari folder Prefab ke hirarki. Perluas   _PlayerController dan pilih _LaserController. Di panel Inspektur, temukan Laser Script  dan klik Edit.

Satu-satunya hal yang perlu kita ubah dalam skrip ini adalah posisi laser.

Mencoba gamenya

Itu merupakan pekerjaan yang banyak, tapi sekarang sudah waktunya untuk memainkan gamenya! Cetak gambar target dan coba menjalankan permainan anda di ponsel atau tablet anda. Bersenang-senanglah dengan itu dan lihat apakah anda bisa menemukan beberapa cara untuk meningkatkan permainan!  

Pada titik ini, anda memiliki pemahaman yang baik tentang bagaimana sistem Vuforia bekerja dan bagaimana menggunakannya dengan Unity. Saya berharap bahwa anda telah menikmati perjalanan ini seperti yang saya rasakan. Sampai jumpa lagi!

Untuk mempelajari lebih lanjut tentang Augmented Reality dengan Vuforia and Unity, lihat kursus video kami di Envato Tuts +!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.