スクロールバーの判定(タッチ範囲)だけ広げる【Unity】【uGUI】
概要
上図のように、UnityのuGUIで作成するスクロールバーの見た目を変えずに判定範囲だけ広げる方法を紹介します。
プログラムは一切不要です。
また、チャタリングの抑制方法も合わせて共有します。
執筆時のUnityバージョン
2019.4.1f1
追記
Unity 2020.1 からは raycastPadding というプロパティが追加されているので下記の設定は必要なさそうです。
（とはいえSceneView上で設定した範囲が見えないらしいのでちょっと不便……）
実装方法
まずはScrollbarを生成します↓
Scrollbar Verticalゲームオブジェクト直下にImageコンポーネントを付けたHitBoxゲームオブジェクトを作成します。
HitBoxのImageのAlpha値は0に設定、CullTransparentMeshにチェックを入れます。これにより、ドローコールが発生しなくなるので負荷軽減します。
Anchorは親よりも幅が大きなるように設定しまます。今回は横幅を+40して以下のような設定にしました。
これで完成……と言いたいとこですがこの透明な部分を長押しすると↓のようにチャタリングが発生してしまいます。（めっちゃ高速にリストが上下する現象）
調査の結果、マウスの長押し位置とScrollbarコンポーネントのHandleRectで指定したゲームオブジェクトが重ならないと、ドラッグ中判定が終わらずチャタリングが発生します。
ScrollbarがHandleRectで指定されたもの以外からドラッグの影響を受けるのを想定されていないのでしょう。たぶん。
それでは上記の対策を施します。
まずHitBoxとつまみ部分（Handle）の幅がピッタリ一致している必要がありますので、Handleの幅を広げる……とUI画像も一緒に広がってしまうので、
ここでは新たに GrabArea というHandleの当たり判定用のゲームオブジェクトをSliding Area直下に作成します。
Imageコンポーネントの設定はHitBoxと同じにし、サイズもHandle用に調整します。
そしてGrabAreaの子にHandleを移動させます。図にすると以下になります。
これで画像の外を長押ししてもちゃんとHandleが停止し、チャタリングが発生しなくなりました。
