UniRx を活用したマウス長押し機能の実装例

　UniRx/R3 を活用したマウス長押し機能の実装例です。
マウスを長押ししている間と、マウスを離したときの処理を実装しています。

開発環境

・Unity 6000.3.10f1
・R3 1.3.0

＜実装動画＞

　こちらのサイトを参考にしています。ありがとうございます。

Zenn ねこみみだいまおう様
UniRxでuGUIのボタン長押しを取る
https://zenn.dev/nekomimi_daimao/articles/932e1f20...

設計

　このサンプルでは、画面にボタンを配置し、そちらを長押ししている間だけ、文字が表示されるという機能です。

　ヒエラルキーやオブジェクトのサンプルを提示しておきます。
一般的な Canvas や Button の作りです。

サンプルコード

　ボタンの押下と離した時の購読処理を１つにまとめて分岐を作成したパターンと
ボタンの購読処理をそれぞれに分けた記述したパターンの両方を提示します。

　こちらのスクリプトは、どのゲームオブジェクトにアタッチしていただいても問題ありません。
サンプルでは Button にアタッチしていますが、例えば Canvas でも問題ありません。

１．ボタンの購読処理を１つにまとめて分岐を作成したパターン

　UniRx ではなく R3 を利用する場合には using UniRx; と using UniRx.Triggers; を削除し、
代わりに using R3; と using R3.Triggers; を書き加えてください。

using System;
using UniRx;　　　　　　　　// using R3;
using UniRx.Triggers;　　　 // using R3.Triggers;
using UnityEngine;
using UnityEngine.UI;

public class LongTapSample : MonoBehaviour {

    [SerializeField] private Button btnBuffDetail;
    [SerializeField] private CanvasGroup cgLocalize;

    private float interval = 0.2f;


    void Start() {
        Setup();
    }

    /// <summary>
    /// 初期設定
    /// </summary>
    public void Setup() {
　　　　HideBuffDisp();

        // ボタンの購読
        // UniRx を利用したマウスの長押し処理
        // Select で OnPointerDownをtrueに変換
        btnBuffDetail.OnPointerDownAsObservable().Select(_ => true)

            // OnPointerDownとOnPointerUpを1つのストリームに合成
            // この後には押した時にtrueが、離した時にfalseが流れるようになる
        　　// Select で OnPointerUpをfalseに変換
            .Merge(btnBuffDetail.OnPointerUpAsObservable().Select(_ => false))

　　　　　　// interval 秒間新しい値が来なかったら最後に来た値を流す
            .Throttle(TimeSpan.FromSeconds(interval))

　　　　　　// ボタンの長押し、あるいは離した時に購読実行
            .Subscribe(isButtonPressed => {
                if (isButtonPressed) {

                    // ボタンが押された場合の処理
                    ShowBuffDisp();
                    Debug.Log("Show");

                } else {

                    // ボタンが離された場合の処理
                    HideBuffDisp();
                    Debug.Log("Hide");
                }
            }).AddTo(this);


    /// <summary>
    /// ボタン長押しで実行する処理
    /// </summary>
    private void ShowBuffDisp() {
        cgLocalize.alpha = 1.0f;
    }

    /// <summary>
    /// ボタンを離した時に実行する処理
    /// </summary>
    private void HideBuffDisp() {
        cgLocalize.alpha = 0f;
    }
}

２．ボタンの購読処理をそれぞれに分けた記述したパターン

　ボタンの長押しと、ボタンを離した時の購読処理を分けて記述したパターンです。

using System;
using UniRx;
using UniRx.Triggers;
using UnityEngine;
using UnityEngine.UI;

public class LongTapSample : MonoBehaviour {

    [SerializeField] private Button btnBuffDetail;
    [SerializeField] private CanvasGroup cgLocalize;

    private float interval = 0.2f;


    void Start() {
        Setup();
    }

    /// <summary>
    /// 初期設定
    /// </summary>
    public void Setup() {
        HideBuffDisp();

        // UniRx を利用したマウスの長押し処理
        // OnPointerDownをtrueに変換
        btnBuffDetail.OnPointerDownAsObservable().Select(_ => true)

            // OnPointerUpをfalseに変換
            // OnPointerDownとOnPointerUpを1つのストリームに合成
            // この後には押した時にtrueが、離した時にfalseが流れるようになる
            .Merge(btnBuffDetail.OnPointerUpAsObservable().Select(_ => false))

            // 1秒間新しい値が来なかったら最後に来た値を流す
            .Throttle(TimeSpan.FromSeconds(interval))

            // ボタンの押下状態を判定して、 true だけを流す
            .Where(isButtonPressed => isButtonPressed)

            // bool の値（isButtonPressed）は不要なので、Unitに変換して【ボタンが押された】ことだけを通知する
            // 変換理由は通知発行のみを行っていることを明確にするため
            .AsUnitObservable()

            // 上記の処理により、最終的にマウスの長押しを購読する
            .Subscribe(_ => {
                // TODO 長押し時の処理を実装
                ShowBuffDisp();
            })
            .AddTo(this);

        // OnPointerUp時にHideBuffDispを呼び出す
        btnBuffDetail.OnPointerUpAsObservable()
            .Subscribe(_ => {
                // タップ（長押し）をやめた際の処理を実行
                HideBuffDisp();
            })
            .AddTo(this);
    }

    /// <summary>
    /// ボタン長押しで実行する処理
    /// </summary>
    private void ShowBuffDisp() {
        cgLocalize.alpha = 1.0f;
    }

