
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

マイケル
今回はゲームでよく使う、
このようなスクロールビューを作っていきます!
このようなスクロールビューを作っていきます!
↑スクロールビュー

エレキベア
これはよくあるやつクマね〜〜

マイケル
少し構成が複雑だけど、形を覚えていこう!
参考書籍

マイケル
画面構築するにあたり参考にした書籍はこちらです!

マイケル
今回紹介するスクロールビューだけでなく
UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います!
UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います!

エレキベア
クマも所有しているクマ〜〜〜
スクロールビューの実装

マイケル
それでは早速作っていきましょう!

マイケル
最終的には下記のような構成で作成します!
スクロールビューのオブジェクト構成
ScrollWindow | – ウィンドウの背景 |
ScrollView | – スクロールさせるエリア |
ScrollContent | – スクロールさせる内容(親) |
Object | – スクロールさせる内容(子) |
ScrollBar | – スクロールバー |

エレキベア
たくさんあるクマね〜〜〜

マイケル
上から一つ一つ作っていこう!
ScrollWindow作成

マイケル
まずはウィンドウのベースとなる背景画像を作成しましょう!
↑ScrollWindow(Image)の作成
ScrollViewの作成

マイケル
そして次にスクロールするエリアを空のGameObjectで作成しましょう!
位置は上、大きさは背景画像よりも少し小さめにします。
位置は上、大きさは背景画像よりも少し小さめにします。
↑ScrollWindow(空のGameObject)の作成

マイケル
作成したらScroll Rectコンポーネントをアタッチして、
スクロールする方向を設定します!
スクロールする方向を設定します!
↑ScrollRectのアタッチと方向の設定(Verticalチェックで縦方向)
ScrollContentの作成

マイケル
そして次にスクロールする内容をまとめる親オブジェクトを
空のGameObjectで作成します!
空のGameObjectで作成します!
↑ScrollContent(空のGameObject)の作成

マイケル
スクロールする内容の大きさでサイズが変動するよう、
Content Size Fitterをアタッチしておきましょう!
Content Size Fitterをアタッチしておきましょう!
↑Content Size Fitterのアタッチと伸縮方向の設定

マイケル
そしてその中にスクロールする内容を作成します!
今回は縦に長いテキストオブジェクトを作成しました。
今回は縦に長いテキストオブジェクトを作成しました。
↑スクロールさせる内容(ここではText)の作成

マイケル
最後に、作成したScrollContentオブジェクトを
ScrollRectコンポーネントに設定しましょう!
これでスクロールするようになるはずです!
ScrollRectコンポーネントに設定しましょう!
これでスクロールするようになるはずです!
↑Scroll RectにScrollContentを設定

マイケル
追加で、ImageコンポーネントとMaskコンポーネントをアタッチしておくと、
子要素スクロール範囲外部分を非表示にすることができます!
子要素スクロール範囲外部分を非表示にすることができます!
↑スクロール範囲外の非表示設定

マイケル
これまでの設定で、下記のように
スクロールするようになっているはずです!
スクロールするようになっているはずです!
↑スクロールビューの完成

エレキベア
できたクマ〜〜〜〜
ScrollBarの作成

マイケル
これだけでもいいですが、見栄えをよくするため
スクロールバーを追加しましょう!
UI -> Scrollbarオブジェクトを作成します!
スクロールバーを追加しましょう!
UI -> Scrollbarオブジェクトを作成します!
↑Scrollbar(Scrollbar)の作成

マイケル
Directionにスクロールバーの方向を設定し、
大きさと位置は適宜調整しましょう!
大きさと位置は適宜調整しましょう!
↑スクロール方向の設定

マイケル
最後に、ScrollRectコンポーネントにスクロールバーを設定すれば完了です!
↑Scroll RectにScrollbarを設定
↑スクロールビュー(スクロールバー有り)

エレキベア
それっぽくなったクマ〜〜〜〜
あれこれな情報

マイケル
おまけになりますが、スクロールビューを作成する中で気付いた
あれこれについて共有します!
あれこれについて共有します!
Layout Groupの活用

マイケル
まず一つ目がLayout Groupコンポーネントの活用です!
下記のようにScrollContentオブジェクトにコンポーネントを追加することで、
子要素のオブジェクトを整列することができます!
下記のようにScrollContentオブジェクトにコンポーネントを追加することで、
子要素のオブジェクトを整列することができます!
↑Grid Layout Groupの追加
↑スクロールビュー(グリッドビュー)

マイケル
これを利用すればアイテム一覧などの画面を
簡単に作成することができます!
簡単に作成することができます!

エレキベア
これは便利クマね〜〜〜

マイケル
Grid Layout Groupの他にも、縦方向、横方向のみに整列させることができる
コンポーネントもあるから調べてみてね!
コンポーネントもあるから調べてみてね!
Event Triggerはスクロールに影響あり

マイケル
そして次にEvent Triggerコンポーネントをスクロールする内容にアタッチした際の影響についてです!

マイケル
例えば、スクロールするImageオブジェクトに、
下記のようにEvent Triggerを設定したとします。
下記のようにEvent Triggerを設定したとします。
↑Event Triggerの設定

マイケル
するとこのように、画像の上だとスクロールが上手く反応しなくなってしまいます・・・。
↑EventTriggerを設定するとスクロールが反応しない

エレキベア
これは困ったクマ・・・
対処法1:クリックリスナーで設定する

マイケル
この対処法を調べた結果、下記記事の内容で解決することができました!
参考文献;
【Unity】EventTriggerを使ったらScrollViewが機能しなかった話

マイケル
IPointerClickHandlerを継承したクラス
をアタッチすることで解決する方法です!
をアタッチすることで解決する方法です!
↑自作クリックリスナーをアタッチ

エレキベア
なるほどクマ・・・!!
対処法2:OnClickを設定する

マイケル
そしてもう一つ思いついたのは、Buttonコンポーネントをアタッチして
OnClickイベントで呼ぶ方法です!
OnClickイベントで呼ぶ方法です!
↑OnClickイベントの設定

マイケル
こちらでも下記のように正常にスクロールすることができました!
↑OnClickだとスクロールも正常に反応する

エレキベア
ImageコンポーネントもButtonの扱いにしてしまうクマね
おわりに

マイケル
というわけで今回はスクロールビューについてでした!
どうだったかな?
どうだったかな?

エレキベア
構成が少し複雑クマが一度覚えてしまえば
なんてことないクマね
なんてことないクマね

マイケル
スクロールビューはいろんな場面で使うと思うから
ガンガン作ってみようね!
ガンガン作ってみようね!

マイケル
それでは今日はこの辺で!
アデューー!!
アデューー!!

エレキベア
クマ〜〜〜〜〜〜
【Unity】スクロールビューの実装とあれこれ【uGUI】 〜完〜