【Unity】uGUIでスクロールビュー

スクロールビュー、非常に使えそうでしかもかっこいいので作ってみます。
やることを箇条書きにしてみましょう。

まずノードプレハブの用意

① Canvas > Image(name: Node) 作成
② Node > Image, Text, Toggle 配置、アンカー及び位置調整、Toggle の Label は消していい。
③ Node に LayoutElement Component 追加
④ LayoutElement の MinHeight に Node の Height と同じ値を入れる
⑤ Node をプレハブ化

続いてスクロールビューの作成

① Canvas > Create Empty(name: ScrollView)
② ScrollView のサイズ調整、範囲の設定
③ ScrollView > ScrollRect, Mask, Image Component を追加
④ ScrollView > Create Empty(name: Content)
⑤ Content の RectTransform の Pivot を (x:0.5, y:1.0) とする。（(x:0.5, y:0.0) でも良い。）
⑥ Content に VerticalLayoutGroup, ContentSizeFitter Component を追加
⑦ ContentSizeFitter の VerticalFit を Preferred size に設定
⑧ ScrollRect の Content に Content（オブジェクト）を指定
（ここでシーンのセーブ推奨。PCによっては Node が Content の範囲から溢れた時にディスプレイドライバが停止する。ScrollView に追加した Mask Component のShow Mask Graphic のチェックを外していると高確率で起こる。）
⑨ Content の下に Node(プレハブ) を沢山配置

Content の範囲から溢れるほど Node を配置（溢れた Node はマスクされます）
Mask の Show Mask Graphic のチェックを外している場合。

Mask の Show Mask Graphic のチェックをつけている場合。
付けないほうがかっこいい。（ディスプレイドライバが停止しなければ言うことないんだけど…）

動作チェック

割といいですね。
Contentの領域外に出ないように調整できればなお良いと思いましたのでちゃちゃっとやります。
ScrollView の ScrollRect Component の Horizontal のチェックを外します。

これで水平方向の移動が制限されます。

とりあえずこんなところですかね。
スクリプトを使えばuGUIのノードを動的に作れるらしいのですがまだそこまでやる必要はないかな。
アイテム沢山装備品沢山な ARPG とか FPS とかになってくると必要なんだろうけど現状考えていないので。


最近 uGUI をいじっていて便利な所だったりこれってどうなの？って所だったりが少しずつ見えてきたように思います。
画面の大きさ（Gameビューの大きさ）で Text の文字の解像度が自動調整されるとか…どうなんでしょうね、対応策は探せばあるのかな。
なんにせよ便利な代物に変わりはないですね。楽しいですよ、uGUI、是非やってみてください。



参考サイト：
テラシュールブログ UnityのuGUIでスクロールビューを作る