--- title: Vパッドの使用 slug: world-sdk-guide-ja/v docTags: createdAt: 2024-09-02T08:34:13.135Z --- ## V-pad キャラクターを世界の中で操作するためのコントロールUIが必要です。 ZEPETO Worldは基本的に、ZEPETOPlayersを通じて実行時にV-padというコントロールUIを作成します。 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()` 関数は、タッチパッドで発生するタッチイベントを処理する関数です。 - シーン内のZepetoScreenTouchpadオブジェクトを見つけるために、`Object.FindObjectOfType()` を使用します。 - タッチパッドの `OnDragEvent`. このリスナーは、タッチパッドでドラッグイベントが発生したときに発火します。 - リスナー内で、タッチハンドルの位置がコンソールに出力されます。 - この `GetJumpTouch()` 関数は、ジャンプボタンから発生するイベントを処理する関数です。 - シーン内のZepetoScreenButtonオブジェクトを見つけるために、`Object.FindObjectOfType()` を使用します。 - ジャンプボタンの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 カスタマイズ ScreenTouchPad と ScreenButton を使用して 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パッドでダブルジャンプ機能を使用する方法は3つあります： ### 1) V-Pad Prefabを通じて設定する V-Padボタンでダブルジャンプを使用する場合は、以下のように設定します。 UIController\_TouchPad\_VerticalまたはUIController\_TouchPad\_Horizontal prefabをクリックします。プロジェクトパネルのPackagesフォルダー内にある元のprefabがあるフォルダーに移動します。 ![](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"} **❗️ 注意** Packagesフォルダー内の元のPrefabは変更できないため、変更するには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をダブルクリックするか、InspectorウィンドウのOpen Prefabボタンを押してPrefabを編集します。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ghHINRGChptXnEp-Gx2t--20240904-102409.png) Prefabのサブオブジェクトから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 Screen Buttonコンポーネントで、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() { // ローカルプレイヤーが追加されたときにリスナーを実行する 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)