--- title: การใช้ V-pad slug: world-sdk-guide-th/v-pad docTags: createdAt: 2024-09-02T08:34:13.135Z --- ## V-pad ต้องการ UI ควบคุมเพื่อจัดการตัวละครภายในโลก ZEPETO World สร้าง UI ควบคุมที่เรียกว่า V-pad ในระหว่างการทำงานผ่าน ZEPETOPlayers V-pad สามารถทำฟังก์ชันต่อไปนี้ขึ้นอยู่กับพื้นที่ที่ผู้เล่นสัมผัสบนหน้าจอ: ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-aWeQF-AtPfnvxRWh1BjEs-20240904-102410.png) 1\) หน้าจอสัมผัส: เมื่อคุณสัมผัสพื้นที่แผ่นสัมผัสและเลื่อนขึ้น ลง ซ้าย หรือ ขวา ผู้เล่นท้องถิ่นจะเคลื่อนที่ตามแกน XZ. - เมื่อคุณแตะภายในพื้นที่แผ่นสัมผัส แผ่นสัมผัสจะปรากฏที่ตำแหน่งที่แตะ และจะหายไปเมื่อการสัมผัสเสร็จสิ้น. - พื้นที่แผ่นสัมผัสเริ่มต้นมีดังนี้: | **โหมดหน้าจอ** | **ขนาดผ้าใบ** | **ขนาดพื้นที่** | | -------------- | ------------- | --------------- | | แนวนอน | 1334 X 750 | 600 X 450 | | แนวตั้ง | 750 X 1334 | 375 X 500 | 2\) ปุ่มกระโดด: การกดปุ่มจะทำให้ผู้เล่นท้องถิ่นกระโดด ค่า高度ของการกระโดดสามารถเปลี่ยนแปลงได้ผ่าน Zepeto Players > Character > Jump Power. :::hint{type="success"} **👍 เคล็ดลับ** พื้นที่แพดสามารถเปลี่ยนแปลงได้โดยการตั้งค่าพื้นที่ของพรีแฟบที่ลงทะเบียนใน Control ของ Zepeto Players. เปลี่ยนขนาดของพื้นที่ตามลำดับต่อไปนี้. 1. เลือกพรีแฟบเริ่มต้นที่ลงทะเบียนใน Control ของ Zepeto Players และคัดลอกพรีแฟบโดยการลากและวางลงใน Assets. 2. เลือกวัตถุแพดภายในพรีแฟบที่คัดลอกมา. 3. เปลี่ยนความกว้างและความสูงของคอมโพเนนต์ Rect Transform ให้เป็นขนาดที่ต้องการ. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-PzL43bMmADc3XusmuveLJ-20240904-102409.png) ::: โครงสร้างวัตถุของ V-pad ที่สร้างขึ้นในระหว่างการทำงานมีดังนี้. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-puYNL9Hqefz7ZyItxuF58-20240904-102409.png) - 1\) แผ่น: วัตถุ UI หน้าจอที่สามารถเคลื่อนที่ตำแหน่งตัวละครได้. - พื้นหลัง: รูปภาพพื้นหลังสีดำโปร่งแสงที่แสดงพื้นที่แผ่น. - HandleOrigin: พื้นที่วงกลมด้านนอกของแผ่น. HandleOrigin จะเปลี่ยนตำแหน่งขึ้นอยู่กับตำแหน่งที่สัมผัส. - Handle: พื้นที่วงกลมด้านในของแผ่น. เมื่อ Handle ถูกสัมผัสและลาก ตำแหน่งของมันจะเปลี่ยนและจะไม่ออกจากพื้นที่ HandleOrigin. - 2\) กระโดด: วัตถุปุ่มที่อนุญาตให้ตัวละครกระโดด. - ขึ้น: วัตถุภาพกระโดดภายในปุ่มกระโดด. ## วิธีการรับค่าข้อมูลจาก V-pad เพื่อรับค่าข้อมูลจาก V-pad คุณต้องเข้าถึงส่วนประกอบ ZepetoScreenTouchpad และ ZepetoScreenButton ที่สร้างขึ้นในระหว่างการทำงานและลงทะเบียนเหตุการณ์ ### เหตุการณ์ ZepetoScreenTouchpad ส่วนประกอบ ZepetoScreenButton เป็นส่วนประกอบปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง: | **เหตุการณ์** | **คำอธิบาย** | | ------------------ | ------------------------------------------ | | OnPointerDownEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กด V-pad | | OnDragEvent | เหตุการณ์นี้เกิดขึ้นในขณะที่ผู้ใช้กด V-pad | | OnPointerUpEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อย V-Pad | ### ZepetoScreenButton เหตุการณ์ ZepetoScreenButton คอมโพเนนต์เป็นคอมโพเนนต์ปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง: | **เหตุการณ์** | **คำอธิบาย** | | ---------------- | ---------------------------------------------- | | OnPointDownEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กดปุ่มกระโดด | | OnPointUpEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อยปุ่มกระโดด | ### สคริปต์ตัวอย่าง สคริปต์ต่อไปนี้เป็นตัวอย่างการแสดงค่าตำแหน่ง V-pad ไปยังคอนโซลเมื่อผู้ใช้กดแผ่นสัมผัส :::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() { // เพิ่มผู้ฟังสำหรับเหตุการณ์เมื่อผู้เล่นท้องถิ่นถูกเพิ่ม ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { this.GetPadTouch(); this.GetJumpTouch(); }); } GetPadTouch() { // ค้นหาอ็อบเจ็กต์ ZepetoScreenTouchpad ในฉาก const touchPad = Object.FindObjectOfType(); // เพิ่มผู้ฟังสำหรับเหตุการณ์ลากบนทัชแพด touchPad.OnDragEvent.AddListener(() => { // บันทึกตำแหน่งของมือสัมผัสเมื่อเกิดเหตุการณ์ลาก console.log(touchPad.touchHandle.transform.position); }); } GetJumpTouch() { // ค้นหาอ็อบเจ็กต์ ZepetoScreenButton ในฉาก const screenButton = Object.FindObjectOfType(); // เพิ่มผู้ฟังไปยัง OnPointDownEvent ของ screenButton // ผู้ฟังนี้บันทึก "ปุ่มกระโดดกดลง" เมื่อปุ่มถูกกด screenButton.OnPointDownEvent.AddListener(() => { console.log("ปุ่มกระโดดกดลง"); }); // เพิ่มผู้ฟังไปยัง OnPointUpEvent ของ screenButton // ผู้ฟังนี้บันทึก "ปุ่มกระโดดปล่อยขึ้น" เมื่อปุ่มถูกปล่อย screenButton.OnPointUpEvent.AddListener(() => { console.log("ปุ่มกระโดดปล่อยขึ้น"); }); } } ``` ::: - คำอธิบายสคริปต์ - ลงทะเบียนผู้ฟังเหตุการณ์ที่เรียกใช้ `GetPadTouch()` และ `GetJumpTouch()` ฟังก์ชันเมื่อผู้เล่นท้องถิ่นถูกเพิ่มลงในฉาก. - ฟังก์ชัน `GetPadTouch()` เป็นฟังก์ชันที่ประมวลผลเหตุการณ์สัมผัสที่เกิดขึ้นบนทัชแพด. - ใช้ `Object.FindObjectOfType()` เพื่อค้นหาออบเจ็กต์ ZepetoScreenTouchpad ในฉาก. - เพิ่มผู้ฟังสำหรับ `OnDragEvent`. ผู้ฟังนี้จะถูกเรียกใช้เมื่อเกิดเหตุการณ์ลากบนทัชแพด. - ภายในผู้ฟัง ตำแหน่งของที่จับสัมผัสจะถูกส่งออกไปยังคอนโซล. - ฟังก์ชัน `GetJumpTouch()` เป็นฟังก์ชันที่ประมวลผลเหตุการณ์ที่เกิดจากปุ่มกระโดด. - ใช้ `Object.FindObjectOfType()` เพื่อค้นหาออบเจ็กต์ ZepetoScreenButton ในฉาก. - เพิ่มผู้ฟังสำหรับ OnPointDownEvent และ OnPointUpEvent ของปุ่มกระโดด. - ภายใน `OnPointDownEvent`, จะมีการส่งออกบันทึกที่เรียกว่า Jump Button Down ทุกครั้งที่ปุ่มกระโดดถูกกด. - ภายใน `OnPointUpEvent`, จะมีการส่งออกบันทึกที่เรียกว่า Jump Button Up ทุกครั้งที่ปุ่มกระโดดถูกปล่อย. - ถ้าคุณรันมันโดยการกดปุ่มเล่น คุณจะเห็นค่าตำแหน่ง V-pad แสดงในคอนโซลล็อกทุกครั้งที่คุณกด V-pad นอกจากนี้คุณยังจะเห็นคอนโซลล็อกแสดงทุกครั้งที่คุณกดหรือปล่อยปุ่มกระโดด. ::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"} ## ปรับแต่ง V-Pad คุณสามารถควบคุม V-Pad โดยใช้ ScreenTouchPad และ ScreenButton. คุณสามารถเปิด/ปิด V-Pad จาก UIController\_TouchPad\_Horizontal และ UIController\_TouchPad\_Vertical Prefab. ด้านล่างคือรูปลักษณ์เมื่อ Touch Pad ถูกปิด คุณสามารถปิดปุ่มกระโดดได้ในลักษณะเดียวกัน. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZWaRZnCyLCoAs2t3HUH4K-20240904-102409.png) ## การตั้งค่าการกระโดดสองครั้ง คุณสามารถเพิ่มฟังก์ชันการกระโดดสองครั้งให้กับปุ่มกระโดดของ V-pad หรือใช้ฟังก์ชันปุ่มกระโดดสองครั้งที่กำหนดเอง. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-GFpyWVkrANXO0VPHox-q1-20240904-102410.gif) เพื่อเปิดใช้งานฟีเจอร์การกระโดดสองครั้ง ให้เปิดใช้งาน Custom Parameters > Double Jump checkbox ในส่วน Character ของ ZepetoPlayers component. - ความสูงของการกระโดดสองครั้งสามารถตั้งค่าได้โดยการปรับค่าพลังงาน ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-GBmfx3ZmDLCMgCOvVfY9v-20240904-102409.png) มีสามวิธีในการใช้ฟีเจอร์การกระโดดสองครั้งบน V-pad: ### 1) ตั้งค่าผ่าน V-Pad Prefab เมื่อใช้การกระโดดสองครั้งกับปุ่ม V-Pad ให้ตั้งค่าดังนี้ คลิกที่ UIController\_TouchPad\_Vertical หรือ UIController\_TouchPad\_Horizontal prefab คุณจะถูกย้ายไปยังโฟลเดอร์ที่ prefab ดั้งเดิมตั้งอยู่ภายใต้โฟลเดอร์ Packages ในแผงโปรเจกต์ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OPe4sz7RjAk0s4kknDCGE-20240904-102409.png) คัดลอก UIController\_TouchPad\_Vertical หรือ UIController\_TouchPad\_Horizontal prefab โดยการลากและวางลงในโฟลเดอร์ Assets ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-P74OvPYftGrGR6-MZEO9P-20240904-102409.png) :::hint{type="danger"} **❗️ ระวัง** Prefab ดั้งเดิมในโฟลเดอร์ Packages ไม่สามารถแก้ไขได้ ดังนั้นคุณต้องคัดลอกไปยังโฟลเดอร์ Assets เพื่อทำการแก้ไข หากคุณพยายามแก้ไข Prefab ดั้งเดิม จะเกิดข้อผิดพลาด 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"} ::: ดับเบิลคลิกที่ prefab UIController\_TouchPad\_Vertical หรือ UIController\_TouchPad\_Horizontal ในรายการ prefab ที่คัดลอก หรือกดปุ่ม Open Prefab ในหน้าต่าง Inspector เพื่อแก้ไข Prefab ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ghHINRGChptXnEp-Gx2t--20240904-102409.png) เลือกวัตถุ Jump จากวัตถุย่อยของ Prefab ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-I6IXmbnxEwhPHbBaiCLd4-20240904-102409.png" size="60" width="482" height="366" position="center" showCaption="false"} ในส่วนของปุ่มหน้าจอ Zepeto ของวัตถุ Jump ให้กดปุ่ม + ใน On Point Down Event() และลงทะเบียนเหตุการณ์ดังนี้ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-AI84IiVL045TcaFojqihM-20240904-102409.png) - On Point Down Event() - เฉพาะเวลาทำงาน - เลือกวัตถุ : ลงทะเบียน UIController\_TouchPad\_Vertical หรือ UIController\_TouchPad\_Horizontal. - ฟังก์ชันเหตุการณ์ : คลิกที่ส่วน No Function และตั้งค่าเป็น UIZepetoPlayerControl > `DoubleJump()` ฟังก์ชัน. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-j-suGhMY6tRffHIzK2Puc-20240904-102409.png) หากการตั้งค่าเป็นดังต่อไปนี้ จะถือว่าประสบความสำเร็จ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-WBVuAK01mslvkJTfurw94-20240904-102409.png) ### 2) การตั้งค่าด้วยสคริปต์ สคริปต์นี้ช่วยให้ตัวละครสามารถกระโดดสองครั้งได้ตามการตอบสนองจากปุ่มกระโดดของ 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() { // ฟังเมื่อผู้เล่นท้องถิ่นถูกเพิ่มและดำเนินการฟังก์ชัน lambda ที่กำหนด ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { // ดึงตัวละครของผู้เล่นท้องถิ่น const zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character; // ค้นหาวัตถุประเภท ZepetoScreenButton ในฉาก const screenButton = Object.FindObjectOfType(); // เพิ่มผู้ฟังสำหรับ OnPointDownEvent ของปุ่มหน้าจอเพื่อจัดการการกระโดด screenButton.OnPointDownEvent.AddListener(() => { // หากสถานะปัจจุบันของตัวละครคือ Jump ให้เรียกใช้การกระโดดสองครั้ง if (zepetoCharacter.CurrentState === CharacterState.Jump) { zepetoCharacter.DoubleJump(); } }); }) } } ``` คำอธิบายสคริปต์ - `ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener()` ลงทะเบียนผู้ฟังที่ถูกเรียกใช้เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามาในเกม สิ่งนี้ใช้เพื่อกำหนดฟีเจอร์การกระโดดสองครั้งที่จะถูกเพิ่มเมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามา - `ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character` ให้การเข้าถึงตัวละครของผู้เล่นท้องถิ่น`Object.FindObjectOfType()` ค้นหาวัตถุประเภท ZepetoScreenButton ในฉากปัจจุบันและกำหนดให้กับการกระโดด - `ScreenButton.OnPointDownEvent.AddListener()` เพิ่มผู้ฟังไปยัง OnPointDownEvent ของปุ่มหน้าจอ ผู้ฟังนี้รอการสัมผัสหน้าจอหรือเหตุการณ์คลิกและเริ่มการกระโดดหรือการกระโดดสองครั้ง - ภายในผู้ฟัง คำสั่ง if จะตรวจสอบว่าสถานะปัจจุบันของตัวละครคือ CharacterState.Jump หรือไม่ หากเป็นจริง จะดำเนินการ `zepetoCharacter.DoubleJump()`. หลังจากเขียนสคริปต์แล้ว ให้สร้าง GameObject ว่างในฉากและเพิ่มสคริปต์ DobuleJump.ts เป็นคอมโพเนนต์ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-EWB1cSxV1eVw6JfEN0wei-20240904-102409.png) ### 3) การตั้งค่าผ่านปุ่มที่กำหนดเอง หากคุณเลือกที่จะสร้างและใช้ปุ่มของคุณเอง โปรดเพิ่มสคริปต์ตามที่แสดงด้านล่างนี้ สคริปต์นี้เพิ่มฟังก์ชันการกระโดดและการกระโดดสองครั้งให้กับปุ่มที่ผู้ใช้กำหนด ```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() { // สร้างตัวละคร ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character; }); // เพิ่มส่วนประกอบสคริปต์ this.shotButton.onClick.AddListener(() => { if (this.zepetoCharacter.CurrentState === CharacterState.Jump) { this.zepetoCharacter.DoubleJump(); } else { this.zepetoCharacter.Jump(); } }); } } ``` คำอธิบายสคริปต์ - `ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener()` ลงทะเบียนฟังก์ชันที่จะถูกเรียกใช้เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามาในเกม. - `this.shotButton.onClick.AddListener()` เพิ่มฟังก์ชันที่จะถูกเรียกใช้เมื่อ shotButton ถูกคลิก. - เมื่อฟังก์ชันถูกเรียกใช้ มันจะตรวจสอบว่าตัวละครอยู่ในสถานะกระโดดหรือไม่และจะทำการกระโดดหรือกระโดดสองครั้ง. - ถ้าตัวละครอยู่ในสถานะกระโดด, `this.zepetoCharacter.DoubleJump()` จะถูกเรียกใช้เพื่อทำการกระโดดสองครั้ง; มิฉะนั้น, `this.zepetoCharacter.Jump()` จะถูกเรียกใช้เพื่อทำการกระโดด. หลังจากเขียนสคริปต์แล้ว ให้สร้าง GameObject ว่างในฉากและเพิ่มสคริปต์ JumpButton.ts เป็นคอมโพเนนต์. สุดท้าย ให้กำหนดปุ่มกระโดดให้กับ Shot Button ใน Inspector. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dMmQ2x_7Oke4Kw03GzV0I-20240904-102410.png)