BUAT DUNIAMU
Berinteraksi dengan Benda-bend...

Menerapkan Kendaraan ke Karakter ZEPETO

20min

Dengan menerapkan panduan tentang melampirkan objek ke karakter ZEPETO, Anda dapat menerapkan kendaraan seperti mobil, pesawat, hewan peliharaan, dll., seolah-olah karakter tersebut sedang mengendarainya.

📘 Silakan merujuk ke panduan berikut [Melampirkan objek ke karakter ZEPETO]



Mengatur Animator

Untuk mengubah pose karakter ZEPETO saat mengendarai kendaraan seperti yang dijelaskan di atas, Anda perlu memodifikasi Animator dan mengaturnya di bawah ZEPETOPlayers.
Untuk mengubah pose karakter ZEPETO saat mengendarai kendaraan seperti yang dijelaskan di atas, Anda perlu memodifikasi Animator dan mengaturnya di bawah ZEPETOPlayers.




1) Buat Animator Controller dengan pergi ke Project > Create > Animator Controller dan ubah namanya menjadi VehicleZepetoAnimator.

Document image




2) Di tab Animator, buat state Kosong dengan memilih Create State > Empty.

Document image




3) Ubah namanya dengan tepat di Inspector dan tetapkan klip animasi ke Motion.

Document image




  • Untuk menggunakan file klip animasi yang diinginkan, rujuk ke panduan Animasi Kustom.

📘 Silakan rujuk ke panduan berikut [Terapkan animasi kustom]



4) Seret dan jatuhkan VehicleZepetoAnimator ke ZEPETOPlayers untuk mengaturnya.

Document image


👍 Tips

  • Jika tinggi kamera perlu berubah tergantung pada ukuran kendaraan, Anda dapat mengatur nilai Camera LookOffset di ZEPETOPlayers.



Contoh Kode

1) Buat TypeScript dengan pergi ke Project > Create > ZEPETO > TypeScript dan ganti namanya menjadi RideVehicle.

2) Tulis skrip contoh seperti yang ditunjukkan di bawah ini.

  • Perhatikan bahwa nilai Transform Kendaraan dalam contoh ini harus disesuaikan agar sesuai dengan Prefab Kendaraan saat diterapkan.
TypeScript




3) Setelah menyelesaikan penulisan skrip, tambahkan skrip ke GameObject di Scene.

4) Di Inspector, tetapkan sumber prefab kendaraan dan Body Bone yang akan dilampirkan.

5) Klik tombol Play, dan Anda akan melihat karakter ZEPETO mengendarai kendaraan.

Document image




👍 Tips

  • Anda dapat membuat berbagai kendaraan hanya dengan mengubah Prefab kendaraan dan klip animasi karakter.
Document image




Contoh Perubahan Ukuran Saat Mengonsumsi Item

Berikut adalah contoh aplikasi yang menyenangkan: menerapkan konten di mana ukuran karakter berubah saat mengonsumsi item sambil mengendarai kendaraan.

1) Dalam contoh ini, kami menyiapkan dua jenis prefab dan menetapkan Tag item yang meningkat ukurannya saat dikonsumsi sebagai "Increase" dan item yang menurun ukurannya sebagai "Decrease."

2) Tambahkan Collider ke setiap item dan pastikan untuk mencentang IsTrigger.

Document image

Document image




3) Buat TypeScript dengan pergi ke Project > Create > ZEPETO > TypeScript dan ganti namanya menjadi ChangeObjectSize.

4) Tulis skrip contoh seperti yang ditunjukkan di bawah ini.

TypeScript




  • Bagian kunci dari kode adalah memodifikasi localScale untuk mengubah ukuran karakter ZEPETO saat menyentuh setiap item.
    • Silakan sesuaikan angka untuk perubahan ukuran
    • tetapi pastikan untuk menangani pengecualian agar skala tidak menjadi lebih kecil dari (1,1,1).

5) Skrip ini harus ditambahkan ke karakter ZEPETO yang dibuat saat runtime. Oleh karena itu, modifikasi skrip RideVehicle yang melampirkan kendaraan sebagai berikut.

TypeScript




  • Kode untuk menambahkan skrip ChangeObjectSize saat runtime telah ditambahkan.

6) Klik tombol Putar, dan Anda akan melihat ukuran karakter berubah setiap kali ia mengonsumsi item.

Document image




Berinteraksi dengan Kendaraan

Dengan menerapkan panduan interaksi, dimungkinkan untuk melakukan boarding kendaraan di lokasi yang diinginkan setelah berinteraksi dengannya.

📘 Silakan merujuk ke panduan berikut. [Berinteraksi dengan sebuah objek]



Pengaturan

1) Siapkan objek DockPoint dan prefab UI pada prefab kendaraan Anda dengan cara yang sama seperti panduan interaksi.

