読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

uGUIを使いScrollViewを作ってみた

Unity

今回エンジニアブログを担当します乾です。
よろしくお願いします!!

前回はNGUIを使用しScrollViewを制作しました。
今回Unityのバージョンを更新したのでuGUIを使ってScrollViewを作っていこうと思います。


1「スクロールビューの準備」

Canvasを作成します。
スクリーンショット 2015-01-19 19.37.31

次に先ほど制作したCanvasの子としてGameObjectを作り、名前は「ScrollView」とします。
スクリーンショット 2015-01-20 2.29.34

ScrollViewの大きさを設定し、MaskとImageとScrollRectを追加します。
スクリーンショット 2015-01-20 2.33.20

ScrollViewの子としてGameObjectを作ります、名前は「Content」とでもしておいてください。
スクリーンショット 2015-01-20 2.36.09

今回は縦スクロールのビューを作るので、ContentのRectTransformのPivotを(x:0.5, y:1)に設定し、リストの開始位置を先頭にします。
スクリーンショット 2015-01-20 2.36.56

ContentにVerticalLayoutGroupとContentSizeFitterを追加し、ContentSizeFitterのVerticalFitをPreferred sizeに設定します。
スクリーンショット 2015-01-20 2.38.18

ScrollViewのScrollRectのContentに先ほど作成したContentを設定します。
スクリーンショット 2015-01-20 2.41.08

2「アイテムの用意」

ScrollView内に入れるアイテムを用意してください、今回私はImageの階層下にTextとButtonを持つPrefabを用意しました。
スクリーンショット 2015-01-20 3.07.54

次に用意したアイテムにLayoutElementを追加し、MinHeightにアイテムの高さ(Height)を指定します。
スクリーンショット 2015-01-20 3.08.20

3「スクロールバーの作成」

Canvasの子としてScrollbarを作成します。
uGUIはHierarchyの順番で描画順を管理しているので、ScrollViewより
上に配置してしまうと位置によってはScrollbarが隠れてしまうので注意してください。
スクリーンショット 2015-01-20 2.49.59

DirectionをLeft to RightからBottom to Topに変更します。
スクリーンショット 2015-01-20 2.56.11

ScrollViewのScrollRectのVerticalScrollbarに先ほど作成したScrollbarを設定します。
スクリーンショット 2015-01-20 3.21.16

4「動的にアイテムの追加」

下記のScriptをButtonに設定します。

public class SpawnItem : MonoBehaviour {  
    public RectTransform prefab;  
    public RectTransform content;  
  
    public void OnTap() {  
        // Itemを生成  
        var item = GameObject.Instantiate(prefab) as RectTransform;  
        // Contentの子として登録  
        item.SetParent(content, false);  
    }  
}  

完成!!
スクリーンショット 2015-01-20 4.12.47

一通り作ってみました〜
NGUIと比べItemの動的追加が非常に楽に感じます。
また、Buttonの関数を指定する箇所も見やすいです。
個人的にはNGUIにある、座標やスケールの値を初期化するボタンが欲しいです!!

今回ざっくり触ってみて、さらに興味がわいたので今後はもっと踏み込んでみようと思います。