Skip to main content

扉の操作

画面のタッチ機能を使い、指のスライドで、扉を動かしてみましょう。

タッチ機能

加速度センサーと同様に、タッチ機能を使う前には、機能の有効化をしないといけない。Unityでは:

// タッチ機能を有効化
EnhancedTouchSupport.Enable();

その次に、タッチのイベントに登録しなければならない:

// 画面を触れ始めたとき
Touch.onFingerDown += 処理メソッド;

// 指は移動中のとき
Touch.onFingerMove += 処理メソッド;

// 指が画面から放したとき
Touch.onFingerUp += 処理メソッド;

また、処理するメソッドは、「Finger」という引数を受け取り、指の画面の位置などが渡される。例:

private void Start()
{
	// タッチ機能を有効化
	EnhancedTouchSupport.Enable();

	// イベントに登録
	Touch.onFingerDown += OnFingerDown;
}

// 画面をタッチし始めた
private void OnFingerDown(Finger finger)
{
	// 指の画面の位置を表示
	Debug.Log(finger.screenPosition);
}

水平扉をスライド

扉を指でスライドするのを次の考えで実現できる:

image.png

初めて画面を触れるとき、指データを保管しておく。Unityがマルチタッチ(多数の指)に対応できるので、同じ指かどうかの確認が必要。そして、指が動くときに、移動量を計算し、その分を使って扉をスライドする。最後に、指を離したら、保管したデータを解放し、処理終了にする。

スクリプト

DoorSlider のスクリプトを作成し、まず水平(Horizontal)の扉を移動しましょう:

using UnityEngine.InputSystem.EnhancedTouch;
using Touch = UnityEngine.InputSystem.EnhancedTouch.Touch; // << ここ注意!

// 扉を移動(スライド)する
public class DoorSlider : MonoBehaviour
{
    // 水平の扉のグループ(親オブジェクト)
    [SerializeField] private Transform horizontalDoors;

    // 使った指
    private Finger useFinger = null;

    // 指の初期位置
    private Vector2 fingerStart;
    
    // 水平扉の初期位置(X軸のみ)
    private float doorStartX;
    
    private void Start()
    {
        // タッチ機能有効化
        EnhancedTouchSupport.Enable();

        // 各種のタッチイベント登録
        Touch.onFingerDown += OnFingerDown;
        Touch.onFingerMove += OnFingerMove;
        Touch.onFingerUp += OnFingerUp;
    }

    private void OnDestroy()
    {
        // 各種のタッチイベント登録解除
        Touch.onFingerDown -= OnFingerDown;
        Touch.onFingerMove -= OnFingerMove;
        Touch.onFingerUp -= OnFingerUp;
        
        // タッチ機能無効化
        EnhancedTouchSupport.Disable();
    }

    private void OnFingerDown(Finger finger)
    {
        // マルチタッチできるため、すでに指一本を使っていたら、2本目から無視する
        if (useFinger != null) return;

        // 指を保管
        useFinger = finger;
        
        // 初期位置も取っておく
        fingerStart = finger.screenPosition;
        doorStartX = horizontalDoors.position.x;
    }

    private void OnFingerMove(Finger finger)
    {
        // マルチタッチできるので、同じ指かどうかを確認
        if (useFinger != finger) return;
        
        // 指の移動量を計算(画面のピクセル単位)
        Vector2 delta = useFinger.screenPosition - fingerStart;
        
        // 様々な画面サイズがあるので、移動量正規化しましょう(最大値:1)
        delta.x /= Screen.width;
        delta.y /= Screen.height;
        
        // 現在の位置からを取得し、X軸だけを更新
        Vector3 hPos = horizontalDoors.position;
        hPos.x = doorStartX + delta.x;
        horizontalDoors.position = hPos;
    }
    
    private void OnFingerUp(Finger finger)
    {
        // 指を解放する
        if (useFinger == finger)
            useFinger = null;
    }
}

正規化に関して

