Vパッドの使用

17min
V-pad
キャラクターを世界の中で操作するためのコントロール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の入力値を取得する方法
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() 関数は、タッチパッドで発生するタッチイベントを処理する関数です。
シーン内のZepetoScreenTouchpadオブジェクトを見つけるために、Object.FindObjectOfType<ZepetoScreenTouchpad>() を使用します。
タッチパッドの OnDragEvent. このリスナーは、タッチパッドでドラッグイベントが発生したときに発火します。
リスナー内で、タッチハンドルの位置がコンソールに出力されます。
この GetJumpTouch() 関数は、ジャンプボタンから発生するイベントを処理する関数です。
シーン内のZepetoScreenButtonオブジェクトを見つけるために、Object.FindObjectOfType<ZepetoScreenButton>() を使用します。
ジャンプボタンのOnPointDownEventとOnPointUpEventのリスナーを追加します。
内で、OnPointDownEvent, ジャンプボタンが押されるたびにJump Button Downというログが出力されます。
内で、OnPointUpEvent, ジャンプボタンが放されるたびにJump Button Upというログが出力されます。
﻿
再生ボタンを押して実行すると、V-padを押すたびにコンソールログにV-padの位置値が表示されます。また、ジャンプボタンを押したり離したりするたびにコンソールログが表示されます。
﻿
﻿
﻿
V-Pad カスタマイズ
ScreenTouchPad と ScreenButton を使用して V-Pad を操作できます。
UIController_TouchPad_Horizontal と UIController_TouchPad_Vertical Prefab から V-Pad をオン/オフにできます。
以下は、タッチパッドがオフになっているときの見た目です。ジャンプボタンも同じ方法でオフにできます。
﻿
﻿
ダブルジャンプ設定
V-pad のジャンプボタンにダブルジャンプ機能を追加するか、カスタムダブルジャンプボタン機能を適用できます。
﻿
﻿
ダブルジャンプ機能を有効にするには、ZepetoPlayers コンポーネントのキャラクターセクションでカスタムパラメータ > ダブルジャンプのチェックボックスをオンにします。
ダブルジャンプの高さは、パワー値を調整することで設定できます。
﻿
﻿
Vパッドでダブルジャンプ機能を使用する方法は3つあります：
﻿
1) V-Pad Prefabを通じて設定する
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()関数に設定します。
﻿
﻿
設定が次のようになっている場合、成功です。
﻿
﻿
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<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() {
         
           // ローカルプレイヤーが追加されたときにリスナーを実行する
        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を放したときに発生します。
イベント	説明
OnPointDownEvent	このイベントは、ユーザーがジャンプボタンを押したときに発生します。
OnPointUpEvent	このイベントは、ユーザーがジャンプボタンを放したときに発生します。
更新日 11 Oct 2024
このページは役に立ちましたか？
カメラコリジョンレイヤー
トップビュー例