Prefab Slime dengan Pengaturan Dock Point
Prefab Slime dengan Pengaturan Dock Point




2) Di editor Unity, pastikan tombol toggle gizmo transform di bagian atas diatur ke Lokal, dan putar sehingga sumbu Z (panah biru) mengarah keluar dari objek.

Prefab Slime dengan Pengaturan Collider
Prefab Slime dengan Pengaturan Collider




3) Tambahkan komponen Collider dan centang opsi isTrigger.

4) Sesuaikan ukuran Collider ke jangkauan di mana pemain dapat berinteraksi dengan objek.

Pengaturan Tombol UI yang Selesai
Pengaturan Tombol UI yang Selesai




5) Buat objek kosong sebagai anak dari DockPoint dengan pergi ke Hierarchy > Buat Objek Kosong, dan ganti namanya menjadi IconPos.

Document image




6) Siapkan PrefIconCanvas dengan cara yang sama seperti panduan interaksi objek, dan kemudian jadikan itu prefab.

Document image




7) Langkah Tambahan: Buat Tombol Dismount

  • Buat tombol sebagai anak dari objek kendaraan dengan pergi ke Hierarchy > UI > Button, dan ganti namanya menjadi Tombol Turun.



Menambahkan Animasi Naik ke Kendaraan

Ketika karakter naik atau turun dari kendaraan, mereka memerlukan pengaturan animator yang alami untuk disesuaikan.

Panduan di bawah ini akan membantu Anda melalui pengaturan animator yang diperlukan untuk naik atau turun.

Rujuk ke panduan tentang menerapkan animasi kustom untuk menambahkan status animasi duduk ke animator kustom Anda.

📘 Silakan rujuk ke panduan berikut. [Menerapkan Animasi Kustom]



1) Klik kanan pada status animasi yang ditambahkan, klik Buat Transisi untuk membuat transisi dari Idle ke Sitting dan kembali dari Sitting ke Idle. Pilih transisi yang dibuat dan hapus centang opsi Has Exit Time.

Document image




2) Di animator kustom → Parameter → [ + ], tambahkan Kondisi Bool dan ganti namanya menjadi isRiding.

Document image




3) Untuk transisi dari status Sitting ke Idle, klik Kondisi → [ + ] dan tambahkan Kondisi isRiding dengan opsi diatur ke false.

Document image




4) Untuk transisi dari status Idle ke Sitting, klik Kondisi → [ + ] dan tambahkan Kondisi isRiding dengan opsi diatur ke true.

Document image




Skrip

Tulis skrip InteractionIcon.ts, sama seperti yang ada di panduan interaksi, yang menampilkan UI interaksi saat memasuki area pemicu dari prefab kendaraan.

Tambahkan InteractionIcon ZEPETOScript yang ditulis ke objek DockPoint, dan tetapkan Pref Icon Canvas dan Posisi Ikon di inspector.

Rujuk ke RideVehicleExample di bawah untuk contoh kode tentang cara naik kendaraan setelah berinteraksi dengan UI.

TypeScript




  • Alur skrip adalah sebagai berikut:
    • Mulai()
      • Ketika ikon diklik, this._interactionIcon dinonaktifkan, dan fungsi DoInteraction() dipanggil.
    • DoInteraction()
      • Atur nilai transisi animator untuk memainkan animasi Duduk.
      • Mulai coroutine Snap Bone() untuk mengaitkan bodyBone karakter ZEPETO ke targetTransform.
      • Gunakan fungsi this._localCharacter.StateMachine.constraintStateAnimation = true; untuk menonaktifkan transisi animator saat ini, mengunci animasi yang sedang diputar.
      • Induk objek kendaraan berubah menjadi karakter ZEPETO.
      • Tombol Get Off di kanan atas diaktifkan.
    • StopInteraction()
      • Atur nilai transisi animator untuk memainkan animasi Idle.
      • Aktifkan kembali transisi animator sehingga animasi yang sesuai diputar sesuai situasi.
      • Atur Induk objek kendaraan menjadi null.
      • Nonaktifkan tombol Get Off.
    • this.getOffBtn.onClick
      • Fungsi StopInteraction() dipanggil.
      • this._interactionIcon diaktifkan.



Tambahkan skrip RideVehicleExample yang ditulis ke DockPoint, dan tetapkan tombol Get Off dan prefab kendaraan di inspector.

Document image




[▶︎(putar)] Tekan tombol putar untuk mencoba menaiki kendaraan.

Layar hasil
Layar hasil




👍 Tips

  • Contoh di atas adalah contoh konten yang tidak dianggap untuk sinkronisasi multiplayer.
  • Untuk menerapkan sinkronisasi multiplayer, Anda perlu menyinkronkan informasi seperti kendaraan mana yang dinaiki setiap pemain, serta ukuran dan lokasi kendaraan, seperti Status Ruangan.