ただの適当な開発記

会社勤めしつつUnityでアプリ作ってる人の雑記

最適化されたスクロールビューをEnhancedScrollerで作る!

この記事は「Unity アセット真夏のアドベントカレンダー 2017」の29日目の記事です!
(アドベントカレンダーは初めて参加します\(^o^)/

今日はEnhanced Scrollerというアセットについて紹介しようと思います!

先日更新した記事でスクロールビューを最適化するにはデータ駆動の実装にするのが良いと書きました

cocokyoro.hateblo.jp

データ駆動のスクロールビューを簡単に実装できるのがEnhancedScrollerです。

こんなことができます

ちなみにEnhancedScrollerはデータ駆動である点以外にも様々な機能があり、書き出すとざっとこんな感じです

1.無限スクロール


2. スナッピング
中途半端なところに止まらないで一番近いセル*1にピタッと合わせるやつ

(なぜか公式のデモはスロットです笑

3. ジャンプ
指定したインデックスのセルに飛ぶやつ

4. 1つのスクロールビュー内に複数の大きさのセルを表示する

5. 下に引っ張って更新するやつ
TwitterとかFacebookとか最近のネイティブには大抵あるやつですね

6. セルの非同期読み込み


とまあこんな感じで最近のアプリ開発で使いそうな機能が簡単に実装できるようになっております。

EnhancedScrollerは個人開発でも会社のプロジェクトでもどちらでも導入しているのですが、特に会社では導入したお陰でパフォーマンスに苦労していた箇所が一気に解決できたので大助かりでした。
そのときはLINEのようなチャット画面を実装しようとしていたんですが、
・履歴の数だけセルを表示したい
・複数の種類のセル(自分の発言・相手の発言・日付の境界)を表示したい
・下に引っ張ったら更新したい
・画像を動的に読み込みたい
・軽くしたい
といったニーズがあったためまさにEnhancedScrollerがドンピシャだったわけです。

データ駆動のスクロール

さて、そもそもデータ駆動のスクロールビューを使うと、こんな感じになります。

このDemoでは1000件のセルを表示しています。
ですが実際にオブジェクトとして描画しているのはこの画像の赤枠の部分だけで、青枠の部分はオブジェクトとして生成していません。
f:id:cocokyoro:20170827221206p:plain

ヒエラルキー上の挙動を見てみるともっと分かりやすいです。


右側のヒエラルキーの部分を見ると、表示に併せてConainerという名前の子階層にあるCell~~というオブジェクトが切り替わっています。
(ちなみにこれは表示非表示の度にInstantiate・Destroyしているわけではなく、描画範囲内に必要な要素を事前に生成して描画時にGameObjectの名前も一緒に変えています)

この手法をであれば、1000個のセルだろうが全く問題なく表示ができてしまうわけです。
実際に1000個をそのまま描画するとFPSが大変なことになってしまいます。。
(そのあたりは前回の記事参照)

MVCライクな作り

EnhancedScrollerのいいところは、MVCを考慮した作りになっているため導入しやすい点です。

Modelとなるデータクラスはプロジェクト独自に定義

Viewとなるクラスは
EnhancedScrollerCellViewを継承

Controllerとなるクラスは
IEnhancedScrollerDelegateのインターフェースを実装

というように役割ごとに分離された実装になっているので、その通りに作れば綺麗な構成になります。

詳しい実装については公式のチュートリアルを見てもらうとわかりやすいです。

この作りはアセットを作る上でも大変参考になり、自分が作成したMultiButtonScrollerもEnhancedScrollerっぽい実装ができるようになっています。

まとめ

・デフォルトのScrollRectが使いにくい!
・たくさんデータを表示させたい!
スマホに最適化されたスクロールビューを使いたい!

という人は是非一度EnhancedScrollerを試してもらえるといいと思います!


そんなわけで私からの更新は以上になります。

明日8/30の担当者は今のところ未定ですが...!
次回8/31はLimes@XRDeveloperさんによる「Shader Forgeのこと」です!

(2017-08-29 23:11追記)
8/30の担当者はjojomonさんです!お楽しみに!

*1:EnhancedScrollerではスクロールビューの一つ一つの要素をセルと表現しています