コガネブログ

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

【Unity】高速かつメモリを節約してスクロールビューを実装できる「EnhancedScroller」紹介

f:id:baba_s:20170922201127p:plain

概要

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;
    }
}

Hierarchy ビューの「Game Object」を右クリックして「Create Empty」を選択します

f:id:baba_s:20170922212118p:plain

作成したオブジェクトの名前を「CellView」に変更して
Inspector で「Width」を「350」、「Height」を「50」に設定します

f:id:baba_s:20170922212129p:plain

f:id:baba_s:20170922212140p:plain

Hierarchy ビューの「CellView」を右クリックして「UI>Image」を選択します

f:id:baba_s:20170922213358p:plain

作成したオブジェクトを選択して
Inspector で「Width」を「350」、「Height」を「50」に設定します

f:id:baba_s:20170922212356p:plain

Hierarchy ビューの「Image」を右クリックして「UI>Text」を選択します

f:id:baba_s:20170922213347p:plain

「CellView」の Inspector で「Add Component」ボタンを選択して
さきほど作成した「CellView」スクリプトをアタッチします

f:id:baba_s:20170922212708p:plain

「CellView」の Inspector で「Cell View (Script)」の
「Cell Identifier」に「CellView」と入力します

f:id:baba_s:20170922213053p:plain

また、「Name Text UI」に、作成した「Text」オブジェクトをドラッグします

f:id:baba_s:20170922213104p:plain

「CellView」オブジェクトを Project ビューにドラッグしてプレハブにします

f:id:baba_s:20170922214547p:plain

「Scroller Controller」オブジェクトを選択して
Inspector で「Add Component」ボタンを選択して
さきほど作成した「Scroller Controller」スクリプトをアタッチします

f:id:baba_s:20170922213748p:plain

「Scroller Controller」の Inspector で「Scroller Controller (Script)」の
「Scroller」に「Scroller」オブジェクトをドラッグします

f:id:baba_s:20170922213945p:plain

さらに、「Cell Prefab」に、作成した「CellView」プレハブをドラッグします

f:id:baba_s:20170922214258p:plain

これで、ゲームを実行すると完成したスクロールが操作できます

ゲームを実行中に Hierarchy ビューを見ると、
スクロール内の要素がリサイクルされていることがわかります

f:id:baba_s:20170922215135p:plain

以上が「EnhancedScroller」におけるスクロールビューの基本的な作り方になります

まとめ

今回は「「EnhancedScroller」におけるスクロールビューの基本的な作り方を紹介しましたが
「EnhancedScroller」には他にも豊富な機能が用意されています

詳しくは公式のデモやマニュアルを参照して頂ければと思います