ジャイロセンサーの活用

7 分

ZEPETO Worldを作成する際、デバイスの傾きに応じてさまざまなワールドプレイのアイデアを実装するためにジャイロセンサーを使用できます。このガイドでは、ZEPETOScript内でInput.gyroを活用する方法を示します。

📘 ジャイロスコープ https://docs.unity3d.com/ScriptReference/Gyroscope.html

オブジェクトの設定

1) 階層に追加 > [+] > 3Dオブジェクト > 球体オブジェクトをシーンに追加します。

2) オブジェクトの名前をBallに変更し、Rigidbodyコンポーネントを追加します。

スクリプトを書く

1) TypeScriptを追加し、スクリプトの名前をRollingBallに変更します。以下のようにサンプルスクリプトを書いてください。

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3, Rigidbody } from 'UnityEngine';
import { Text } from 'UnityEngine.UI';
 
export default class RollingBall extends ZepetoScriptBehaviour {
 
    public debugText: Text;
    public velocityMultiplier: number = 100;
 
    private _rollingBall: Rigidbody;
 
 
    Start() {
 
        // このスクリプトと同じGameObjectにアタッチされたRigidbodyコンポーネントを取得
        this._rollingBall = this.GetComponent<Rigidbody>();
 
        // デバイスがジャイロスコープをサポートしているか確認
        if (SystemInfo.supportsGyroscope) {
            // ジャイロスコープを有効にする
            Input.gyro.enabled = true;
        } else {
            // ジャイロスコープがサポートされていない場合はスクリプトを無効にする
            console.log("このデバイスではジャイロスコープがサポートされていません。");
            Input.gyro.enabled = false;
        }
    }
 
    Update() {
        // 入力デバイスのジャイロスコープが有効か確認
        if (Input.gyro.enabled) {
     
            // x軸とz軸に沿ったジャイロ値を読み取る
            // ボールオブジェクトの安定した動きのために小数点以下1桁に丸める
            let gyroValueX = Math.round(Input.gyro.gravity.x * 10) / 10;
            let gyroValueZ = Math.round(Input.gyro.gravity.y * 10) / 10;
     
            // ジャイロ値を使ってボールの速度を設定
            this._rollingBall.velocity = new Vector3(gyroValueX * this.velocityMultiplier, 0, gyroValueZ * this.velocityMultiplier);
     
            // 現在のジャイロ値を画面に表示
            this.debugText.text = "Input.gyro.gravity : " + Input.gyro.gravity.ToString();
        }
    }
}

スクリプトの説明

ボールオブジェクトに付属しているRigidbodyコンポーネントを取得します。
次の値を丸めます：Input.gyro.gravity.x と Input.gyro.gravity.z の値を取得して、gyroValueX、gyroValueZの値を得ます。
ボールオブジェクトに速度を与えるために、gyroValueXとgyroValueZの値をvelocityMultiplierで掛け算して、velocityに代入します。
その Input.gyro.gravity の値は、Text UIを通じて画面に表示されます。

📘 ジャイロスコープ.gravity https://docs.unity3d.com/ScriptReference/Gyroscope-gravity.html

2) あなたが書いたRollingBall ZEPETOScriptをボールオブジェクトに追加します。ヒエラルキーウィンドウで、ZEPETOScriptインスペクタウィンドウに表示されるプロパティにText UIをドラッグアンドドロップして接続します。

モバイルでのテスト

1) QRモバイルテストで例の世界を実行します。

2) ボールオブジェクトはデバイスの傾きに応じて動きます。

❗️ 注意 ご注意ください、Input.gyro はモバイル環境でのみ動作します。

例の適用

Input.gyroを適用することで、ZEPETOワールド内でZEPETOキャラクターを移動させることができます。

1) TypeScriptを追加し、スクリプトの名前をGyroMovementに変更します。以下のようにサンプルスクリプトを書いてください。

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3 } from 'UnityEngine';
import { ZepetoCharacter, ZepetoPlayers, LocalPlayer } from 'ZEPETO.Character.Controller';

export default class GyroMovement extends ZepetoScriptBehaviour {

    private _localCharacter: ZepetoCharacter;

    Start() {

        // ローカルプレイヤーが追加されたときのリスナーを追加
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });

        // デバイスがジャイロスコープをサポートしているか確認
        if (SystemInfo.supportsGyroscope) {
            // ジャイロスコープを有効にする
            Input.gyro.enabled = true;
        }
        else {
            // ジャイロスコープがサポートされていない場合はスクリプトを無効にする
            console.log("このデバイスではジャイロスコープがサポートされていません。");
            Input.gyro.enabled = false;
        }
    }

    Update() {
        if (Input.gyro.enabled) {
            // ジャイロスコープの重力のx軸値を取得\
            // キャラクターの安定した動きのために小数点以下1桁に丸める
            const gyroValue = Math.round(Input.gyro.gravity.x * 10) / 10;

            const direction = new Vector3(0, 0, -gyroValue);

            // ローカルキャラクターを移動
            this._localCharacter.Move(direction);
        }
    }
}

スクリプトの説明

ローカルプレイヤーがシーンに追加されると、ZEPETOキャラクターのインスタンスを受け取ります。
値を丸めて、gyroValueの値を取得します。
ZEPETOキャラクターをZ軸方向に移動させるには、directionをパラメータとしてMove()関数に渡します。

2) シーンにGameObjectを追加し、GyroGravityと名前を変更します。作成したGyroMovement ZEPETOScriptを追加します。

3) QRモバイルテストとして例のワールドを実行すると、ZEPETOキャラクターはデバイスの傾きに応じて移動します。

👍 ヒント

この例で使用されているInput.gyro.gravityに加えて、さまざまなInput.gyro関数を使用できます。
さまざまなアイデアに適用できます。ZEPETOで楽しいワールドをリリースしてみてください！