Unityアセット：吸い付くスクロール MagneticScrollView

リスト構造のUIを作ったときに、選択したものが定位置に ヒュイっと吸い付く の実装したかったのですが、すでにいい感じのアセット売ってました。

使い方

まず何はともあれUIを配置しましょう。

ヒエラルキービューで Create > UI > MagneticScrollView と選択すれば、ベースとなるスクロールビューが配置されます。

ドラッグ検出などのコンポーネントもすでにセットアップされているので、このままエディタ上で実行すれば基本的な動きは確認できます。

シーン上の Magnetic Scroll View オブジェクトに Magnetic Scroll Rect コンポーネントがついており、このパラメータを調整することで色々カスタマイズできます。

メインで設定するパラメータ

• Viewport
  ドラッグ（スワイプ）を検出するRectTransformを指定します
• Alignment
  Vertical : 縦スクロール
  Horizontal : 横スクロール
• Layout Mode
  Circular : 要素が左右に回り込んでループ状に配置される
  Linear : 一直線に並ぶ
• Invert Order
  チェックを入れると並びが逆順になります
• Use Margin
  チェックを入れると、選択外の要素がViewport領域の外に配置され、Viewportの幅が要素間の間隔として使用されます
• Element Padding
  要素間のすきまを設定します

ケースごとの設定

以下、実装したいケースごとに分けて設定内容を解説していきます。

円形スクロール

ビューを3D円柱状に並べ、立体にならべることができます。

• Layout Mode
  Circularにする
• Curvature
  Convex : 奥側に回り込む
  Concave : 手前側に回り込む
• Circular Facotr
  値を大きくするほどカーブが大きくなります
• Infinite Scrolling
  無限にくるくるしたい場合はチェックを

また、CameraのProjectionパラメータは Perspective にしましょう。

円形スクロールだけど全部正面を向かせる

円形スクロールに加え、Rotate のチェックを外すと、すべての要素が正面を向きつつ回転します。

ただこのモードでは RectTransform の順が下のにあるオブジェクトが優先して描画される というuGUIの特性のためにバグって見えてしまいます。

CamraとかCanvasでうまい設定があるといいのですが思いつかん。
Paddingを十分に空けるか、スクリプトで制御するのが無難かもしれません。

選択中の要素をズームする

パラメータ設定にはないのでスクリプトで実装しましょう。

MagneticScrollRect コンポーネントは選択変更時に OnSelectionChange イベントを発行してくれるので、ここにリスナを登録します。

まず以下のようなスクリプトを作成し、リストの要素一つ一つにアタッチします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ListItem : MonoBehaviour {
    public void OnSelectChange(GameObject obj) {
        if (gameObject.Equals(obj)) {
            // 選択された
            transform.localScale = Vector3.one * 1.3f;
        }
        else {
            // 選択されてない
            transform.localScale = Vector3.one;
        }
   }
}

localScale変更はアニメーションにしたほうがいいでしょう。

その後、MagneticScrollView にこの関数を登録します。
インスペクタから設定するとこうなります。

もちろんスクリプトからリスナ登録してもかまいません。

---

多機能な上に使いやすい、しかも安い。これはマストバイなアセットです。