    /// <summary>
    /// ボタンを離した時に実行する処理
    /// </summary>
    private void HideBuffDisp() {
        cgLocalize.alpha = 0f;
    }    
}

解説

　btnVariable の OnPointerDown と OnPointerUp を1つのストリームに合成して、
その後に true のときだけをフィルタリングし、最終的に Unit に変換してから購読しています。

　　　　// UniRx を利用したマウスの長押し処理
　　　　// OnPointerDownをtrueに変換
        btnBuffDetail.OnPointerDownAsObservable().Select(_ => true)
       
       　　// OnPointerUpをfalseに変換
           // OnPointerDownとOnPointerUpを1つのストリームに合成
           // この後には押した時にtrueが、離した時にfalseが流れるようになる
       　　.Merge(btnBuffDetail.OnPointerUpAsObservable().Select(_ => false))

           // 1秒間新しい値が来なかったら最後に来た値を流す
           .Throttle(TimeSpan.FromSeconds(interval))

           // trueだけを流す
           .Where(b => b)

           // このboolは利用しない値なので、通知発行のみを行っていることを明確にするため、Unitに変換する
       　　.AsUnitObservable()

　　       // 上記の処理により、最終的にマウスの長押しを購読する
　　       .Subscribe(_ =>
    　　   {
        　　   // TODO 長押し時の処理を実装

       　　})
       　　.AddTo(this);

　具体的な処理の流れは以下の通りです。

　OnPointerDownAsObservable() と OnPointerUpAsObservable() を Merge オペレータを利用して1つのストリームに結合します。

　合成したストリームの各要素に対して、Select(_ => true)と Select(_ => false)の2つのオペレータを使って、それぞれTrueとFalseに変換します。

　変換したストリームを Throttle オペレータで0.5秒ごとに制御します。
Throttle オペレータは一定時間イベントが来なかったら最後の値を流すという機能です。
最後の入力から interval 秒経過した時点で、最後の値を1回だけ発行します。

　そのためこの実装では

　・マウスを押して interval 秒後に true が1回発火
　・マウスを離して interval 秒後に false が1回発火

　という挙動になります。

　最後に、true のときだけをフィルタリングして、AsUnitObservable()でUnit(通知用の値)に変換します。

　最終的に、長押し時には interval 秒ごとに Unit(通知) が流れるようになり、そのイベントを Subscribe(購読)して実装した処理を呼び出します。
この処理により、btnBuffDetailが長押し（またはタップ）された状態を検知し、その際にイベント処理を呼び出すことができます。

＜AsUnitObservable() オペレータ＞

　AsUnitObservable() オペレータは、Observableの各要素に対して単なる true ではなく、 Unit を流すように変換するものです。
これは、Observableが特定の値の流れではなく、単なるイベントの発生を表す場合に使われます。

　例えば、 BtnVariable が長押し（またはタップ）されたことを知りたい場合、その情報だけを持つ true を流すのではなく、
Unit を流すことで、特に値に意味がなく、単にイベントが発生したことを表現することができます。

　実際には、この場合、 AsUnitObservable() を挟まなくても動作することがあります。
しかし、イベントの発生を表す場面では、 Unit が使用されることが一般的であり、コードの意図を明示的にするために使われることがあります。
これにより、コードを見る人が単なる true の代わりに Unit を使っていることを理解しやすくなります。

　また、特に値に意味がない場合や、その値を無視する場合にも Unit が使われることがあります。
したがって、このような文脈で .AsUnitObservable() を利用することで、コードの意図が明確になり、他の開発者や自分自身が後で理解しやすくなります。

注意点

１．OnPointerExit の考慮

　マウスを押したままボタン外にカーソルを出すと OnPointerUpAsObservable が来ないことがあります。
OnPointerUpAsObservable が発火しないケース（ボタン外で離した場合）に備えて、OnPointerExitAsObservable も併用することを推奨します。

btnBuffDetail.OnPointerDownAsObservable().Select(_ => true)

    .Merge(btnBuffDetail.OnPointerUpAsObservable().Select(_ => false))

    // ここに追加
    .Merge(btnBuffDetail.OnPointerExitAsObservable().Select(_ => false))

    .Throttle(TimeSpan.FromSeconds(interval))

    // 以下は同じです

　挙動のイメージとしては

[PointerDown] → true
[PointerUp]   → false
[PointerExit] → false  ← 追加

　このような形です。

　全部 Merge して true / false が流れるストリームに統一するのがポイントです。

２．「長押しし続けている間の処理」には不向き

　この実装は「長押しを検知する」用途には適していますが、押している間ずっと処理を実行し続ける用途には向いていません。
その場合は以下のように Interval や Update を組み合わせる方法を検討してください。

「押しっぱなし中の処理」をやる場合の別パターン

btnBuffDetail.OnPointerDownAsObservable()
    .SelectMany(_ =>
        Observable.Interval(TimeSpan.FromSeconds(0.1f))
            .TakeUntil(btnBuffDetail.OnPointerUpAsObservable())
    )
    .Subscribe(_ =>
    {
        // 押している間ずっと呼ばれる
    })
    .AddTo(this);

　SelectMany オペレータを利用し、マウスを押したらストリームを開始するように設定しています。

　Observable.Interval メソッドを利用して、最初の値が発行されるまでの待機時間を設定しています。

　TakeUntil オペレータにより、マウスを離したら停止するように設定しています。

３．R3 利用時の補足

　R3では Observable のスケジューラ挙動が UniRx と異なる場合があるため、
時間系オペレータ（Throttle / Interval）を使用する際は挙動確認を推奨します。

　以上になります。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

UniRx を活用したマウス長押し機能の実装例 - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school