こんにちは。情熱開発部 プログラム2課の竹下です！
寒くなり冬の訪れを感じております、冬は指先が凍えてどうしても動きが遅くなってしまいますね。
プログラムでも処理負荷が増えると動作が遅くなってしまいます。
そんな処理負荷を抑えつつリストを実装できるListViewを紹介していきます。
※使用バージョン：UE5.4.4
ListViewの構成
ListViewの実装には下記の3つのBPが必要になります。
- 各項目情報用のBP
- 各項目ごとに設定する情報を持つBPです。
- 100項目を追加する際は、このBPを100個生成する必要があります。
- 各項目表示用のWBP
- 1項目の表示するレイアウトを持つWBPです。
- リストで画面内に表示する項目数が生成されます。
- リスト表示用のWBP
- Listviewを配置したWBPになります。
ListViewの実装手順
- 各項目情報用のBPの作成
- UObjectを継承したBPを作成し項目ごとに持ちたい情報を変数として作成します。
- 今回はTextとIndexを宣言しました。
- 各項目表示用のWBPの作成
- 今回は画像とテキストを配置したWBPを作成しました。
- クラス設定から実装インターフェイス「User ObjectList Entry」を追加します。
- リスト表示用のWBPの作成
- CanvasとListViewを配置しています。
- リストへの項目追加
- ListViewに追加するのは各項目情報用のBPになります。
- 項目の数だけ生成し追加する必要があります。
- 表示時の初期化
- ListViewでは表示している数だけしか、各項目表示用のWBPを生成しておらず使いまわしています。
- そのため項目の表示が切り替わる際に設定を行う必要があります。
- 切り替わる際は「Event On List Item Object Set」が呼び出されるため、ここに初期化を記述します。
- 今回はテキスト設定と画像の非表示設定を行っております。
- 項目選択中の設定
- 項目の選択切り替えが行われると「Event On Item Selection Changed」が呼び出されます。
- 現在の選択が分かりやすくなるように画像の表示を切り替えます。
- ここまでの実装で基本的なリスト動作は出来ました。
表示中のリスト項目の更新
選択している項目から遠い項目ほど、透明度が高くなるように更新をかけるようにしてみます。
- 表示している項目のWBPは、「Get Displayed Entry Widgets」で取得できます。
- 現在選択中のIndexを渡し、各項目がそのIndexとの差で透明度を変更するようにしました。
実装で詰まった点
表示している項目のWBPを取得できる関数「Get Displayed Entry Widgets」の配列の並びは表示順ではなく追加順となっている点に注意が必要です。
「Get Displayed Entry Widgets」での配列Indexで選択項目からの距離を取ろうとしましたが、リスト生成時のみ表示順になっており、そのまま実装するとスクロールを行った後に表示が崩れてしまいました。
そのため、項目情報のBPに表示順の番号を持たせて、参照することで表示順のWBPを取得できるようにしました。
負荷計測
ListViewでは、項目数を増やしても表示数は変わらないため負荷は大きく変わりません。
左が項目を100個追加したときで、右が1万個追加した際です。
UnrealInsightsで確認すると、項目数が100倍になってもWBP_Listの処理が152.4㎲と163.2㎲と変わっていないことが分かりました。
ScrollBoxを使用してリスト表示をしていたのを、ListViewに置き換えたところ20FPS近く上がる箇所もありました。
ScrollBoxで1万個の項目を追加するとWBP_Listの処理に2.7msかかってしまい、大きく処理速度が落ちることが分かりました。
まとめ
ListViewを使用するメリットとデメリット
- メリット
- 項目数が増えても負荷が大きく変わらない
- 選択項目の取得が容易
- デメリット
- 各項目表示用のWBPは一種類しか指定できない
項目ごとのUIが大きく変わらず、1種類のWBPで出来る場合は、ListViewでの実装を考えるのが良さそうです。
UEでリストを実装する際のご参考になれば幸いです。
参考サイト
【免責事項】
本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。
