การใช้ V-pad
ต้องการ UI ควบคุมเพื่อจัดการตัวละครภายในโลก
ZEPETO World สร้าง UI ควบคุมที่เรียกว่า V-pad ในระหว่างการทำงานผ่าน ZEPETOPlayers
V-pad สามารถทำฟังก์ชันต่อไปนี้ขึ้นอยู่กับพื้นที่ที่ผู้เล่นสัมผัสบนหน้าจอ:

1) หน้าจอสัมผัส: เมื่อคุณสัมผัสพื้นที่แผ่นสัมผัสและเลื่อนขึ้น ลง ซ้าย หรือ ขวา ผู้เล่นท้องถิ่นจะเคลื่อนที่ตามแกน XZ.
- เมื่อคุณแตะภายในพื้นที่แผ่นสัมผัส แผ่นสัมผัสจะปรากฏที่ตำแหน่งที่แตะ และจะหายไปเมื่อการสัมผัสเสร็จสิ้น.
- พื้นที่แผ่นสัมผัสเริ่มต้นมีดังนี้:
โหมดหน้าจอ | ขนาดผ้าใบ | ขนาดพื้นที่ |
---|---|---|
แนวนอน | 1334 X 750 | 600 X 450 |
แนวตั้ง | 750 X 1334 | 375 X 500 |
2) ปุ่มกระโดด: การกดปุ่มจะทำให้ผู้เล่นท้องถิ่นกระโดด ค่า高度ของการกระโดดสามารถเปลี่ยนแปลงได้ผ่าน Zepeto Players > Character > Jump Power.
👍 เคล็ดลับ พื้นที่แพดสามารถเปลี่ยนแปลงได้โดยการตั้งค่าพื้นที่ของพรีแฟบที่ลงทะเบียนใน Control ของ Zepeto Players.
เปลี่ยนขนาดของพื้นที่ตามลำดับต่อไปนี้.
- เลือกพรีแฟบเริ่มต้นที่ลงทะเบียนใน Control ของ Zepeto Players และคัดลอกพรีแฟบโดยการลากและวางลงใน Assets.
- เลือกวัตถุแพดภายในพรีแฟบที่คัดลอกมา.
- เปลี่ยนความกว้างและความสูงของคอมโพเนนต์ Rect Transform ให้เป็นขนาดที่ต้องการ.

โครงสร้างวัตถุของ V-pad ที่สร้างขึ้นในระหว่างการทำงานมีดังนี้.

