Vパッドの使用
キャラクターを世界の中で操作するためのコントロールUIが必要です。
ZEPETO Worldは基本的に、ZEPETOPlayersを通じて実行時にV-padというコントロールUIを作成します。
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の入力値を受け取るには、ランタイムで作成されたZepetoScreenTouchpadコンポーネントとZepetoScreenButtonコンポーネントにアクセスし、イベントを登録する必要があります。
ZepetoScreenButtonコンポーネントはキャラクターのジャンプボタンコンポーネントです。アクセス可能なイベントには以下が含まれます:
イベント | 説明 |
---|---|
OnPointerDownEvent | このイベントは、ユーザーがV-padを押したときに発生します。 |
OnDragEvent | このイベントは、ユーザーがV-padを押している間に発生します。 |
OnPointerUpEvent | このイベントは、ユーザーがV-Padを放したときに発生します。 |
ZepetoScreenButton コンポーネントはキャラクターのジャンプボタンコンポーネントです。アクセス可能なイベントには以下が含まれます:
イベント | 説明 |
---|---|
OnPointDownEvent | このイベントは、ユーザーがジャンプボタンを押したときに発生します。 |
OnPointUpEvent | このイベントは、ユーザーがジャンプボタンを放したときに発生します。 |
以下のスクリプトは、ユーザーがタッチパッドを押したときにV-padの位置値をコンソールに出力する例です。
- スクリプトの説明
- ローカルプレイヤーがシーンに追加されたときに、GetPadTouch() と GetJumpTouch() 関数を呼び出すイベントリスナーを登録します。
- この GetPadTouch() 関数は、タッチパッドで発生するタッチイベントを処理する関数です。
- シーン内のZepetoScreenTouchpadオブジェクトを見つけるために、Object.FindObjectOfType<ZepetoScreenTouchpad>() を使用します。
- タッチパッドの OnDragEvent. このリスナーは、タッチパッドでドラッグイベントが発生したときに発火します。
- リスナー内で、タッチハンドルの位置がコンソールに出力されます。
- この GetJumpTouch() 関数は、ジャンプボタンから発生するイベントを処理する関数です。
- シーン内のZepetoScreenButtonオブジェクトを見つけるために、Object.FindObjectOfType<ZepetoScreenButton>() を使用します。
- ジャンプボタンのOnPointDownEventとOnPointUpEventのリスナーを追加します。
- 内で、OnPointDownEvent, ジャンプボタンが押されるたびにJump Button Downというログが出力されます。
- 内で、OnPointUpEvent, ジャンプボタンが放されるたびにJump Button Upというログが出力されます。
- 再生ボタンを押して実行すると、V-padを押すたびにコンソールログにV-padの位置値が表示されます。また、ジャンプボタンを押したり離したりするたびにコンソールログが表示されます。


ScreenTouchPad と ScreenButton を使用して V-Pad を操作できます。
UIController_TouchPad_Horizontal と UIController_TouchPad_Vertical Prefab から V-Pad をオン/オフにできます。
以下は、タッチパッドがオフになっているときの見た目です。ジャンプボタンも同じ方法でオフにできます。

V-pad のジャンプボタンにダブルジャンプ機能を追加するか、カスタムダブルジャンプボタン機能を適用できます。

ダブルジャンプ機能を有効にするには、ZepetoPlayers コンポーネントのキャラクターセクションでカスタムパラメータ > ダブルジャンプのチェックボックスをオンにします。
- ダブルジャンプの高さは、パワー値を調整することで設定できます。

Vパッドでダブルジャンプ機能を使用する方法は3つあります:
V-Padボタンでダブルジャンプを使用する場合は、以下のように設定します。
UIController_TouchPad_VerticalまたはUIController_TouchPad_Horizontal prefabをクリックします。プロジェクトパネルのPackagesフォルダー内にある元のprefabがあるフォルダーに移動します。

UIController_TouchPad_VerticalまたはUIController_TouchPad_Horizontal prefabをドラッグ&ドロップしてAssetsフォルダーにコピーします。

❗️ 注意 Packagesフォルダー内の元のPrefabは変更できないため、変更するにはAssetsフォルダーにコピーを作成する必要があります。 元のPrefabを変更しようとすると、Immutable Prefabエラーが発生します。

コピーしたPrefabアイテム内のUIController_TouchPad_VerticalまたはUIController_TouchPad_Horizontal prefabをダブルクリックするか、InspectorウィンドウのOpen Prefabボタンを押してPrefabを編集します。

PrefabのサブオブジェクトからJumpオブジェクトを選択します。

JumpオブジェクトのZepeto Screen Buttonコンポーネントで、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にジャンプボタンを割り当てます。
