使用V-pad

17min
V-pad
需要一个控制用户界面来操控角色在世界中的行为。
ZEPETO World 基本上通过 ZEPETOPlayers 在运行时创建一个名为 V-pad 的控制用户界面。
﻿
V-pad 可以根据玩家在屏幕上触摸的区域执行以下功能：
﻿
﻿
1) 屏幕触摸板：当您触摸触摸板区域并向上、向下、向左或向右滑动时，本地玩家沿XZ轴移动。
当您在触摸板区域内点击时，触摸板会出现在被触摸的位置，并在触摸操作完成后消失。
默认的触摸板区域如下：
屏幕模式
画布大小
区域大小
水平
1334 X 750
600 X 450
垂直
750 X 1334
375 X 500
﻿
2) 跳跃按钮：按下按钮会使本地玩家跳跃。跳跃的高度值可以通过Zepeto Players > Character > Jump Power进行更改。
﻿
👍 提示
通过设置在 Zepeto 玩家控制中注册的预制件区域，可以更改垫区域。
按以下顺序更改区域的大小。
选择在 Zepeto 玩家控制中注册的默认预制件，并通过拖放将其复制到资产中。
选择复制的预制件中的垫对象。
将 Rect Transform 组件的宽度和高度更改为所需的大小。
﻿
﻿
运行时创建的 V-pad 对象结构如下。
﻿
1) 垫子：一个可以移动角色位置的屏幕UI对象。
背景：一个半透明的黑色背景图像，显示垫子区域。
把手原点：垫子的外圈区域。把手原点的位置会根据触摸的位置而变化。
把手：垫子的内圈区域。当把手被触摸并拖动时，它的位置会改变，并且不会离开把手原点区域。
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>();

        // 为 screenButton 的 OnPointDownEvent 添加监听器
        // 当按钮被按下时，此监听器记录 "跳跃按钮按下"
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("跳跃按钮按下");
        });

        // 为 screenButton 的 OnPointUpEvent 添加监听器
        // 当按钮被释放时，此监听器记录 "跳跃按钮释放"
        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>();

        // 为 screenButton 的 OnPointDownEvent 添加监听器
        // 当按钮被按下时，此监听器记录 "跳跃按钮按下"
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("跳跃按钮按下");
        });

        // 为 screenButton 的 OnPointUpEvent 添加监听器
        // 当按钮被释放时，此监听器记录 "跳跃按钮释放"
        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。
您可以从 UIController_TouchPad_Horizontal 和 UIController_TouchPad_Vertical Prefab 中打开/关闭 V-Pad。
下面是关闭触控板时的样子。您可以以相同的方式关闭跳跃按钮。
﻿
﻿
双重跳跃设置
您可以为 V-pad 的跳跃按钮添加双重跳跃功能或应用自定义双重跳跃按钮功能。
﻿
﻿
要启用双重跳跃功能，请在 ZepetoPlayers 组件的角色部分激活自定义参数 > 双重跳跃复选框。
双跳的高度可以通过调整功率值来设置。
﻿
﻿
在V-pad上使用双跳功能有三种方法：
﻿
1) 通过V-Pad预制件设置
使用V-Pad按钮进行双跳时，设置如下。
点击UIController_TouchPad_Vertical或UIController_TouchPad_Horizontal预制件。您将被移动到项目面板中Packages文件夹下原始预制件所在的文件夹。
﻿
﻿
通过拖放UIController_TouchPad_Vertical或UIController_TouchPad_Horizontal预制件到Assets文件夹中来复制它。
﻿
❗️ 注意
Packages 文件夹中的原始预制件无法修改，因此您必须将其复制到 Assets 文件夹中进行修改。
如果您尝试修改原始预制件，将会出现不可变预制件错误。
﻿
﻿
双击复制的预制件项中的 UIController_TouchPad_Vertical 或 UIController_TouchPad_Horizontal 预制件，或在检查器窗口中按下打开预制件按钮以编辑预制件。
﻿
﻿
从预制件的子对象中选择 Jump 对象。
﻿
﻿
在Jump对象的Zepeto屏幕按钮组件中，按下On Point Down Event()中的+按钮，并注册如下事件。
﻿
On Point Down Event()
仅限运行时
选择对象：注册UIController_TouchPad_Vertical或UIController_TouchPad_Horizontal。
事件功能：点击无功能部分并设置为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。
﻿
﻿
屏幕模式	画布大小	区域大小
水平	1334 X 750	600 X 450
垂直	750 X 1334	375 X 500
事件	描述
OnPointerDownEvent	当用户按下 V-pad 时发生此事件。
OnDragEvent	当用户按住 V-pad 时发生此事件。
OnPointerUpEvent	当用户释放 V-Pad 时发生此事件。