あなたの世界を作りなさい
プレイヤーとキャラクター: 上級

Vパッドの使用

17min

V-pad

キャラクターを世界の中で操作するためのコントロールUIが必要です。

ZEPETO Worldは基本的に、ZEPETOPlayersを通じて実行時にV-padというコントロールUIを作成します。



V-padは、プレイヤーが画面上で触れるエリアに応じて以下の機能を実行できます:

Document image




1) スクリーンタッチパッド:パッドエリアに触れてスライドすると、ローカルプレイヤーがXZ軸に沿って移動します。

  • パッドエリア内をタップすると、タッチパッドがタッチした位置に表示され、タッチアクションが完了すると消えます。
  • デフォルトのパッドエリアは次のとおりです:

スクリーンモード

キャンバスサイズ

エリアサイズ

横向き

1334 X 750

600 X 450

縦向き

750 X 1334

375 X 500



2) ジャンプボタン:ボタンを押すと、ローカルプレイヤーがジャンプします。ジャンプの高さはZepeto Players > Character > Jump Powerで変更できます。



👍 ヒント パッドエリアは、Zepetoプレイヤーのコントロールに登録されたプレハブのエリアを設定することで変更できます。

次の順序でエリアのサイズを変更します。

  1. コントロールのZepetoプレイヤーに登録されたデフォルトのプレハブを選択し、アセットにドラッグ&ドロップしてプレハブをコピーします。
  2. コピーしたプレハブ内のパッドオブジェクトを選択します。
  3. Rect Transformコンポーネントの幅と高さを希望のサイズに変更します。
Document image




ランタイムで作成されたV-padのオブジェクト構造は次のとおりです。

Document image

  • 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

  • スクリプトの説明
    • ローカルプレイヤーがシーンに追加されたときに、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の位置値が表示されます。また、ジャンプボタンを押したり離したりするたびにコンソールログが表示されます。
Document image

Document image




V-Pad カスタマイズ

ScreenTouchPad と ScreenButton を使用して V-Pad を操作できます。

UIController_TouchPad_Horizontal と UIController_TouchPad_Vertical Prefab から V-Pad をオン/オフにできます。

以下は、タッチパッドがオフになっているときの見た目です。ジャンプボタンも同じ方法でオフにできます。

Document image




ダブルジャンプ設定

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

Document image




ダブルジャンプ機能を有効にするには、ZepetoPlayers コンポーネントのキャラクターセクションでカスタムパラメータ > ダブルジャンプのチェックボックスをオンにします。

  • ダブルジャンプの高さは、パワー値を調整することで設定できます。
Document image




Vパッドでダブルジャンプ機能を使用する方法は3つあります:



1) V-Pad Prefabを通じて設定する

V-Padボタンでダブルジャンプを使用する場合は、以下のように設定します。

UIController_TouchPad_VerticalまたはUIController_TouchPad_Horizontal prefabをクリックします。プロジェクトパネルのPackagesフォルダー内にある元のprefabがあるフォルダーに移動します。

Document image




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

Document image


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

Document image




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

Document image




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

Document image




JumpオブジェクトのZepeto Screen Buttonコンポーネントで、On Point Down Event()の+ボタンを押し、次のようにイベントを登録します。

Document image

  • On Point Down Event()
    • ランタイムのみ
    • オブジェクトを選択: UIController_TouchPad_VerticalまたはUIController_TouchPad_Horizontalを登録します。
    • イベント関数: No Functionセクションをクリックし、UIZepetoPlayerControl > DoubleJump()関数に設定します。
Document image




設定が次のようになっている場合、成功です。

Document image




2) スクリプトを使用した設定

このスクリプトは、キャラクターがV-padのジャンプボタンからの入力に応じてダブルジャンプを行うことを可能にします。

TypeScript


スクリプトの説明

  • ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() は、ローカルプレイヤーがゲームに追加されたときにトリガーされるリスナーを登録します。これは、ローカルプレイヤーが追加される際にダブルジャンプ機能を構成するために役立ちます。
  • ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character は、ローカルプレイヤーのキャラクターへのアクセスを提供します。Object.FindObjectOfType() は、現在のシーン内のZepetoScreenButton型のオブジェクトを見つけて、ジャンプアクションに割り当てます。
  • ScreenButton.OnPointDownEvent.AddListener() は、スクリーンボタンのOnPointDownEventにリスナーを追加します。このリスナーは、スクリーンタッチまたはクリックイベントを待機し、ジャンプまたはダブルジャンプアクションを開始します。
  • リスナー内で、if文はキャラクターの現在の状態がCharacterState.Jumpであるかどうかをチェックします。もしそうであれば、zepetoCharacter.DoubleJump() を実行します。



スクリプトを書いた後、シーンに空のGameObjectを作成し、DobuleJump.tsスクリプトをコンポーネントとして追加します。

Document image




3) カスタムボタンを通じて設定する

独自のボタンを作成して使用することを選択した場合は、以下のようにスクリプトを追加してください。

このスクリプトは、ユーザー定義のボタンにジャンプおよびダブルジャンプ機能を追加します。

TypeScript


スクリプトの説明

  • ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() ゲームにローカルプレイヤーが追加されたときに実行される関数を登録します。
  • this.shotButton.onClick.AddListener() shotButtonがクリックされたときに実行される関数を追加します。
  • 関数がトリガーされると、キャラクターの現在の状態がジャンプ状態であるかどうかを確認し、ジャンプまたはダブルジャンプを実行します。
  • キャラクターがジャンプ状態にある場合、this.zepetoCharacter.DoubleJump() が呼び出されてダブルジャンプを実行します。そうでない場合、this.zepetoCharacter.Jump() が呼び出されてジャンプを実行します。



スクリプトを書いた後、シーンに空のGameObjectを作成し、JumpButton.tsスクリプトをコンポーネントとして追加します。

最後に、インスペクターでShot Buttonにジャンプボタンを割り当てます。

Document image




更新日 11 Oct 2024
Doc contributor
このページは役に立ちましたか?