コガネブログ

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

【Unity】【UGUI Super ScrollView】バナーを作る

はじめに

 
「UGUI Super ScrollView」ではバナーを作ることができます

作成例は上記の GitHub リポジトリの
「Assets/Example/08_Banner/Example.unity」シーンで確認できます

作成例

f:id:baba_s:20180310192432g:plain

ソースコード

スクロールの項目で使用するデータ

public sealed class ListItemData
{
    private readonly string m_name;

    public string Name { get { return m_name; } }

    public ListItemData( string name )
    {
        m_name = name;
    }
}

スクロールの項目

using UnityEngine;
using UnityEngine.UI;

[DisallowMultipleComponent]
public sealed class ListItemUI : MonoBehaviour
{
    [SerializeField] private Button m_buttonUI  = null;
    [SerializeField] private Text   m_textUI    = null;

    private ListItemData m_data;

    private void Awake()
    {
        m_buttonUI.onClick.AddListener( () => print( m_data.Name ) );
    }

    public void SetDisp( ListItemData data )
    {
        m_data = data;

        m_textUI.text = data.Name;
    }
}

ドットの UI

using UnityEngine;

[DisallowMultipleComponent]
public sealed class DotUI : MonoBehaviour
{
    [SerializeField] private GameObject m_smallUI   = null;
    [SerializeField] private GameObject m_largeUI   = null;

    public void SetDisp( bool isLarge )
    {
        m_smallUI.SetActive( !isLarge );
        m_largeUI.SetActive(  isLarge );
    }
}

スクロールビュー

using SuperScrollView;
using System.Linq;
using UnityEngine;

[DisallowMultipleComponent]
public sealed class Example : MonoBehaviour
{
    [SerializeField] private LoopListView2  m_view      = null  ;
    [SerializeField] private GameObject     m_original  = null  ;
    [SerializeField] private DotUI[]        m_dotUIList = null  ;
    [SerializeField] private float          m_interval  = 0     ;

    private ListItemData[]  m_list  ;
    private float           m_timer ;

    private void Start()
    {
        m_list = Enumerable
            .Range( 0, 5 )
            .Select( c => ( c + 1 ).ToString( "0000" ) )
            .Select( c => new ListItemData( c ) )
            .ToArray()
        ;

        var initParam = new LoopListViewInitParam
        {
            mSmoothDumpRate     = 0.1f  ,
            mSnapVecThreshold   = 99999 ,
        };
        m_view.mOnSnapNearestChanged = OnSnapNearestChanged;
        m_view.InitListView( -1, OnUpdate, initParam );
    }

    private void OnSnapNearestChanged( LoopListView2 view, LoopListViewItem2 item )
    {
        int itemIndex       = m_view.CurSnapNearestItemIndex;
        int count           = m_list.Length;
        int currentIndex    = itemIndex % count;

        for ( int i = 0; i < count; i++ )
        {
            var dotUI = m_dotUIList[ i ];
            dotUI.SetDisp( currentIndex == i );
        }
    }

    private LoopListViewItem2 OnUpdate( LoopListView2 view, int index )
    {
        var itemObj = view.NewListViewItem( m_original.name );
        var itemUI  = itemObj.GetComponent<ListItemUI>();
        int count   = m_list.Length;

        int wrapindex = 0 <= index
            ? index % count
            : count + ( ( index + 1 ) % count ) - 1;
        ;

        var data = m_list[ wrapindex ];

        itemUI.SetDisp( wrapindex, data );

        return itemObj;
    }

    private void Update()
    {
        if ( m_view.IsDraging )
        {
            m_timer = 0;
            return;
        }
        m_timer += Time.deltaTime;
        if ( m_timer < m_interval ) return;
        SetSnapIndex( 1 );
    }

    private void OnGUI()
    {
        var option = GUILayout.Width( 64 );
        GUILayout.BeginHorizontal();
        if ( GUILayout.Button( "←", option ) )
        {
            SetSnapIndex( -1 );
        }
        if ( GUILayout.Button( "→", option ) )
        {
            SetSnapIndex( 1 );
        }
        GUILayout.EndHorizontal();
    }

    private void SetSnapIndex( int offset )
    {
        m_timer = 0;
        int currentIndex = m_view.CurSnapNearestItemIndex;
        int nextIndex = currentIndex + offset;
        m_view.SetSnapTargetItemIndex( nextIndex );
    }
}

ゲームオブジェクト

スクロールの項目

f:id:baba_s:20180309135934p:plain

ドットの UI

f:id:baba_s:20180309135941p:plain

スクロールビュー

f:id:baba_s:20180309135954p:plain

スクロールビューを操作するクラス

f:id:baba_s:20180310192551p:plain