読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

UnityのuGUIで無限にスクロール出来るスクロールビューを作る

以前UnityのuGUIでスクロールビューを作る方法を紹介しました。


UnityのuGUIでスクロールビューを作る - テラシュールブログ

 

今度は無限にスクロールできるビューを作成します。

こんな感じです。

f:id:tsubaki_t1:20150122000214g:plain

 

仕組みは、スクロールした際に

アイテムが反対側に補充される仕組みです。

f:id:tsubaki_t1:20150122000404g:plain

 

使い方

作り方に関してですが、ちゃんと整理できていないので癖のある作り方をします。

 


Unity_UI_Samples/Assets/InfiniteScroll at master · tsubaki/Unity_UI_Samples · GitHub

  1. まず上記のリポジトリからInfiniteScrollフォルダを持ってきます。右のZipから落として解凍して中身をとってくればOK。
  2. メニューバー>UI>PanelPanelを作ります。
  3. 次にPanelの下にScrollRectコンポーネントを登録します。
    これがスクロールビューの基準点になります。
    ScrollRectのMovementTypeUnrestrictedに設定します。

    f:id:tsubaki_t1:20150122002433p:plain

  4. Panelの下にGameObjectを作り名前をViewとします。
    ViewAnchorsを上基準、Pivotはyを1とします。これは横スクロールを作りたい場合は、Anchorsを左、Pivotをx:0とします。
  5. ViewにInfinitie Scrollコンポーネントを追加します。

    f:id:tsubaki_t1:20150122001825p:plain

  6.  Viewの下にGameObjectを作成しItemBaseとします。

    このItemBaseの大きさがスクロールビューの大きさになるので、余白を保たせたい場合は少し大きめに作成します。ちなみに高さの調整は対応してません。その辺りは要望があれば対応しようと思います。
  7. ItemBaseの下にImageとかTextを置いて、アイテムを表現します。この辺りはプレハブでも良いですが、調整はシーン内に置いちゃった方が楽です。

    f:id:tsubaki_t1:20150122002253p:plain

  8. 最後にViewのInfinitie ScrollのItemBaseに先ほど作成したItemBaseオブジェクトを登録します。

これで無限スクロールするスクロールビューが出来ました。

 

f:id:tsubaki_t1:20150122005415p:plain

アイテムの内容調整

アイテムの内容を調整するには、OnUpdateItemにイベントを登録します。Infinitie Scrollはアイテムを表示する際にこのコールバックを呼び出しアイテムを調整します。

コールバックは以下の様な感じのフォーマットです。objに新しく表示するアイテムが格納されているので、そこからパラメータを調整する感じです。

public void OnUpdateItem (int itemCountGameObject obj)

 

またIInfiniteScrollSetupを継承したコンポーネントInfinitie Scrollをアタッチしたオブジェクトにアタッチされている場合、そのオブジェクトのOnPostSetupItemsをセットアップ時に呼び出します。

 

基本的にこの2つを差し替える事で、アイテムの内容を交換し少ないGameObject数で大量のデータを扱う感じです。

制限付きスクロールビューのやり方

最後に制限付き無限スクロールビューの作り方を紹介します。

 

制限付きスクロールビューは、少ないアイテム数で膨大なリストを表現する際にも利用することが出来ます。下の動画では、10個のアイテムで999個のリストを表現します。

f:id:tsubaki_t1:20150122000745g:plain

スクロールビューのアイテム一つ表現するのに4〜6個(多いと10個近く)のオブジェクトやコンポーネントを使うため、何も考えずに作ればあっという間にGameObject1万個とか使った超長いロード時間に悩まされる事になります。

その対策として、このような少ないアイテムで膨大なリストを表現する手段が使えます。(というか、実は無限スクロールビューが副産物でコッチが本命です)

 

このやり方は単純で、上記のスクロールバーに以下の項目を追加すればOKです。

  • 前手順で言うViewの大きさを全アイテムの長さだけ伸ばす
  • ScrollRectのMovementTypeElasticに設定する
  • 範囲外のアイテムはOnUpdateItemで非表示にしてしまう。

Elasticが設定されているため範囲は有限ですので、スクロールバーが使えます。

作り方が良くわからない場合、InfiniteScroll>Limited>Limitedシーンを参考にすると良いかもしれません。

 

もしスクロールビューを使っている時に初期化にやたらと時間がかかる場合、コレを使ってみてください。