いろんなスマホがあり、それぞれの画面サイズが異なるので、同じ指の動き、大幅に異なる移動量が発生する可能性がある。同じ指の動きでも大幅に異なる移動量が発生する可能性がある。例えば:

 image.png

スワイプの長さを画面サイズ(Screen.width Screen.height)で割れば、必ず 0 と 1の間になり、どの画面サイズであっても、同じ数値になる。この計算が「正規化」という。

Unityで確認

スクリプトを「Stage > Doors」にアタッチし、「Horizontal Doors」に「Stage > Doors > Horizontal」を入れてください

image.png

タッチをシミュレーションする

タッチで扉を動くようにしたので、どれだけマウスを使っても、扉が全く動かない。そのため、Unityはマウスを使ってタッチを疑似する機能がある。もちろん、マウス1つしかないので、指1本のみで、マルチタッチが再現できないが、今回のゲームなら十分。

疑似タッチを有効化するのは Window > Analysis > Input Debugger を選択し、次のウィンドウを開く。

image.png

このウィンドウの「Options」を開く、「Simulate Touch Input From Mouse or Pen」を選択すれば、マウスでタッチを疑似する。

image.png

速度調整、移動制限を追加

これで、扉が移動できるようになったが、2つの問題が現れた。

    扉の動きが多少遅く感じる 画面から消えるぐら、無限にスライドできる

    この2つの問題を解決しましょう:

    速度調整

    スクリプトに調整できる「speed」変数を追加し、OnFingerMove で使いましょう。先頭に:

    // スライドの速度
    [SerializeField] private float speed;

    OnFingerMove では:

    // 現在の位置からを取得し、X軸だけを更新
    Vector3 hPos = horizontalDoors.position;
    hPos.x = doorStartX + delta.x * speed; // 速度を適用
    horizontalDoors.position = hPos;

    Unity で適切に速度を設定し、確認してください

    image.png

    移動制限

    Unityで最大Xと最小Xの位置を設定できるようにし、OnFingerMove で制限をかける。まず、スクリプトの先頭に:

    // 最低 X 位置
    [SerializeField] 
    private float xMin;
    
    // 最大 X 位置
    [SerializeField] 
    private float xMax;

    そして、OnFingerMove では:

    // 現在の位置からを取得し、X軸だけを更新
    Vector3 hPos = horizontalDoors.position;
    hPos.x = doorStartX + delta.x * speed;     // 速度を適用
    hPos.x = Mathf.Clamp(hPos.x, xMin, xMax); // 移動制限を適用
    horizontalDoors.position = hPos;

    Unity で適切に数値を設定し、確認してください

    image.png

    垂直をスライド

    同じ処理を使って、DoorSlider スクリプトに垂直の扉が Z 軸で移動できるようにしましょう。スクリプトの先頭に:

    // 垂直の扉のグループ(親オブジェクト)
    [SerializeField] 
    private Transform verticalDoors;
    
    // 最低 Z 位置
    [SerializeField] 
    private float zMin;
    
    // 最大 Z 位置
    [SerializeField] 
    private float zMax;
    
    //(他の[SerializeField])
    
    // 垂直扉の初期位置(Z軸のみ)
    private float doorStartZ;

    つぎ、OnFingerDown では、垂直扉の初期位置を取る

    // 初期位置も取っておく
    fingerStart = finger.screenPosition;
    doorStartX = horizontalDoors.position.x;
    doorStartZ = verticalDoors.position.z;

    そして、OnFingerMove では:

    // 現在の位置からを取得し、Z軸だけを更新
    Vector3 vPos = verticalDoors.position;
    vPos.z = doorStartZ + delta.y * speed;     // 速度を適用
    vPos.z = Mathf.Clamp(vPos.z, zMin, zMax); // 移動制限を適用
    verticalDoors.position = vPos;

    最後に Unity でパラメータを設定して、試してみてください:

    image.png

    実機で確認

    つぎ、端末を接続し、「Build And Run」でタッチと傾きを使用し、卵を巣まで動かしてみてください。