--- title: Menggunakan V-pad slug: world-sdk-guide-id/menggunakan-v-pad docTags: createdAt: 2024-09-02T08:34:13.135Z --- ## V-pad Antarmuka kontrol diperlukan untuk memanipulasi karakter dalam dunia. ZEPETO World pada dasarnya membuat antarmuka kontrol yang disebut V-pad saat runtime melalui ZEPETOPlayers. V-pad dapat melakukan fungsi berikut tergantung pada area yang disentuh pemain di layar: ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-aWeQF-AtPfnvxRWh1BjEs-20240904-102410.png) 1\) Layar sentuh: Ketika Anda menyentuh area pad dan menggesernya ke atas, bawah, kiri, atau kanan, pemain lokal bergerak di sepanjang sumbu XZ. - Ketika Anda mengetuk di dalam area pad, touchpad muncul di lokasi yang disentuh, dan menghilang setelah aksi sentuh selesai. - Area pad default adalah sebagai berikut: | **Mode layar** | **Ukuran kanvas** | **Ukuran area** | | -------------- | ----------------- | --------------- | | Horizontal | 1334 X 750 | 600 X 450 | | Vertikal | 750 X 1334 | 375 X 500 | 2\) Tombol lompat: Menekan tombol menyebabkan pemain lokal melompat. Nilai tinggi dari lompatan dapat diubah melalui Zepeto Players > Karakter > Daya Lompat. :::hint{type="success"} **👍 Tips** Area pad dapat diubah dengan mengatur area prefab yang terdaftar di Kontrol Pemain Zepeto. Ubah ukuran area dalam urutan berikut. 1. Pilih prefab default yang terdaftar di Kontrol Pemain Zepeto dan salin prefab dengan menyeret dan menjatuhkannya ke dalam Assets. 2. Pilih objek Pad di dalam Prefab yang disalin. 3. Ubah Lebar dan Tinggi komponen Rect Transform ke ukuran yang diinginkan. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-PzL43bMmADc3XusmuveLJ-20240904-102409.png) ::: Struktur objek V-pad yang dibuat saat runtime adalah sebagai berikut. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-puYNL9Hqefz7ZyItxuF58-20240904-102409.png) - 1\) Pad: Objek UI layar yang dapat menggerakkan posisi karakter. - Latar Belakang: Gambar latar belakang hitam transparan yang menunjukkan area pad. - HandleOrigin: Area lingkaran luar dari pad. HandleOrigin mengubah posisi tergantung pada lokasi yang disentuh. - Handle: Area lingkaran dalam dari pad. Ketika Handle disentuh dan diseret, posisinya berubah dan tidak meninggalkan area HandleOrigin. - 2\) Lompat: Objek tombol yang memungkinkan karakter untuk melompat. - Atas: Objek gambar lompat di dalam tombol Lompat. ## Cara mendapatkan nilai input V-pad Untuk menerima nilai input V-pad, Anda harus mengakses komponen ZepetoScreenTouchpad dan komponen ZepetoScreenButton yang dibuat saat runtime dan mendaftarkan sebuah event. ### Event ZepetoScreenTouchpad Komponen ZepetoScreenButton adalah komponen tombol lompat karakter. Event yang dapat diakses termasuk: | **Event** | **Deskripsi** | | ------------------ | --------------------------------------------------- | | OnPointerDownEvent | Event ini terjadi ketika pengguna menekan V-pad. | | OnDragEvent | Event ini terjadi saat pengguna menekan V-pad. | | OnPointerUpEvent | Event ini terjadi ketika pengguna melepaskan V-Pad. | ### ZepetoScreenButton Event Komponen ZepetoScreenButton adalah komponen tombol loncat karakter. Acara yang dapat diakses termasuk: | **Acara** | **Deskripsi** | | ---------------- | ----------------------------------------------------------- | | OnPointDownEvent | Acara ini terjadi ketika pengguna menekan tombol loncat. | | OnPointUpEvent | Acara ini terjadi ketika pengguna melepaskan tombol loncat. | ### Contoh Skrip Skrip berikut adalah contoh untuk mengeluarkan nilai posisi V-pad ke konsol ketika pengguna menekan touchpad. :::CodeblockTabs GetVPadInput ```typescript import { Object } from 'UnityEngine'; import { ZepetoPlayers, ZepetoScreenButton, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller'; import { ZepetoScriptBehaviour } from 'ZEPETO.Script' export default class GetVPadInput extends ZepetoScriptBehaviour { Start() { // Tambahkan pendengar untuk acara ketika pemain lokal ditambahkan ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { this.GetPadTouch(); this.GetJumpTouch(); }); } GetPadTouch() { // Temukan objek ZepetoScreenTouchpad di dalam scene const touchPad = Object.FindObjectOfType(); // Tambahkan pendengar untuk acara drag pada touchpad touchPad.OnDragEvent.AddListener(() => { // Catat posisi pegangan sentuh ketika acara drag terjadi console.log(touchPad.touchHandle.transform.position); }); } GetJumpTouch() { // Temukan objek ZepetoScreenButton di dalam scene const screenButton = Object.FindObjectOfType(); // Tambahkan pendengar untuk OnPointDownEvent dari screenButton // Pendengar ini mencatat "Tombol Lompat Turun" ketika tombol ditekan screenButton.OnPointDownEvent.AddListener(() => { console.log("Tombol Lompat Turun"); }); // Tambahkan pendengar untuk OnPointUpEvent dari screenButton // Pendengar ini mencatat "Tombol Lompat Naik" ketika tombol dilepaskan screenButton.OnPointUpEvent.AddListener(() => { console.log("Tombol Lompat Naik"); }); } } ``` ::: - Deskripsi Skrip - Daftarkan pendengar acara yang memanggil `GetPadTouch()` dan `GetJumpTouch()` fungsi ketika pemain lokal ditambahkan ke dalam adegan. - Fungsi `GetPadTouch()` adalah fungsi yang memproses acara sentuh yang terjadi pada touchpad. - Gunakan `Object.FindObjectOfType()` untuk menemukan objek ZepetoScreenTouchpad dalam adegan. - Tambahkan pendengar untuk `OnDragEvent`. Pendengar ini akan aktif ketika acara drag terjadi pada touchpad. - Di dalam pendengar, lokasi pegangan sentuh akan dikeluarkan ke konsol. - Fungsi `GetJumpTouch()` adalah fungsi yang memproses acara yang terjadi dari tombol lompat. - Gunakan `Object.FindObjectOfType()` untuk menemukan objek ZepetoScreenButton dalam adegan. - Tambahkan pendengar untuk OnPointDownEvent dan OnPointUpEvent dari tombol lompat. - Di dalam `OnPointDownEvent`, sebuah log yang disebut Jump Button Down dikeluarkan setiap kali tombol lompat ditekan. - Di dalam `OnPointUpEvent`, sebuah log yang disebut Jump Button Up dikeluarkan setiap kali tombol lompat dilepaskan. - Jika Anda menjalankannya dengan menekan tombol Putar, Anda dapat melihat nilai posisi V-pad ditampilkan di log konsol setiap kali Anda menekan V-pad. Anda juga akan melihat log konsol ditampilkan setiap kali Anda menekan atau melepaskan tombol lompat. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-oG-K2Vj7dzIK0rZt4m30E-20240904-102410.gif" size="74" width="600" height="523" position="center" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-eUCWzI2PWH_E55qeF6pyb-20240904-102409.gif" size="82" width="600" height="523" position="center" showCaption="false"} ## Kustomisasi V-Pad Anda dapat mengontrol V-Pad menggunakan ScreenTouchPad dan ScreenButton. Anda dapat menghidupkan/mematikan V-Pad dari UIController\_TouchPad\_Horizontal, dan UIController\_TouchPad\_Vertical Prefab. Berikut adalah tampilan saat Touch Pad dimatikan. Anda dapat mematikan Tombol Lompatan dengan cara yang sama. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZWaRZnCyLCoAs2t3HUH4K-20240904-102409.png) ## Pengaturan Lompatan Ganda Anda dapat menambahkan fungsi lompatan ganda ke tombol lompatan V-pad atau menerapkan fungsi tombol lompatan ganda kustom. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-GFpyWVkrANXO0VPHox-q1-20240904-102410.gif) Untuk mengaktifkan fitur lompatan ganda, aktifkan kotak centang Parameter Kustom > Lompatan Ganda di bagian Karakter dari komponen ZepetoPlayers. - Tinggi dari lompatan ganda dapat diatur dengan menyesuaikan nilai Daya. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-GBmfx3ZmDLCMgCOvVfY9v-20240904-102409.png) Ada tiga cara untuk menggunakan fitur lompatan ganda pada V-pad: ### 1) Pengaturan melalui Prefab V-Pad Saat menggunakan Lompatan Ganda dengan Tombol V-Pad, atur sebagai berikut. Klik prefab UIController\_TouchPad\_Vertical atau UIController\_TouchPad\_Horizontal. Anda akan dipindahkan ke folder tempat prefab asli berada di bawah folder Packages di panel Proyek. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OPe4sz7RjAk0s4kknDCGE-20240904-102409.png) Salin prefab UIController\_TouchPad\_Vertical atau UIController\_TouchPad\_Horizontal dengan menyeret dan menjatuhkannya ke dalam folder Assets. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-P74OvPYftGrGR6-MZEO9P-20240904-102409.png) :::hint{type="danger"} **❗️ Peringatan** Prefab asli di folder Packages tidak dapat dimodifikasi, jadi Anda harus menyalin salinan ke folder Assets untuk memodifikasinya. Jika Anda mencoba memodifikasi Prefab asli, akan terjadi kesalahan Immutable Prefab. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-IFEna9I6kZ5ltiW4OGxTe-20240904-102409.png" size="66" width="524" height="470" position="center" showCaption="false"} ::: Klik dua kali pada prefab UIController\_TouchPad\_Vertical atau UIController\_TouchPad\_Horizontal di item Prefab yang disalin atau tekan tombol Buka Prefab di jendela Inspector untuk mengedit Prefab. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ghHINRGChptXnEp-Gx2t--20240904-102409.png) Pilih objek Jump dari sub-objek Prefab. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-I6IXmbnxEwhPHbBaiCLd4-20240904-102409.png" size="60" width="482" height="366" position="center" showCaption="false"} Di komponen Tombol Layar Zepeto dari objek Jump, tekan tombol + di On Point Down Event() dan daftarkan sebuah acara sebagai berikut. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-AI84IiVL045TcaFojqihM-20240904-102409.png) - On Point Down Event() - Hanya Runtime - Pilih Objek : Daftarkan UIController\_TouchPad\_Vertical atau UIController\_TouchPad\_Horizontal. - Fungsi Acara : Klik bagian No Function dan atur ke UIZepetoPlayerControl > `DoubleJump()` fungsi. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-j-suGhMY6tRffHIzK2Puc-20240904-102409.png) Jika pengaturannya sebagai berikut, itu berhasil. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-WBVuAK01mslvkJTfurw94-20240904-102409.png) ### 2) Pengaturan menggunakan skrip Skrip ini memungkinkan karakter untuk melakukan lompatan ganda sebagai respons terhadap input dari tombol lompat V-pad. ```typescript import { ZepetoScriptBehaviour } from 'ZEPETO.Script'; import { Object } from 'UnityEngine'; import { ZepetoScreenButton, CharacterState, ZepetoPlayers } from 'ZEPETO.Character.Controller'; export default class DobuleJump extends ZepetoScriptBehaviour { Start() { // Dengarkan ketika pemain lokal ditambahkan dan jalankan fungsi lambda yang diberikan ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { // Ambil karakter pemain lokal const zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character; // Temukan objek tipe ZepetoScreenButton di scene const screenButton = Object.FindObjectOfType(); // Tambahkan pendengar untuk OnPointDownEvent dari tombol layar untuk menangani aksi lompatan screenButton.OnPointDownEvent.AddListener(() => { // Jika keadaan karakter saat ini adalah Jump, aktifkan lompatan ganda if (zepetoCharacter.CurrentState === CharacterState.Jump) { zepetoCharacter.DoubleJump(); } }); }) } } ``` Deskripsi skrip - `ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener()` mendaftar pendengar yang dipicu ketika pemain lokal ditambahkan ke permainan. Ini berfungsi untuk mengonfigurasi fitur lompatan ganda yang akan ditambahkan saat pemain lokal ditambahkan. - `ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character` memberikan akses ke karakter pemain lokal. `Object.FindObjectOfType()` menemukan objek tipe ZepetoScreenButton di scene saat ini dan menetapkannya untuk aksi lompatan. - `ScreenButton.OnPointDownEvent.AddListener()` menambahkan pendengar ke OnPointDownEvent tombol layar. Pendengar ini menunggu baik sentuhan layar atau klik dan memulai aksi lompatan atau lompatan ganda. - Di dalam pendengar, pernyataan if memeriksa apakah keadaan karakter saat ini adalah CharacterState.Jump. Jika benar, itu mengeksekusi `zepetoCharacter.DoubleJump()`. Setelah menulis skrip, buat GameObject kosong di scene dan tambahkan skrip DobuleJump.ts sebagai komponen. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-EWB1cSxV1eVw6JfEN0wei-20240904-102409.png) ### 3) Pengaturan melalui Tombol Kustom Jika Anda memilih untuk membuat dan menggunakan tombol Anda sendiri, silakan tambahkan skrip seperti yang ditunjukkan di bawah ini. Skrip ini menambahkan fungsi lompatan dan lompatan ganda ke tombol yang ditentukan oleh pengguna. ```typescript import { ZepetoScriptBehaviour } from 'ZEPETO.Script'; import { Button } from 'UnityEngine.UI'; import { CharacterState, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller'; export default class JumpButton extends ZepetoScriptBehaviour { public shotButton: Button; private zepetoCharacter: ZepetoCharacter; Start() { // Buat karakter ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character; }); // Tambahkan komponen skrip this.shotButton.onClick.AddListener(() => { if (this.zepetoCharacter.CurrentState === CharacterState.Jump) { this.zepetoCharacter.DoubleJump(); } else { this.zepetoCharacter.Jump(); } }); } } ``` Deskripsi skrip - `ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener()` mendaftarkan fungsi yang akan dijalankan ketika pemain lokal ditambahkan ke dalam permainan. - `this.shotButton.onClick.AddListener()` menambahkan fungsi yang akan dijalankan ketika shotButton diklik. - Ketika fungsi dipicu, ia memeriksa apakah keadaan karakter saat ini adalah keadaan melompat dan menjalankan lompatan atau lompatan ganda. - Jika karakter berada dalam keadaan melompat, `this.zepetoCharacter.DoubleJump()` dipanggil untuk melakukan lompatan ganda; jika tidak, `this.zepetoCharacter.Jump()` dipanggil untuk melakukan lompatan. Setelah menulis skrip, buat GameObject kosong di dalam scene dan tambahkan skrip JumpButton.ts sebagai komponen. Akhirnya, tetapkan tombol lompatan ke Tombol Tembakan di Inspector. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dMmQ2x_7Oke4Kw03GzV0I-20240904-102410.png)