いんでぃーづ

ゲームメインのブレブレブログ。ゲーム,Unity,デザイン,UI/UX

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.


Amazon.co.jpアソシエイト


免責事項

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

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

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