コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity】uGUI において多機能でアニメーションも適用可能なスクロールビューを実装できる「FancyScrollView」紹介

はじめに

「FancyScrollView」を Unity プロジェクトに導入することで、uGUI において
多機能でアニメーションも適用可能なスクロールビューを実装できるようになります

目次

サンプル

基本

f:id:baba_s:20180105164617g:plain

押下イベント

f:id:baba_s:20180105164648g:plain

無限スクロール

f:id:baba_s:20180105164710g:plain

フォーカス

f:id:baba_s:20180105164742g:plain

使用例

ここではシンプルなスクロールの作成方法を紹介していきます

f:id:baba_s:20180105172803p:plain

詳細な作成方法は、「Examples」フォルダ内のサンプルや
GitHub で公開されているドキュメントを参照してください

スクリプトの用意

f:id:baba_s:20180105171148p:plain

「FancyScrollView」を使用してスクロールビューを構成する場合、
少なくとも3種類のスクリプトが必要になります

セルの表示に使用するデータ

public class MyCellData
{
    public string Message;
}

セルを管理するコンポーネント

using FancyScrollView;
using UnityEngine;
using UnityEngine.UI;

public class MyScrollCell : FancyScrollViewCell<MyCellData>
{
    public Text message;

    // 表示を更新する時に呼び出されます
    public override void UpdateContent( MyCellData itemData )
    {
        message.text = itemData.Message;
    }

    // 位置を更新する時に呼び出されます
    // Animator を使用することでアニメーションを適用することも可能です
    public override void UpdatePosition( float position )
    {
        var pos = transform.localPosition;
        pos.y = Mathf.Lerp( 288, -288, position );
        transform.localPosition = pos;
    }
}

スクロールビューを管理するコンポーネント

using FancyScrollView;
using System.Linq;

public class MyScrollView : FancyScrollView<MyCellData>
{
    public ScrollPositionController controller;

    private void Awake()
    {
        // セルのデータのリスト
        datas = Enumerable.Range( 0, 50 )
            .Select( i => new MyCellData { Message = "Cell " + i } )
            .ToList()
        ;

        // セルの数を設定
        controller.SetDataCount( datas.Count );

        // セルの位置を更新する時に呼び出されるコールバックを設定
        controller.OnUpdatePosition( UpdatePosition );

        // 表示を更新
        UpdateContents();
    }
}

オブジェクトの作成

f:id:baba_s:20180105171448p:plain

「FancyScrollView」を使用してスクロールビューを構成する場合、
セルのプレハブと、スクロールビューのオブジェクトを作成します

セルのプレハブ

f:id:baba_s:20180105172503p:plain

Image や RawImage などのオブジェクトを作成して、
「MyScrollCell」をアタッチしてパラメータを設定します
そして、プレハブにしておきます

スクロールビューのオブジェクト

f:id:baba_s:20180105171602p:plain

Image のオブジェクトを作成して、
「MyScrollView」と「ScrollPositionController」をアタッチして
下記のパラメータを設定します

MyScrollView

項目 内容
Cell Interval セル同士の間隔
Cell Offset セルの初期位置
Loop 無限スクロールするかどうか
Cell Base セルのプレハブ
Cell Container セルを管理するオブジェクト(自分自身で可)
Controller スクロールビューを操作するコントローラ(自分自身)

ScrollPositionController

項目 内容
Viewport ビューポート(自分自身)
Direction Of Recognize スクロール方向
Movement Type スクロールを範囲外まで引っ張った時の挙動
Scroll Sensitivity スクロールの感度(スワイプした時の移動量)

完成

f:id:baba_s:20180105173116g:plain

以上でシンプルなスクロールが動作することが確認できます

関連記事