【Unity】NGUI3.0を使ってスクロールビューを作ってみよう

こんにちは、開発の半沢 匠です。

今回はUnityでUIを作るとしたら今や欠かせないアセットNGUIについてお話させていただきます。
つい先日NGUIが3.0にメジャーバージョンアップしました。作者さんいつもありがとうございますｍｍ

そこで今回はこちらを用いてスクロールビューの作成方法を図入りで説明します。
っとは言うものの実は作者さんが既にわかりやすい動画をYoutubeにアップしてらっしゃるので
詳細はそちらを見ていただくのが良いかと思います。

動画はこちら https://www.youtube.com/watch?feature=player_embedded&v=OiA4o8KqBFI

こちらは簡単に日本語でまとめたメモとしてご活用いただければと思います。

======

①ベース作成

・メニュのNGUI→Open→UI Wizardを選択
・CameraがSimple 2Dになっていることを確認しCreate Your UI ボタンを押下


②ScrollView作成

















































・Anchorの子オブジェクトとして空のオブジェクトScrollViewを作成
・Add Componentボタンを押下しPanelを選択しUIPanelスクリプトをアタッチする
・UIPanelのClippingをAlphaClipにする
※もしくはSoftClip。こちらの場合は両端のぼやける範囲をSoftnessの値で指定可能
・表示したい場所/領域にCenter/Sizeの値を変更（Scene内の色枠を参考に）
・Add Componentボタンを押下しDraggable Panelを選択しUIDraggable Panelスクリプトをアタッチする
・Scaleの値を移動させたい方向のみに１を入力
※縦スクロール：X0、Y1、Z0
　 横スクロール：X1、Y0、Z0


③Grid作成

・ScrollViewの子オブジェクトとして空のオブジェクトGridを作成
・Add Componentボタンを押下しGridを選択しUIGridスクリプトをアタッチする
・UIGridのArrangementを移動させたい方向に選択
※縦スクロール：Vertical
　 横スクロール：Horizontal
・アイテム（④で作成するオブジェクト）の１つの大きさをCellWidthとCellHeightで指定
・Gridを移動し②で作成したPaneｌ内の表示させたい場所に移動させる


④アイテム作成

・ScrollViewの子オブジェクトとして空のオブジェクトItemを作成
・こちらのオブジェクトがスクロールさせるアイテム（画像等）になります
・表示させたいものを子オブジェクトとして追加する（複数可。画像やラベル等）
・Add Componentボタンを押下しDrag Panel Contentsを選択しUIDrag Panel Contentsスクリプトをアタッチする
・メニューのNGUI→Attach→ColliderでBox Colliderをアタッチする
・必要に応じてItemオブジェクトを複数作成する


⑤Outline作成

・Anchorの子オブジェクトとして空のオブジェクトOutlineを作成
・メニューのNGUI→Attach→ColliderでBox Colliderをアタッチする
・CenterとSizeを②で作成したScrollViewのUIPanelのCenter/Sizeの値にする
・Add Componentボタンを押下しDrag Panel Contentsを選択しUIDrag Panel Contentsスクリプトをアタッチする
・Draggable PanelにScrollViewをドラッグ&ドロップする
======

以上でスクロールビューの完成です！
説明すると少し長く思えますが、実際に作ると直ぐにできますので、
是非作ってみてください。

---