いんでぃーづ

ゲームいろいろ、いろいろ自由

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

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

使い方

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

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

f:id:sugar_affordance:20180629095228p:plain

f:id:sugar_affordance:20180629095708p:plain

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

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

f:id:sugar_affordance:20180629095800p:plain

f:id:sugar_affordance:20180629095306p:plain

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

  • 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の特性のためにバグって見えてしまいます。

f:id:sugar_affordance:20180629095557g:plain

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 にこの関数を登録します。
インスペクタから設定するとこうなります。

f:id:sugar_affordance:20180629095818p:plain

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


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


“Unity” and Unity logos are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere, and are used under license.


免責事項

当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。

また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。

すべて自己責任でお願いします。