WonderPlanet DEVELOPER BLOG

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

NGUI ScrollView活用術

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

最近NGUIを使用する機会が多くその中でもお世話になっているScrollViewについて紹介していきたいと思います。
今回使用したバージョンは3.6.8です。


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

先ずは2DUIを選択肢しUIRootを作成します。
スクリーンショット 2014-11-06 1.04.38

次にScrollViewを作成します。
スクリーンショット 2014-11-06 1.34.38

次に先ほど作成したScrollViewの中にGridを用意して準備完了です。
スクリーンショット 2014-11-06 1.36.57

今回作成したScrollViewとGridの設定こんな感じにしています。
スクリーンショット 2014-11-06 3.31.14スクリーンショット 2014-11-06 3.32.28

2「アイテムの用意」

Spriteを作成し、わかりやすいようにLabelも付けておきます。
スクリーンショット 2014-11-06 3.36.42スクリーンショット 2014-11-06 3.41.22

次に先ほど作成したSpriteにBoxColliderとUIDragScrollViewを付けます。
スクリーンショット 2014-11-06 3.48.21

完了したらSpriteをコピーし4,5個Grid内に配置します。
スクリーンショット 2014-11-06 3.52.22

ここで一度実行してみてください。Gridによって規則正しく整頓された状態でSpriteが表示され、Spriteをドラッグするとスクロールされる筈です。
スクリーンショット 2014-11-06 3.56.23

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

何か足りません、スクロールバーです。
Widget Wizardを開きUiRoot内にスクロールバーを作成し、お好みのサイズに調整してください。
スクリーンショット 2014-11-06 4.07.38
この時に注意なのですが、BackgroundとForegroundの移動方向軸の大きさを同じにしておかないとバーが動かなくなってしまいます。
今回は縦スクロールなのでYの値を同じにしておきましょう。

次にスクロールバーのValueを0にし実行時のスクロール位置を一番上からにします。
スクリーンショット 2014-11-07 1.40.59

これでスクロールビューの完成です。

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

最後にボタンを押したらアイテムが追加されるようにしたいと思います。

public void OnTaped() {  
    // NormalQuestObjectを生成し、Gridに追加  
    GameObject obj = NGUITools.AddChild(GameObject.Find("Scroll View/Grid").gameObject, this.itemPrefab);  
    obj.GetComponentInChildren<UILabel> ().text = "" + GameObject.Find ("Scroll View/Grid").transform.childCount;  
    // Grid内のItemを均等に配置  
    GameObject.Find("Scroll View/Grid").GetComponent<UIGrid>().Reposition();  
}  

ボタンが押された際にこの関数が呼び出される様に設定すると...
スクリーンショット 2014-11-07 3.05.34
新しいアイテムが生成され追加されます。
NGUITools.AddChild()を使用することでサイズの値がおかしくなるのを防ぎUiGrid.Reposition()を呼ぶ事で均等に再配置されます。

今回はNGUI入門したての自分が制作中につまずいた箇所に重きをおき書かせていただきました。
今後はNGUIを活用しつつUGUIなどもやってみたいと思います。