Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】Fingers - Touch Gestures for Unity でタッチジェスチャーを実装する【Unity】

今回はアセットの紹介をしていきます。
紹介するのはFingers - Touch Gestures for Unity
タッチジェスチャーを簡単に実装できるアセットです。

f:id:Raspberly:20211109020803p:plain

 

 

お得なセール情報

現在アセットストアでは、パブリッシャー丸ごとセール第9弾を開催中!
ツールアセットの3巨頭である Pixel Crushers、 Digital Ruby (Jeff Johnson)、 Davit Naskidashviliのアセットが対象。
詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211109021740p:plain

 

さらに今なら以下のアセット3つが無料でプレゼントされます
今回紹介するFingers - Touch Gestures for Unityもそのひとつです。
入手方法はカートに入れてクーポンコード「TOOLBOX」を入力するだけです。

2021年11月9日16時59分までなので今のうちに購入処理をしておきましょう!

 

どんなアセット?

タップ、ダブルタップ、ピンチ、パン、ドラッグ&ドロップなどジェスチャー入力を簡単に実装できるアセットです。
形状認識やジョイスティック、Dパッドといったコントローラーも付属しています。

Fingersは、UnityでのUnityタッチ入力とジェスチャ処理に最適です。Fingersジェスチャーは、低価格で使いやすいアーキテクチャチュートリアルビデオを組み合わせた機能セットのトップです。FingersはすべてのUnityプラットフォームで動作します。ネイティブのモバイルAndroidまたはiOSジェスチャを使用したことがある場合は、Fingersを使用すればすぐに使用できます。

f:id:Raspberly:20211109034314p:plain

マウスとキーボードでもピンチ操作ができるデバッグ用機能もあります。

 

 

 

開発環境

Unity2020.3.22f1

Fingers - Touch Gestures for Unity ver3.0.3

 

 

 

インポートの確認

アセットインポート完了時はこんな感じです。

f:id:Raspberly:20211109013759p:plain

デモシーンの確認

Fingers/Demoの中にデモシーンが大量に用意されています。

f:id:Raspberly:20211107114645p:plain

とてつもなく豊富ですね。いくつか見ていきます。

 

基本的なジャスチャーの確認

DemoSceneで確認。
タップ、ダブルタップ、2本指パン、ピンチ、回転、スワイプ、
ドラッグ&ドロップなど基本的なジェスチャーを確認できます。

f:id:Raspberly:20211109012659g:plain

 

Dパッド(十字キー)でオブジェクトの移動

f:id:Raspberly:20211109012716g:plain

 

バーチャルスティックでオブジェクトの移動

f:id:Raspberly:20211109012839g:plain

 

ドラッグ&ドロップでオブジェクトの移動

2Dオブジェクト、3Dオブジェクト、UIの3種類用意されています。

f:id:Raspberly:20211109012731g:plain

 

一人称視点のコントローラー

f:id:Raspberly:20211109012747g:plain

 

特定の文字を認識

認識できる文字は限られているようです
L, X, O, V, U, -, |, /, \ , △, □,ライトニングボルト,チェックマークを認識できます

f:id:Raspberly:20211109013125g:plain

 

 

 

 

 

実際に試してみる

実際に試してみます。

今回は以下の2通りの挙動を作ってみます。
ドラッグ&ドロップでオブジェクトを移動させる
・Dパッドでユニティちゃんを移動させる

ドラッグ&ドロップでオブジェクトを移動させる

基本的なタッチジェスチャードラッグ&ドロップをやってみます。
他のジェスチャーも大体同じように実装できます。

プレハブの配置

Assets/Fingers/Prefab/Resources/FingersScriptPrefabをシーンに配置します。

f:id:Raspberly:20211109004300p:plain

コンポーネントのアタッチ

移動させたいオブジェクト(今回はCube)を作成し、FingersDragDropComponentScriptコンポーネントをアタッチ

f:id:Raspberly:20211109012454p:plain

これで完成です。ゲームを実行するとロングタップでオブジェクトを移動させることができました。
とっても簡単!

f:id:Raspberly:20211109024453g:plain

 

イベントハンドラが用意されているので、
ドラッグ開始時、ドラッグ中、ドラッグ終了時に何か処理をさせるのも簡単。

using UnityEngine;
using DigitalRubyShared;

public class DragDrop : MonoBehaviour
{
    FingersDragDropComponentScript m_DragDropComponent;

    void Start ()
    {
        m_DragDropComponent = GetComponent<FingersDragDropComponentScript>();
        m_DragDropComponent.DragStarted += (sender, e) => DragStart();   
        m_DragDropComponent.DragUpdated += (sender, e) => DragUpdate();   
        m_DragDropComponent.DragEnded += (sender, e) => DragEnd();   
    }

    void DragStart()
    {
        Debug.Log("ドラッグ開始");
    }

    void DragUpdate()
    {
        Debug.Log("ドラッグ中");
    }

    void DragEnd ()
    {
        Debug.Log("ドロップ");
    }
}

イベントの設定ってこんな感じでいいのかしら

 

 

Dパッドでユニティちゃんを移動させる

DパッドUIを設置してユニティちゃんを移動させてみます。

プレハブの配置

Assets/Fingers/Prefab/Resources/FingersScriptPrefabをシーンに配置します。

f:id:Raspberly:20211109004300p:plain

Canvasを作成し、Assets/Fingers/Prefab/FingersDPadPrefabを配置します。

f:id:Raspberly:20211109032505p:plain

 

スクリプトの作成

SDユニティちゃんをシーンに配置し、以下のスクリプトをアタッチします。
ユニティちゃんの設定などは過去記事とほとんど同じです。

using UnityEngine;
using DigitalRubyShared;

public class DPad : MonoBehaviour
{
    [SerializeField] FingersDPadScript m_DPadSComponent;
    [SerializeField] GameObject m_Player;
    [SerializeField] Animator m_Animator;
    [SerializeField] float m_Speed = 3;

    void Start()
    {
        m_DPadSComponent.DPadItemPanned = DPadPanned;
    }

    void Update()
    {
        if(m_Animator.GetFloat("isMoving") != 0) m_Animator.SetFloat("isMoving", 0);
    }

    void DPadPanned(FingersDPadScript script, FingersDPadItem item, PanGestureRecognizer gesture)
    {
        if((item & FingersDPadItem.Right) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 90, 0);
        }
        if((item & FingersDPadItem.Left) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, -90, 0);
        }
        if((item & FingersDPadItem.Up) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 0, 0);
        }
        if((item & FingersDPadItem.Down) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 180, 0);
        }

        m_Animator.SetFloat("isMoving", 1);
        m_Player.transform.position += transform.forward * m_Speed * Time.deltaTime;
    }
}

DPadがニュートラルになったときのイベントハンドラがなさそうなので、
ちょっと強引にアニメーションをリセットしています。

f:id:Raspberly:20211109033516g:plain

Dパッドの方向に合わせて移動しました。

 

 

 

まとめ

・Fingers - Touch Gestures for Unityを使うとジェスチャー処理が簡単に実装できる

ひと通りジェスチャーがそろっているのでスマホアプリの開発においてマストバイなアセットだと思います。

以上です。

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

スマホ向けバーチャルスティックを簡単に実装できるアセット「Joystick Pack」を過去に紹介しています。

raspberly.hateblo.jp

 

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。