gamebox

unityとかゲームとか

【unity】スクロールビューの作り方を世界一丁寧に説明する

スクロールビューの作り方を画像多めに世界一丁寧に行います。

uGUIを使用してのScrollView。

わからない事や誤りあったら教えてください

 

使用バージョン Unity 2018.1.0f2

完成図

f:id:rgamebox:20180530105711g:plain

 

まずはリストに並んでいるノードを作ります。

ノードの作成

リストに表示するノード(リストに並ぶ物)を作ります


◆unityメニュー GameObject > UI > Imageを作成
名前を"Image"→"Node"とします。
座標 PosX PosYを0に、Width 150、Height 40に設定します。

f:id:rgamebox:20180529182036p:plain


真っ白だと後から並べた時にわかりにくいので、イメージを設定します。
上画像の花丸部分の丸ボタン押してsprite選択画面をだして「InputFieldBackgroud」を設定します

f:id:rgamebox:20180529182117p:plain


◆先程作ったHierarchyビューの"Node"の上で右クリックして、UI > Textでテキストを作成します

f:id:rgamebox:20180529182502p:plain


真ん中中央揃えにして(Paragraph>Alignment部分)、FontSize 20、Textは「ノード」としましょう

f:id:rgamebox:20180529182520p:plain

 

 

◆NodeオブジェクトにAddComponentでLayoutElementコンポーネントを追加します。

f:id:rgamebox:20180529182538p:plain

 

LayoutElementのMinHeightにチェックを付けてノードの高さ(Height)を40に指定します。

f:id:rgamebox:20180529182603p:plain

 

・作った"ノード"をプレハブ化します。Projectビューへドラッグ&ドロップ
f:id:rgamebox:20180529182836p:plain

 

この動作でプレハブ化完了なので、Hierarchyビューの"ノード"は削除します

(Nodeを選択して、deleteキー or 右クリックからdelete)

f:id:rgamebox:20180529182853p:plain

 

 

これでノードプレハブ作成はおしまい!

次に作ったこのノードを並べる為のスクロールビューの作成に進みます。

 スクロールビューの作成

◆Canvasの上で右クリックして、CreateEmpty(空のオブジェクト)作成
名前は"ScrollView"とします
f:id:rgamebox:20180530100923p:plain

 

ScrollViewのWidthとHeightを200に設定します 

f:id:rgamebox:20180530100939p:plain

 

"ScrollView"にコンポーネント3つ追加
・"ScrollView"にAdd Componentで"ScrollRect"を追加
・同じく"ScrollView"にAdd Componentで"Mask"を追加
・更に"ScrollView"にAdd Componentで"Image"を追加
→ Imageの色をわかり易くする為に黒くします

f:id:rgamebox:20180530101015p:plain

 

◆ScrollViewの子オブジェクトとして名前が「Content」のGameObjectを作ります
(ScrollView上で右クリック > CreateEmpty)

「Content」のRectTransformのPivotを(x:0.5, y:1)としましょう。

f:id:rgamebox:20180530101124p:plain

 

◆Contentに
VerticalLayoutGroupコンポーネント追加
ContentSizeFitterコンポーネントを追加
ContentSizeFitterのVerticalFitをPreferred sizeに設定します。

f:id:rgamebox:20180601152023p:plain

 

◆ScrollRectのContentContentオブジェクトを指定します。

f:id:rgamebox:20180530101327p:plain

 

◆Contentの下にNodeを沢山配置します。とりあえず8個配置します。

下図を参考にNodeプレハブをContent下に置くのを8回繰り返してください。
※範囲外のノードはMaskでカリングされます

f:id:rgamebox:20180530101411p:plain

 

◆このままでは左右にもスクロールしてしまうので、ScrollViewのHorizontalのチェックをはずします

f:id:rgamebox:20180530102219p:plain

 

ここまでを一度実行しましょう。

f:id:rgamebox:20180530101552g:plain

これでスクロールビューができました!
次にスクロールバーを追加します

スクロールバーの作成

◆スクロールバーを作ります
ScrollViewの上で右クリック > UI > Scrollbarを選択します

f:id:rgamebox:20180530105514p:plain

 

ScrollbarのPosXを87に、DirectionBottom To Topにします

f:id:rgamebox:20180530105550p:plain

 

◆ScrollViewのVertical Scrollbarに先程作ったScrollbarを指定します

f:id:rgamebox:20180530105612p:plain

 

完成!

f:id:rgamebox:20180530105711g:plain

お疲れ様でした!