完全に一発芸です。
続きを読むリスト構造のUIを作ったときに、選択したものが定位置に ヒュイっと吸い付く の実装したかったのですが、すでにいい感じのアセット売ってました。
まず何はともあれUIを配置しましょう。
ヒエラルキービューで Create > UI > MagneticScrollView と選択すれば、ベースとなるスクロールビューが配置されます。
ドラッグ検出などのコンポーネントもすでにセットアップされているので、このままエディタ上で実行すれば基本的な動きは確認できます。
シーン上の Magnetic Scroll View オブジェクトに Magnetic Scroll Rect コンポーネントがついており、このパラメータを調整することで色々カスタマイズできます。
以下、実装したいケースごとに分けて設定内容を解説していきます。
ビューを3D円柱状に並べ、立体にならべることができます。
また、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 にこの関数を登録します。
インスペクタから設定するとこうなります。
もちろんスクリプトからリスナ登録してもかまいません。
多機能な上に使いやすい、しかも安い。これはマストバイなアセットです。
“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.
当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。
また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。
すべて自己責任でお願いします。