--- title: 使用V-pad slug: world-sdk-guide-ch/v-pad docTags: createdAt: 2024-09-02T08:34:13.135Z --- ## V-pad 需要一个控制用户界面来操控角色在世界中的行为。 ZEPETO World 基本上通过 ZEPETOPlayers 在运行时创建一个名为 V-pad 的控制用户界面。 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"} **👍 提示** 通过设置在 Zepeto 玩家控制中注册的预制件区域，可以更改垫区域。 按以下顺序更改区域的大小。 1. 选择在 Zepeto 玩家控制中注册的默认预制件，并通过拖放将其复制到资产中。 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对象。 - 背景：一个半透明的黑色背景图像，显示垫子区域。 - 把手原点：垫子的外圈区域。把手原点的位置会根据触摸的位置而变化。 - 把手：垫子的内圈区域。当把手被触摸并拖动时，它的位置会改变，并且不会离开把手原点区域。 - 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(); // 为 screenButton 的 OnPointDownEvent 添加监听器 // 当按钮被按下时，此监听器记录 "跳跃按钮按下" screenButton.OnPointDownEvent.AddListener(() => { console.log("跳跃按钮按下"); }); // 为 screenButton 的 OnPointUpEvent 添加监听器 // 当按钮被释放时，此监听器记录 "跳跃按钮释放" 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。 您可以从 UIController\_TouchPad\_Horizontal 和 UIController\_TouchPad\_Vertical Prefab 中打开/关闭 V-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) 要启用双重跳跃功能，请在 ZepetoPlayers 组件的角色部分激活自定义参数 > 双重跳跃复选框。 - 双跳的高度可以通过调整功率值来设置。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-GBmfx3ZmDLCMgCOvVfY9v-20240904-102409.png) 在V-pad上使用双跳功能有三种方法： ### 1) 通过V-Pad预制件设置 使用V-Pad按钮进行双跳时，设置如下。 点击UIController\_TouchPad\_Vertical或UIController\_TouchPad\_Horizontal预制件。您将被移动到项目面板中Packages文件夹下原始预制件所在的文件夹。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OPe4sz7RjAk0s4kknDCGE-20240904-102409.png) 通过拖放UIController\_TouchPad\_Vertical或UIController\_TouchPad\_Horizontal预制件到Assets文件夹中来复制它。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-P74OvPYftGrGR6-MZEO9P-20240904-102409.png) :::hint{type="danger"} **❗️ 注意** Packages 文件夹中的原始预制件无法修改，因此您必须将其复制到 Assets 文件夹中进行修改。 如果您尝试修改原始预制件，将会出现不可变预制件错误。 ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-IFEna9I6kZ5ltiW4OGxTe-20240904-102409.png" size="66" width="524" height="470" position="center" showCaption="false"} ::: 双击复制的预制件项中的 UIController\_TouchPad\_Vertical 或 UIController\_TouchPad\_Horizontal 预制件，或在检查器窗口中按下打开预制件按钮以编辑预制件。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ghHINRGChptXnEp-Gx2t--20240904-102409.png) 从预制件的子对象中选择 Jump 对象。 ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-I6IXmbnxEwhPHbBaiCLd4-20240904-102409.png" size="60" width="482" height="366" position="center" showCaption="false"} 在Jump对象的Zepeto屏幕按钮组件中，按下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。 - 事件功能：点击无功能部分并设置为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。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dMmQ2x_7Oke4Kw03GzV0I-20240904-102410.png)