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

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

＜実装動画＞

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

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

設計

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

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

サンプルコード

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

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

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

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 を利用したマウスの長押し処理
        // 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)を使って、それぞれTrueとFalseに変換します。

　変換したストリームをThrottleで0.5秒ごとに制御します。これにより、長押し中でも interval(0.5) 秒ごとに1回だけイベントが流れます。

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

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

＜AsUnitObservable() オペレータ＞

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

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

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

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

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

印刷する

コメント（0）

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

コメントをかく

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

i-school