- 1) แผ่น: วัตถุ UI หน้าจอที่สามารถเคลื่อนที่ตำแหน่งตัวละครได้.
- พื้นหลัง: รูปภาพพื้นหลังสีดำโปร่งแสงที่แสดงพื้นที่แผ่น.
- HandleOrigin: พื้นที่วงกลมด้านนอกของแผ่น. HandleOrigin จะเปลี่ยนตำแหน่งขึ้นอยู่กับตำแหน่งที่สัมผัส.
- Handle: พื้นที่วงกลมด้านในของแผ่น. เมื่อ Handle ถูกสัมผัสและลาก ตำแหน่งของมันจะเปลี่ยนและจะไม่ออกจากพื้นที่ HandleOrigin.
- 2) กระโดด: วัตถุปุ่มที่อนุญาตให้ตัวละครกระโดด.
- ขึ้น: วัตถุภาพกระโดดภายในปุ่มกระโดด.
เพื่อรับค่าข้อมูลจาก V-pad คุณต้องเข้าถึงส่วนประกอบ ZepetoScreenTouchpad และ ZepetoScreenButton ที่สร้างขึ้นในระหว่างการทำงานและลงทะเบียนเหตุการณ์
ส่วนประกอบ ZepetoScreenButton เป็นส่วนประกอบปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง:
เหตุการณ์ | คำอธิบาย |
---|---|
OnPointerDownEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กด V-pad |
OnDragEvent | เหตุการณ์นี้เกิดขึ้นในขณะที่ผู้ใช้กด V-pad |
OnPointerUpEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อย V-Pad |
ZepetoScreenButton คอมโพเนนต์เป็นคอมโพเนนต์ปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง:
เหตุการณ์ | คำอธิบาย |
---|---|
OnPointDownEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กดปุ่มกระโดด |
OnPointUpEvent | เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อยปุ่มกระโดด |
สคริปต์ต่อไปนี้เป็นตัวอย่างการแสดงค่าตำแหน่ง V-pad ไปยังคอนโซลเมื่อผู้ใช้กดแผ่นสัมผัส
- คำอธิบายสคริปต์
- ลงทะเบียนผู้ฟังเหตุการณ์ที่เรียกใช้ GetPadTouch() และ GetJumpTouch() ฟังก์ชันเมื่อผู้เล่นท้องถิ่นถูกเพิ่มลงในฉาก.
- ฟังก์ชัน GetPadTouch() เป็นฟังก์ชันที่ประมวลผลเหตุการณ์สัมผัสที่เกิดขึ้นบนทัชแพด.
- ใช้ Object.FindObjectOfType<ZepetoScreenTouchpad>() เพื่อค้นหาออบเจ็กต์ ZepetoScreenTouchpad ในฉาก.
- เพิ่มผู้ฟังสำหรับ OnDragEvent. ผู้ฟังนี้จะถูกเรียกใช้เมื่อเกิดเหตุการณ์ลากบนทัชแพด.
- ภายในผู้ฟัง ตำแหน่งของที่จับสัมผัสจะถูกส่งออกไปยังคอนโซล.
- ฟังก์ชัน GetJumpTouch() เป็นฟังก์ชันที่ประมวลผลเหตุการณ์ที่เกิดจากปุ่มกระโดด.
- ใช้ Object.FindObjectOfType<ZepetoScreenButton>() เพื่อค้นหาออบเจ็กต์ ZepetoScreenButton ในฉาก.
- เพิ่มผู้ฟังสำหรับ OnPointDownEvent และ OnPointUpEvent ของปุ่มกระโดด.
- ภายใน OnPointDownEvent, จะมีการส่งออกบันทึกที่เรียกว่า Jump Button Down ทุกครั้งที่ปุ่มกระโดดถูกกด.
- ภายใน OnPointUpEvent, จะมีการส่งออกบันทึกที่เรียกว่า Jump Button Up ทุกครั้งที่ปุ่มกระโดดถูกปล่อย.
- ถ้าคุณรันมันโดยการกดปุ่มเล่น คุณจะเห็นค่าตำแหน่ง V-pad แสดงในคอนโซลล็อกทุกครั้งที่คุณกด V-pad นอกจากนี้คุณยังจะเห็นคอนโซลล็อกแสดงทุกครั้งที่คุณกดหรือปล่อยปุ่มกระโดด.


คุณสามารถควบคุม V-Pad โดยใช้ ScreenTouchPad และ ScreenButton.
คุณสามารถเปิด/ปิด V-Pad จาก UIController_TouchPad_Horizontal และ UIController_TouchPad_Vertical Prefab.
ด้านล่างคือรูปลักษณ์เมื่อ Touch Pad ถูกปิด คุณสามารถปิดปุ่มกระโดดได้ในลักษณะเดียวกัน.

คุณสามารถเพิ่มฟังก์ชันการกระโดดสองครั้งให้กับปุ่มกระโดดของ V-pad หรือใช้ฟังก์ชันปุ่มกระโดดสองครั้งที่กำหนดเอง.

เพื่อเปิดใช้งานฟีเจอร์การกระโดดสองครั้ง ให้เปิดใช้งาน Custom Parameters > Double Jump checkbox ในส่วน Character ของ ZepetoPlayers component.
- ความสูงของการกระโดดสองครั้งสามารถตั้งค่าได้โดยการปรับค่าพลังงาน

มีสามวิธีในการใช้ฟีเจอร์การกระโดดสองครั้งบน V-pad:
เมื่อใช้การกระโดดสองครั้งกับปุ่ม V-Pad ให้ตั้งค่าดังนี้
คลิกที่ UIController_TouchPad_Vertical หรือ UIController_TouchPad_Horizontal prefab คุณจะถูกย้ายไปยังโฟลเดอร์ที่ prefab ดั้งเดิมตั้งอยู่ภายใต้โฟลเดอร์ Packages ในแผงโปรเจกต์

คัดลอก UIController_TouchPad_Vertical หรือ UIController_TouchPad_Horizontal prefab โดยการลากและวางลงในโฟลเดอร์ Assets

