การใช้ V-pad

18min
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
เพื่อรับค่าข้อมูลจาก V-pad คุณต้องเข้าถึงส่วนประกอบ ZepetoScreenTouchpad และ ZepetoScreenButton ที่สร้างขึ้นในระหว่างการทำงานและลงทะเบียนเหตุการณ์
เหตุการณ์ ZepetoScreenTouchpad
ส่วนประกอบ ZepetoScreenButton เป็นส่วนประกอบปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง:
เหตุการณ์
คำอธิบาย
OnPointerDownEvent
เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กด V-pad
OnDragEvent
เหตุการณ์นี้เกิดขึ้นในขณะที่ผู้ใช้กด V-pad
OnPointerUpEvent
เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อย V-Pad
﻿
ZepetoScreenButton เหตุการณ์
ZepetoScreenButton คอมโพเนนต์เป็นคอมโพเนนต์ปุ่มกระโดดของตัวละคร เหตุการณ์ที่เข้าถึงได้รวมถึง:
เหตุการณ์
คำอธิบาย
OnPointDownEvent
เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กดปุ่มกระโดด
OnPointUpEvent
เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อยปุ่มกระโดด
﻿
สคริปต์ตัวอย่าง
สคริปต์ต่อไปนี้เป็นตัวอย่างการแสดงค่าตำแหน่ง V-pad ไปยังคอนโซลเมื่อผู้ใช้กดแผ่นสัมผัส
GetVPadInput
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<ZepetoScreenTouchpad>();

        // เพิ่มผู้ฟังสำหรับเหตุการณ์ลากบนทัชแพด
        touchPad.OnDragEvent.AddListener(() => {
            // บันทึกตำแหน่งของมือสัมผัสเมื่อเกิดเหตุการณ์ลาก
            console.log(touchPad.touchHandle.transform.position);
        });
    }

    GetJumpTouch() {

        // ค้นหาอ็อบเจ็กต์ ZepetoScreenButton ในฉาก
        const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();

        // เพิ่มผู้ฟังไปยัง OnPointDownEvent ของ screenButton
        // ผู้ฟังนี้บันทึก "ปุ่มกระโดดกดลง" เมื่อปุ่มถูกกด
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("ปุ่มกระโดดกดลง");
        });

        // เพิ่มผู้ฟังไปยัง OnPointUpEvent ของ screenButton
        // ผู้ฟังนี้บันทึก "ปุ่มกระโดดปล่อยขึ้น" เมื่อปุ่มถูกปล่อย
        screenButton.OnPointUpEvent.AddListener(() => {

            console.log("ปุ่มกระโดดปล่อยขึ้น");
        });

    }

}
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<ZepetoScreenTouchpad>();

        // เพิ่มผู้ฟังสำหรับเหตุการณ์ลากบนทัชแพด
        touchPad.OnDragEvent.AddListener(() => {
            // บันทึกตำแหน่งของมือสัมผัสเมื่อเกิดเหตุการณ์ลาก
            console.log(touchPad.touchHandle.transform.position);
        });
    }

    GetJumpTouch() {

        // ค้นหาอ็อบเจ็กต์ ZepetoScreenButton ในฉาก
        const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();

        // เพิ่มผู้ฟังไปยัง OnPointDownEvent ของ screenButton
        // ผู้ฟังนี้บันทึก "ปุ่มกระโดดกดลง" เมื่อปุ่มถูกกด
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("ปุ่มกระโดดกดลง");
        });

        // เพิ่มผู้ฟังไปยัง OnPointUpEvent ของ screenButton
        // ผู้ฟังนี้บันทึก "ปุ่มกระโดดปล่อยขึ้น" เมื่อปุ่มถูกปล่อย
        screenButton.OnPointUpEvent.AddListener(() => {

            console.log("ปุ่มกระโดดปล่อยขึ้น");
        });

    }

}
﻿
คำอธิบายสคริปต์
ลงทะเบียนผู้ฟังเหตุการณ์ที่เรียกใช้ 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
คุณสามารถควบคุม 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:
﻿
1) ตั้งค่าผ่าน V-Pad Prefab
เมื่อใช้การกระโดดสองครั้งกับปุ่ม 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() ฟังก์ชัน.
﻿
﻿
หากการตั้งค่าเป็นดังต่อไปนี้ จะถือว่าประสบความสำเร็จ
﻿
﻿
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<ZepetoScreenButton>();
 
            // เพิ่มผู้ฟังสำหรับ OnPointDownEvent ของปุ่มหน้าจอเพื่อจัดการการกระโดด
            screenButton.OnPointDownEvent.AddListener(() => {
 
                // หากสถานะปัจจุบันของตัวละครคือ Jump ให้เรียกใช้การกระโดดสองครั้ง
                if (zepetoCharacter.CurrentState === CharacterState.Jump) {
                    zepetoCharacter.DoubleJump();
                }
            });
        })    
    }
}


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<ZepetoScreenButton>();
 
            // เพิ่มผู้ฟังสำหรับ 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 เป็นคอมโพเนนต์
﻿
﻿
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();
            }
        });
    }
}

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.
﻿
﻿
โหมดหน้าจอ	ขนาดผ้าใบ	ขนาดพื้นที่
แนวนอน	1334 X 750	600 X 450
แนวตั้ง	750 X 1334	375 X 500
เหตุการณ์	คำอธิบาย
OnPointerDownEvent	เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กด V-pad
OnDragEvent	เหตุการณ์นี้เกิดขึ้นในขณะที่ผู้ใช้กด V-pad
OnPointerUpEvent	เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อย V-Pad
เหตุการณ์	คำอธิบาย
OnPointDownEvent	เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้กดปุ่มกระโดด
OnPointUpEvent	เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ปล่อยปุ่มกระโดด