長押しボタンを作る！[Unity+UI]

2023-08-15

UIのイベント系インターフェースを利用して、長押しボタンを作って見ましょう

長押しボタンを作る

長押し用のコンポーネントはないので、スクリプトを使って自身で拡張するのが手っ取り早いです。

作れるもの

ボタンを長押しするとゲージがぐるっとまわり、長押し判定を取れるようになります。下図ではLong Tap!!と出てますが、これは編集で、実際にはDebug.Logに表示がされています。ゲームではそのタイミングで次のアクションを作ることで長押しが実装できます。

フェアリー

ゲージが不要な人はカットしてね

スクリプト

Updateメソッド内、「Long Tap」のログが出るタイミングが長押し判定になります。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class LongTap : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    private float time = 0;
    private bool isDown = false;
    private float longTapTime = 1.0f;

    [SerializeField] private Image circleImage;

    public void OnPointerDown(PointerEventData eventData)
    {
        isDown = true;
        time = 0f;
        circleImage.fillAmount = 0f;
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        isDown = false;
        circleImage.fillAmount = 0f;
    }

    void Update()
    {
        if (isDown)
        {
            time += Time.deltaTime;
            if (time >= longTapTime)
            {
                Debug.Log("Long Tap");
                isDown = false;
            }
            circleImage.fillAmount = time / longTapTime;
        }
    }
}

Unityのセットアップ

あとはUnity上にボタンになるImageやゲージ用のImageをセットします。

ボタンになるImage(名前：button)を追加
ゲージになるImage(名前：circle)を追加
- Source Imageに丸い画像をセットしてください
circle.Imageコンポーネントを変更
- Image Type：Filled
- Fill Method：Radial 360
- Fill Origin：Top
- Fill Amount：0
- Clock wise：disable(チェックはずす)
buttonにLongTapスクリプトをアタッチ
- Circle Image：circle