コガネブログ

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

【Unity】uGUI でスナップできるスクロールビューを実装できる「EnhancedScrollView」紹介

はじめに

「EnhancedScrollView」を Unity プロジェクトに導入することで
uGUI でスナップできるスクロールビューを実装できるようになります

使用例

f:id:baba_s:20190421130010g:plain

f:id:baba_s:20190421130022g:plain

使い方

スクリプトの準備

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class MyUGUIEnhanceItem : EnhanceItem, IPointerClickHandler
{
    // クリックされた時に呼び出されます
    public void OnPointerClick( PointerEventData eventData )
    {
        OnClickEnhanceItem();
    }

    // 要素の奥行きを設定する時に呼び出されます
    protected override void SetItemDepth
    ( 
        float depthCurveValue, 
        int   depthFactor    , 
        float itemCount 
    )
    {
        int newDepth = ( int )( depthCurveValue * itemCount );
        transform.SetSiblingIndex( newDepth );
    }

    // 要素が中央に来たかどうか確認する時に呼び出されます
    public override void SetSelectState( bool isCenter )
    {
        var image = GetComponent<Graphic>();
        image.color = isCenter ? Color.white : Color.gray;
    }
}

オブジェクトの設定

f:id:baba_s:20190421133009p:plain

シーンのキャンバス内に Image オブジェクトを作成して
「Enhance Scroll View」コンポーネントをアタッチします

f:id:baba_s:20190421133447p:plain

「Input Type」を「UGUI Input」に変更します

f:id:baba_s:20190421133012p:plain

そのオブジェクトの子供に、スナップしたい要素のオブジェクトを複数作成して
先ほど作成したスクリプトと「U Drag Enhance View」をアタッチします

f:id:baba_s:20190421133015p:plain

「Enhance Scroll View」の「Source Camera」にシーンのカメラを設定し、
子オブジェクトを「List Enhance Items」の項目に設定します

f:id:baba_s:20190421133028p:plain

そして、「Scale Curve」は上記のように、

f:id:baba_s:20190421133030p:plain

「Position Curve」はこのように

f:id:baba_s:20190421133033p:plain

「Depth Curve」は上記のように設定します

f:id:baba_s:20190421133650p:plain

AnimationCurve を設定する時はループ設定を適用する必要があります
(AnimationCurve の頂点の歯車をクリックして「Loop」を選択します)

以上で uGUI でスナップできるスクロールビューを使用できるようになります