Rect』使い方をまとめました。Rectとは?Unity標準のスクロールビューは、要素の数が増えるほど処理負荷とメモリの使用量が大きくなるため、スケール可能にするためには工夫が必要です。表示範囲外のGameObjectを非アクティブにしたり、オブジェクトプールを使って使い回したりすることが考えられます。Rectを使うとこのような効率的なスクロールビューを簡単に実現することができます。日本ではあまり使われてなさそうな気がしますが、現時点で約1400Starsの人気ライブラリで、更新頻度も高めです。github.comこのライブラリはMITライセンスのOSSとして公開されています。Managerから以下のURLを入力します。https://github.com/qiankanglai/LoopScrollRect.gitシンプルなスクロールビューを実装するスクロールビューを作成するさてそれではまずシンプルな縦スクロールビューを実装してみます。横スクロールビューは割愛しますが、基本的には縦と同じ手順で作成できます。Rectからセットアップ済みのGameObjectを生成します。このGameObjectのルートがスクロールビューの範囲となるので、大きさを適切に設定しておきます。次その子GameObjectであるContentの設定をします。SizeのHeightにチェックを入れておきます。Groupと同様に行えます。Content要素のPrefabを作成する次にその子としてスクロールビューの要素となるGameObjectを作成していきます。Heightを使って計算します。Heightを設定します。Heightが計算されるため、このあたりは必要に応じて設定するようにしてください。要素が作れたらこれをPrefabにしておきます。今回は下図のようにImageとTextで構成されるPrefabを作りました。Prefabスクリプトを作成する次にLoopScrollRectを初期化するためのスクリプトを作成します。以下のようにLoopScrollPrefabSourceとLoopScrollDataSourceを実装したオブジェクトをLoopScrollRectにアサインします。}}LoopScrollPrefabSourceはLoopScrollRectからGameObjectが要求・返却された時の処理を定義します。表示に使わないGameObjectを非アクティブにしたり、オブジェクトプーリングをしたい時にはこの辺りに処理を書きます。LoopScrollDataSourceには各要素を表示する際のセットアップ処理を定義します。動作確認それでは一度動作確認をしてみます。Rectコンポーネントと同じGameObjectにアタッチし、Prefabプロパティに先ほど作ったPrefabをアサインします。TotalCountは100に設定しておきます。これで再生すると以下のような結果が得られます。結果なおついでにスクロールバーを設定していますが、これの設定方法は通常のScrollRectと同様の設定方法なので割愛します。オブジェクトを使い回すさてここまでの実装では画面内に入るたびにGameObjectをインスタンス化し、画面外に出るたびに破棄していました。これは非効率なのでオブジェクトを使い回すことで効率化します。Unityでは2021からオブジェクトプールが実装されたので、今回はこれを使ってみます。docs.unity3d.com実装は以下の通りです。}}これでオブジェクトが使い回されるようになりました。無限ループするビューを作るさてここまでの実装では、スクロールし続けてTotalCountに設定した数が表示された時点でスクロールが止まります。このときスクロールを止めずに最初の要素にループさせるには、TotalCountに-1を入力します。この場合、LoopScrollDataSource.ProvideDataに渡されるインデックスの値は無限に増えていくため、そこから以下のようにデータのインデックスを求める必要があります(コメント部分)。}}これを実行すると以下の結果が得られます。要素がループしていることがわかります。上図の通り、無限ループを行う際にはスクロールバーが機能しませんのでご注意ください(機能したとしても挙動がわけわからなくなるのでそれはそう)。Heightを変更します。}}実行結果は以下のようになります。今回は奇数のインデックスのセルと偶数のインデックスのセルでそれぞれ別の高さを設定しています。要素ごとにPrefabを変える次に要素ごとにPrefabを変更してみます。Multiコンポーネントを使用します。InspectorをDebugモードにしてコンポーネントを差し替えるのが簡単です。差し替えスクリプトは以下のように変更します。LoopScrollDataSourceの代わりにLoopScrollMultiDataSourceを実装します。その他の変更点はコメントとして記述しました。}}実行結果は下図の通りとなります。今回は3種類のPrefabを設定しています。結果グリッドスクロールビューを実装する最後に要素をグリッドで並べたスクロールビューを実装します。Groupを使用します。大半のプロパティは任意ですが、ConstraintをFlexibleにすることはできません。Sizeから取得されます。Elementをアタッチする必要はありません。グリッドスクロールビューの実行結果は以下の通りとなります。Sizeから取得されます。Elementをアタッチする必要はありません。グリッドスクロールビューの実行結果は以下の通りとなります。1はてなブログをはじめよう!halya_11さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。