諸々を参考にスクロールビューを使ってみたので、ポイントをメモ。こんな感じのものが簡単にできました。
Unity uGUI の流れとしては Scroll Rect
を利用して実装するスクロールビューがあって、そのあとに Scroll View
が追加されているようです。1 使う機会もありそうなので、自分なりに調べてみたことをメモしています。
まず、スクロールビューそのものの考え方は「Microsoft Docs - スクロール ビューアー コントロール」がわかりやすかったです。あとは、インタフェースデザインの心理学を見直してみるのもポイントかと。
直接的にスクロールビューについて、指摘する効果はありませんが。
スクロールビュー(uGUI で自作)
独自に実装するパターンは、こんな感じになりました。「UnityのuGUIでスクロールビューを作る」を参考にしましたが、2014 年の記事です。
ビューに入れる Node の要素数がたくさんになるとパフォーマンスに影響がでる、といった指摘も Qiita にありました。とはいえ、問題になるようなケースよりも問題にならないケースのほうが大体な気もしますが、ともかくパフォーマンスに留意したほうがよいケースがある、ということだと思います。
パフォーマンスに影響があるケースは、そもそも適したコンポーネントの選択になっていないのかもしれない。UI としても適切なのか見直す。
-
- Horizontal Layout Group
Control Child Size (Width, Height = true)
- Horizontal Layout Group
Scroll View (Create Empty)
- Scroll Rect
Horizontal (false)
Vertical (true) - Mask or Rect Mask 2D
- Layout Element
Min Width (true & 300)
Flexible Height (true & 1)
- Scroll Rect
Content (Create Empty)
- Vertical Layout Group
Child Force Expand (Width, Height = true) - Content Size Fitter
Horizontal Fit (Unconstrained)
Vertical Fit (Preferred Size) - Node Builder (新しい Script ファイル)
- Vertical Layout Group
Scroll Rect
が縦横のどちらにビューを移動させることができるのかを決める部分なので、Horizontal が有効になっていると横に伸びてしまい背景が見えてしまいます。忘れてはいけないポイントだと思います。Mask も現在は Mask 2D Rect
のほうがパフォーマンスに優れそうです。
uGUI で用意された Scroll View
Scroll View
が最初から用意されていますが、基本的には上述の内容から基本は変わらない印象です。
連続する Node
は Content
に追加します。Content
は Vertical Layout Group
と Content Size Fitter
のコンポーネントを追加して使うことになるので、上述のものと差がありません。Content
の位置がズレていたら Left
のプロパティなどを修正しました。
どちらかといえば、最初からスクロールバーが用意されているくらいのコンポーネントという認識がよいと思います。(不要なスクロールバーは削除してしまっていいみたいです)
スクロールバーの(デフォルトの)横幅が 20 だったので、Node
の横幅を 300 で設計したなら Scroll View
の Layout Element
コンポーネントの Min Width
は 320 にする。
レスポンシブなデザインで利用する
親コンポーネントの Canvas
に、Horizontal Layout Group
で制御する。レイアウトグループをそのまま適用できた。
- Canvas
Horizontal Layout Group (Control Child Size => Width, Height = true)- Scroll View (Scroll Rect)
Layout Element (MinWidth = 固定の横幅, Flexibile Height = true & 1) - Empty (メイン画面部分)
Layout Element (Flexibile Height = true & 1, Flexibile Width = true & 1)
- Scroll View (Scroll Rect)
ゲームウィンドウのサイズ(幅)が不定長なのは、使いにくいかもしれない。最初は比率をあわせておくほうがいいかも。
サンプル
GitHub にサンプルプログラムを公開しました。
参考
- Unity Document - Scroll Rect
- Qiita - スクロールビューの基本と軽量なスクロールリストビューの作り方
- テラシュールブログ - UnityのuGUIでスクロールビューを作る
- テラシュールブログ - uGUIの自動レイアウトが分かりにくいと評判なので解説してみる
- Unity UIのAuto Layoutを使いこなして楽々レイアウト
インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針
- 作者:Susan Weinschenk
- 発売日: 2012/07/14
- メディア: 大型本
- 作者:Jeff Johnson
- 発売日: 2015/03/13
- メディア: 単行本(ソフトカバー)
続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針
- 作者:Susan Weinschenk
- 発売日: 2016/08/05
- メディア: 単行本(ソフトカバー)