CG・映像デザイナー技術ブログ

【Unity】uGUIスクロールビューの作り方

eyecatch_unity

標準機能。ただのスクロールビューの作り方です。コード書きません。

なにも見ずに一から自分で作ってみたので、その備忘録です。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

スクロールビューの作成方法

リストの作成

  • GameObject>UI>Panelから下敷きを作成します。サイズは600×384。名前はScrollView

  • 子にGameObject>CreateEmptyでスクロールエリアを作成します。下敷きよりすこし内側に表示させたいので、Rect Transformの上下にストレッチをかけてから、値を16入れてます。名前はViewport

  • さらに子にGameObject>CreateEmpty。レイアウトエリアを作成します。Grid Layout GroupとContent Size Fitterを追加。Rect Transformは横にストレッチかけて、Pivotを上あわせにします(上にしないと余白が少しずれる)Content Size FitterはVertical FitだけPrefered Sizeに。名前はContent

※今回あえて、Vertical Layout Groupではなく、Grid Layout Groupにしています。

  • さらにさらに子にスクロールさせたいアイテムを作成(GameObject>UI>Image/Text)サイズは256×96。名前はItem_1にして、12個複製します。
  • ContentのGrid Layout GroupのCell SizeにItemのサイズ256×96を入力。さらにPadding LeftとSpacingに16を入力。ConstraintをFixed Column Countを2にして2行を維持したまま6列を作ります。

  • 最後にScrollViewにScroll Rectのコンポーネントをアタッチ。Horizontalのチェックをはずし、contentとviewportとそれぞれ登録。

スクロールバーの作成

  • ScrollViewの子にGameObject>UI>Imageから下敷きを作成。右Pivot,上下ストレッチ。余白は右-24、上下16。名前はScrollbar。

  • Scrollbarの子にGameObject>UI>Imageを作成。カラーは黒に。左右にストレッチ。遊びで上下左右にストレッチ3。名前をHandle。

  • ScrollbarにScrollbarのコンポーネントを追加。Handle RectにHandleを登録し、DirectionをBottom To Topに。

※切り替えると画像の縦横が入れ替わるので、調整する

  • 最後にScrollViewのScroll RectのVertical ScrollbarにScrollbarを登録。

以上です。

以上、すいみん(@cg_method)でした!