概要

2015/5/28 に、uGUI 拡張用のアセット
「EnhancedScroller」がリリースされました

例えばスマホゲームで、プレゼントボックスやランキング一覧などの画面で
数百から数千件のデータをスクロールビューで表示する場合、
ベタに実装しようとするとオブジェクトを大量に生成しなければならず、
メモリ使用量や処理速度に問題が出てきてしまいますが

「EnhancedScroller」では描画する必要がある要素のみを画面に表示するため
メモリ使用量や処理速度などのパフォーマンスに優れたスクロールビューを実装できます

今回はチュートリアル形式で「EnhancedScroller」における
スクロールビューの作り方を紹介していきます

検証環境

Unity 2017.1.1 f1
EnhancedScroller 2.14.2

使い方

Unity メニューの「File>New Scene」を選択して新規のシーンを作成します

f:id:baba_s:20170922203335p:plain

Hierarchy ビューの「Create>UI>Canvas」を選択してキャンバスを作成します

f:id:baba_s:20170922204520p:plain

「Canvas」を右クリックして「Create Empty」を選択します

f:id:baba_s:20170922204614p:plain

作成したオブジェクトの名前を「Scroller」に変更します

f:id:baba_s:20170922204646p:plain

「Scroller」の Inspector で「Add Component」ボタンを選択して
「Enhanced Scroller」「Image」「Mask」をアタッチします

f:id:baba_s:20170922204747p:plain

f:id:baba_s:20170922204929p:plain

f:id:baba_s:20170922204938p:plain

「Scroller」の Inspector で「Width」を「400」、「Height」を「300」に設定します

f:id:baba_s:20170922213234p:plain

その後、「Scroller」を右クリックして「Create Empty」を選択します

f:id:baba_s:20170922205123p:plain

そして、「Scroller」の Inspector を表示して
「Scroll Rect」の「Content」に、作成したオブジェクトをドラッグします

f:id:baba_s:20170922205348p:plain

次に、Hierarchy ビューの「Create>Create Empty」を選択します

f:id:baba_s:20170922205505p:plain

作成したオブジェクトの名前を「Scroller Controller」に変更します

f:id:baba_s:20170922205605p:plain

Project ビューで 3 つの C# のスクリプトを作成して
それぞれの名前を「ScrollerData」「CellView」「ScrollerController」に変更します

f:id:baba_s:20170922205652p:plain

f:id:baba_s:20170922205829p:plain

「ScrollerData」スクリプトには下記のプログラムを貼り付けます

public class ScrollerData
{
    public string m_name;
}

「CellView」スクリプトには下記のプログラムを貼り付けます

using EnhancedUI.EnhancedScroller;
using UnityEngine.UI;

public class CellView : EnhancedScrollerCellView
{
    public Text m_nameTextUI;

    public void SetData( ScrollerData data )
    {
        m_nameTextUI.text = data.m_name;
    }
}

「ScrollerController」スクリプトには下記のプログラムを貼り付けます

using EnhancedUI.EnhancedScroller;
using UnityEngine;

public class ScrollerController : MonoBehaviour, IEnhancedScrollerDelegate
{
    public EnhancedScroller m_scroller   ;
    public CellView         m_cellPrefab ;
    
    private ScrollerData[] m_list;

    private void Start()
    {
        m_list = new []
        {
            new ScrollerData { m_name = "フシギダネ"    }, 
            new ScrollerData { m_name = "フシギソウ"    }, 
            new ScrollerData { m_name = "フシギバナ"    }, 
            new ScrollerData { m_name = "ヒトカゲ"      }, 
            new ScrollerData { m_name = "リザード"      }, 
            new ScrollerData { m_name = "リザードン"    }, 
            new ScrollerData { m_name = "ゼニガメ"      }, 
            new ScrollerData { m_name = "カメール"      }, 
            new ScrollerData { m_name = "カメックス"    }, 
            new ScrollerData { m_name = "キャタピー"    }, 
            new ScrollerData { m_name = "トランセル"    }, 
            new ScrollerData { m_name = "バタフリー"    }, 
        };
        
        m_scroller.Delegate = this;
        m_scroller.ReloadData();
    }

    public int GetNumberOfCells( EnhancedScroller scroller )
    {
        return m_list.Length;
    }

    public float GetCellViewSize( EnhancedScroller scroller, int dataIndex )
    {
        return 60f;
    }

    public EnhancedScrollerCellView GetCellView( EnhancedScroller scroller, int dataIndex, int cellIndex )
    {
        var cellView = scroller.GetCellView( m_cellPrefab ) as CellView;
        cellView.SetData( m_list[ dataIndex ] );
        return cellView;
    }
}