【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(前編)

こんにちわ。unityの仕事ください。と言い続けているつもりで4年。いまだunityの仕事に巡りあえず。今回初めてunityの仕事がきて久しぶりに触りました。新しくインストールした4.6では2Dが作りやすくなったおかげで思ったより早くできました。アコーディオンとスクロールビューがそれなりに使えそうでしたので紹介します。開閉が画面内で行われるよう調整したものです。

2Dオブジェクトを置いてみよう

とりあえずスクロールの背景になるパネルでも置いてみます。メニューからGameObject->UI->Panelを選択してみましょう。
Hierarchyビューをみてください。Panelが作成されましたね。選択するとInspectorビューに情報が表示されます。

スクリーンショット 2014-12-07 21.52.27
PanelはCanvasという新しいオブジェクトの下に作られました。EventSystemも新たに作られています。
Canvasは2D描画に必ず必要なルートになる領域なので、Canvasがない状態でUIオブジェクトが作成された時には自動的に作成されます。
EventSystemはGUIを操作するために必要なオブジェクトで、これも無ければ自動的に作れます。

Vertical Layout Groupでボタンを縦に並べよう

パネルの下にもう1つパネルを作ります。
Hierarchy上でPanelを選択した状態で右クリックをしてUI->Panelを選択しましょう。
Panelの下にPanelが置かれます。ちなみに先ほどと同じようにメニューからPanelを作るとCanvasの下に作られるので移動させてください。同じような操作でも結果が違う、unityってこういう直感的にどうなるか分かりづらい操作がけっこうありますね。
新しく作ったPanelの名前をVerticalに変えます。

オブジェクトを置いてみます。ボタンでも並べてみましょう。
Verticalの下にUI->Buttonを選択してButtonを置いてください。

Buttonをたくさん並べるのでButtonを大量作成します。Buttonを選んでコピー・ペーストすればいいんですが、ここはプレファブにしておきましょう。複数あるオブジェクトは必ずプレファブにしておくのがunityのやり方です。
ButtonをProjectビューに放り込んでプレファブに。HierarchyのButtonが青くなったらプレファブになった証拠。Hierarchyビューで青くなったButtonを選択してコピーペーストを繰り返します。10個くらい作ったらいいでしょう。

Buttonが同じ所に重なっていますね。オートレイアウトを使うので手で並べる必要はありません。Verticalを選択してInspectorビューにAddComponentでLayout->Vertical Layout Groupコンポーネントを選択します。Buttonが縦に並びましたね。

スクリーンショット 2014-12-07 22.53.05
Vertical Layout Groupは子のオブジェクトを縦に隙間なく並べてくれます。

これだと縦にぴっちりでボタンの縦サイズを制御しにくいので、VerticalにLayout->Content Size Fitterコンポーネントも追加します。Vertical FitをPreferredSizeにします。
Buttonに縦サイズを入力しましょう。ButtonにLayout->Layout Elementコンポーネントを追加し、PreferredHeightに60と入力します。Inspectorビューの上部にあるPrefabツールのApplyボタンを押せばPrefabが置き換わり、コピー先のPrefabにも反映されます。全てのボタンのPrefferdHeightが60になりました。

Verticalの縦がPanelを越えて伸びたでしょうか。

スクリーンショット 2014-12-07 23.12.33

Verticalが画面に表示された時、スクロールが一番上の位置にあって欲しいです。
Verticalの上のPanelにもUI->Vertical Layout Groupコンポーネントを追加し、VerticalのPivotを1にしましょう。Verticalの上端がPanelの上端にぴったり重なりました。なんでこうなるか、説明はうまく出来ません。でも次のような操作をしてみれば感覚的に分かるかもしれません。ギズモトグルをピボットに変えて、InspectorのPivotでYと書いてあるラベルを掴んで左右にマウスを動かしてみてください。画面内で青いドーナツ状のピボットが上下に動き、それがパネル内の位置を変えていることが視覚的に分かるかと思います。

スクリーンショット 2014-12-07 23.34.28

Scroll Rectでスクロールする画面に

さて、Panelにスクロールビューの機能を持たせたいと思います。ここで名前をScrollViewに変えておきましょう。意味はないですが、分かりやすくするためです。
ちなみにHierarchyビューで名前を変えると、scriptの方で指定していたのと整合性がとれずしょっちゅうscriptの方で手直しが必要になりました。機能に合わせて名前を変えることは多いと思うので、自動でscriptの方も修正してくれると良いのですが今のとこそういう方法もなさそうなのでscriptの方でうまいこと名前と関係なく紐付けるよう組むのがコツになってきそうですね。

ScrollViewにUI->Scroll Rectコンポーネントを付け加えます。
縦にスクロールするだけでいいのでHorizontalのチェックは外しておきます。
Scroll RectのContentプロパティにVerticalを放り込んでください。
これで実行するとスクロールできる画面ができました。ボタンを増やしたり減らしたりしても自動でスクロール領域が計算されていい感じです。

スクリーンショット 2014-12-08 0.06.26

スクロールバーを付ける

メニューからGameObject->UI->Scrollbarでスクロールバーを作成し、Canvasの下に置きます。InspectorビューでScrollbar(Script)コンポーネントのDirectionを「Bottom To Top」に変えます。RectTransformのwidthの値を24くらいに調整して、アンカープリセットをaltを押すとでてくる縦にぴったり、右にくっつけるものを使います。141211-0003

ScrollViewのScrollRect(Script)コンポーネントにあるVertical Scrollbarプロパティに作成したScrollbarを設定します。ScrollViewのサイズはスクロールバーと重ならないよう調整しておきましょう。

長くなってきましたので、今日はこの辺りにしておきます。

今回まったくScriptを書いてませんね!すごいです。ちょっとコンポーネントはいろいろ付けないといけないですけどね。続きは、ボタンで展開するアコーディオンと、スクロール位置の制御についてみていきたいと思います。

【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(後編)

 なにかコメントをどうぞ