❗️ ระวัง Prefab ดั้งเดิมในโฟลเดอร์ Packages ไม่สามารถแก้ไขได้ ดังนั้นคุณต้องคัดลอกไปยังโฟลเดอร์ Assets เพื่อทำการแก้ไข หากคุณพยายามแก้ไข Prefab ดั้งเดิม จะเกิดข้อผิดพลาด Immutable Prefab ขึ้น

ดับเบิลคลิกที่ prefab UIController_TouchPad_Vertical หรือ UIController_TouchPad_Horizontal ในรายการ prefab ที่คัดลอก หรือกดปุ่ม Open Prefab ในหน้าต่าง Inspector เพื่อแก้ไข Prefab

เลือกวัตถุ Jump จากวัตถุย่อยของ Prefab

ในส่วนของปุ่มหน้าจอ Zepeto ของวัตถุ Jump ให้กดปุ่ม + ใน On Point Down Event() และลงทะเบียนเหตุการณ์ดังนี้

- On Point Down Event()
- เฉพาะเวลาทำงาน
- เลือกวัตถุ : ลงทะเบียน UIController_TouchPad_Vertical หรือ UIController_TouchPad_Horizontal.
- ฟังก์ชันเหตุการณ์ : คลิกที่ส่วน No Function และตั้งค่าเป็น UIZepetoPlayerControl > DoubleJump() ฟังก์ชัน.

หากการตั้งค่าเป็นดังต่อไปนี้ จะถือว่าประสบความสำเร็จ

สคริปต์นี้ช่วยให้ตัวละครสามารถกระโดดสองครั้งได้ตามการตอบสนองจากปุ่มกระโดดของ V-pad
คำอธิบายสคริปต์
- ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() ลงทะเบียนผู้ฟังที่ถูกเรียกใช้เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามาในเกม สิ่งนี้ใช้เพื่อกำหนดฟีเจอร์การกระโดดสองครั้งที่จะถูกเพิ่มเมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามา
- ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character ให้การเข้าถึงตัวละครของผู้เล่นท้องถิ่นObject.FindObjectOfType() ค้นหาวัตถุประเภท ZepetoScreenButton ในฉากปัจจุบันและกำหนดให้กับการกระโดด
- ScreenButton.OnPointDownEvent.AddListener() เพิ่มผู้ฟังไปยัง OnPointDownEvent ของปุ่มหน้าจอ ผู้ฟังนี้รอการสัมผัสหน้าจอหรือเหตุการณ์คลิกและเริ่มการกระโดดหรือการกระโดดสองครั้ง
- ภายในผู้ฟัง คำสั่ง if จะตรวจสอบว่าสถานะปัจจุบันของตัวละครคือ CharacterState.Jump หรือไม่ หากเป็นจริง จะดำเนินการ zepetoCharacter.DoubleJump().
หลังจากเขียนสคริปต์แล้ว ให้สร้าง GameObject ว่างในฉากและเพิ่มสคริปต์ DobuleJump.ts เป็นคอมโพเนนต์

หากคุณเลือกที่จะสร้างและใช้ปุ่มของคุณเอง โปรดเพิ่มสคริปต์ตามที่แสดงด้านล่างนี้
สคริปต์นี้เพิ่มฟังก์ชันการกระโดดและการกระโดดสองครั้งให้กับปุ่มที่ผู้ใช้กำหนด
คำอธิบายสคริปต์
- ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() ลงทะเบียนฟังก์ชันที่จะถูกเรียกใช้เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้ามาในเกม.
- this.shotButton.onClick.AddListener() เพิ่มฟังก์ชันที่จะถูกเรียกใช้เมื่อ shotButton ถูกคลิก.
- เมื่อฟังก์ชันถูกเรียกใช้ มันจะตรวจสอบว่าตัวละครอยู่ในสถานะกระโดดหรือไม่และจะทำการกระโดดหรือกระโดดสองครั้ง.
- ถ้าตัวละครอยู่ในสถานะกระโดด, this.zepetoCharacter.DoubleJump() จะถูกเรียกใช้เพื่อทำการกระโดดสองครั้ง; มิฉะนั้น, this.zepetoCharacter.Jump() จะถูกเรียกใช้เพื่อทำการกระโดด.
หลังจากเขียนสคริปต์แล้ว ให้สร้าง GameObject ว่างในฉากและเพิ่มสคริปต์ JumpButton.ts เป็นคอมโพเนนต์.
สุดท้าย ให้กำหนดปุ่มกระโดดให้กับ Shot Button ใน Inspector.

