【Unity】テーブル・グリッド表示するassetのEnhancedScrollerとOptimized ScrollView Adapterの比較

こんにちは。パピヨン[もぐめっと](https://mogmet.com/)です。

![IMG_8206.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/22169dc1-8c1f-4073-b2ac-c2be9aca213d.jpeg)

最近暑いので時折、避暑しながら働いてます。

今回はリスト表示やグリッド表示（iOSでいうTableView / CollectionView。AndroidでいうListView/RecyclerView）するときに使えそうなassetについて2つ使ってみたので紹介したいと思います。

結論だけ知りたい方は[使ってみての比較](#使ってみての比較)まで飛んでください。

## EnhancedScrollerの紹介

[EnhancedScriller](https://assetstore.unity.com/packages/tools/gui/enhancedscroller-36378)は評価も高くたくさんの方が使っているアセットのようです。

表示されてないセルのViewをうまく再描画してリスト表示も最適化して高速で表示することができます。


どんなことができるかは[デモ](https://echo17.itch.io/enhancedscroller-demo)を見ていただくのかが早いですね。

マニュアルとかは割と整っているので実装は簡単にできるんじゃないかと思います。

また、iosのDelegateパターンのように作られているので非常に馴染み深い形で作成することができます。

何個のセルを返して、どれくらいの高さで、何個目のセルはどういう設定で。。。みたいなパターンですね。

サンプルよりコード抜粋

```c#
        public int GetNumberOfCells(EnhancedScroller scroller)
        {
            return _data.Count;
        }

        public float GetCellViewSize(EnhancedScroller scroller, int dataIndex)
        {
            // we pull the size of the cell from the model.
            // First pass (frame countdown 2): this size will be zero as set in the LoadData function
            // Second pass (frame countdown 1): this size will be set to the content size fitter in the cell view
            // Third pass (frmae countdown 0): this set value will be pulled here from the scroller
            return _data[dataIndex].cellSize;
        }

        public EnhancedScrollerCellView GetCellView(EnhancedScroller scroller, int dataIndex, int cellIndex)
        {
            CellView cellView = scroller.GetCellView(cellViewPrefab) as CellView;

            // tell the cell view to calculate its layout on the first pass,
            // otherwise just use the size set in the data.
            cellView.SetData(_data[dataIndex], _calculateLayout);

            return cellView;
        }

```

日本語での細かい使い方などは下記を参照。
[【Unity】高速かつメモリを節約してスクロールビューを実装できる「EnhancedScroller」紹介（$21.60）](https://baba-s.hatenablog.com/entry/2017/09/25/100000)
[【Unity】uGUIでスクロールビューを実装するならコレ！Enhanced Scrollerをサクッと使う](https://light11.hatenadiary.com/entry/2019/06/23/214020)

リスト表示に特化していて実装しやすいのですが、Grid表示に関してはCellの中にviewを固定数の分だけいれてみたいな実装になるので、無理やりGrid表示している感じです。

**柔軟に1列に入るgridの数を調整してはくれません。**

## Optimized ScrollView Adapter（OSA）の紹介

[Optimized ScrollView Adapter](https://assetstore.unity.com/packages/tools/gui/optimized-scrollview-adapter-68436?locale=ja-JP)も結構レビューも高いアセットになります。

EnhancedScrollerと同様に、こちらも表示されてないセルのViewをうまく再描画してリスト表示も最適化して高速で表示することができます。

できることは[Demo](https://thefallengames.com/unityassetstore/optimizedscrollviewadapter/)をご参照ください。

ただ、こちらはパフォーマンスが凄く、20億個のアイテムを処理できるそうです。

その方法としては表示するitem自体をMonoBehaviorを使って書かずにAbstractItemViewsHolderを使うことで処理を軽くしているそうです。

cf: [FAQ](https://docs.google.com/document/d/1iejN7K3iQ2AGeaja-kbL38C-JwE46SJjCHROIs8h1Vg/edit#bookmark=id.h7931pnb9ap1)

> **Why not use MonoBehaviour as a base class for the Items (AbstractItemViewsHolder)?**
> Performance. 

一応無料版もありますが、ほしい機能は割と有料版に集約されてるので使うなら有料版使っちゃっていいかもです。
cf: [20190827
【無料化アセット】スクロールビューを拡張して「ListView, GridView」を再現するスクリプト。ソシャゲのカード一覧のようなグリッドビューが必要なときに「ScrollView Adapter (ListView, GridView)」](https://www.asset-sale.net/entry/ScrollView_Adapter_%28ListView%2C_GridView%29)


[Manual](https://docs.google.com/document/d/1iejN7K3iQ2AGeaja-kbL38C-JwE46SJjCHROIs8h1Vg/edit)もありますが、一部Demoを見てくれみたいな感じで整備が間に合ってない感じはあります。

リスト表示もいい感じに収まってくれるグリッド表示もいろんなカスタマイズも可能です！！！

可能です！！！

が！！！！！！！

**学習コストがめっちゃ高いです。**

実装の癖が強いのでサンプルを読み解くのに時間がかかります。

例えば、itemの代わりになるprefabはscrollviewと同じ階層においておかないといけないとか。。。

（いつか実装方法書いてみます）


## 使ってみての比較

### パフォーマンスが違う

例えばセルごとにサイズが違うといったリスト表示、よくやると思います。

![スクリーンショット 2020-09-03 12.34.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ca90d729-555d-582a-9807-03f7024e576b.png)

こういった表示をやる場合に、EnhancedScrollerは高さ計算のためにReloadして、そして描画のために再度Reloadして、、、ということをしているので非常にパフォーマンスがよろしくないです。

OSAは高さ計算なども考慮した形で表示してくれるのでパフォーマンスは良いです。

### 自由度

OSAは自由度が高く色々設定できます。

だいたいのことは実現ができるんじゃないかとは思います。

Demoの多さが実現できる多さを物語ってます。（fpsを表示しているあたりがパフォーマンスいいアピールしてて好印象）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/bcab1ea1-6c4e-79c5-3f9d-3f9e178ef527.png)

### 比較表

できることできないことの比較を表にするとこんな感じです。

| | EnhancedScroller | Optimized ScrollView Adapter |
|:-----------|:------------:|:------------:|
| リスト表示 | ○        | ○         |
| グリッド表示 | △ | ○ |
| パフォーマンス | △ | ○ |
| 実装コスト | ○ | ✗ |
| 動的サイズ表現 | △ | ○ |
| カスタマイズ性 | ○ | ◎ |

## 総評

デザインでのこだわりもそこまでなく、さくっと実装するならEnhancedScroller、凝ったことをやるのであればOptimized ScrollView Adapterがおすすめといった形になります。

assetは使ってみないと使えるかどうかという判定が難しいので是非皆さんの参考になればと思います。

[宣伝]
[ワンナイト人狼](https://werewolf.mogmet.com/)のアプリ版を作ってます！よかったら遊んでね！

firebaseを使ってフォトコンサイトの[Camecon](https://camecon.me/)や、匿名でチャットができる[Offcha](https://offcha.com/)とかも作ってます！よかったら使ってみてね！