FC2ブログ
    12 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 02

    ハルシオンシステムの気ままBlog

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【Unity】NGUIを利用した画面のスクロール② 

    こんにちは!月曜の坂内です。
    さて、先週土曜日に髪の毛ピンクに染めました。ごめんなさい。

    と、いうわけで、前回書いたNGUIによる画面のスクロール第2弾でございます。
    今回はスクロールビューの中でアイテムを整理する方法と、スクロールバーの追加
    をしていきたいと思います。

    【アイテムの整理】
    いくつかのアイテムをスクロールビュー内で並べたい場合には、
    ScrollViewに「UIGrid」または「UITable」をつけます。
    一列に並べる場合はGrid、行列で並べる場合はTableって考えてますが、
    どうなんでしょ??

    そして、今回は縦にスクロールしようと思うので、UIScroll Viewの「Movement」をVertical
    に変更。それと、UIGridのArrangementもVerticalに変更します。
    UIGridの「Cell Height」はアイテムの大きさ+隙間分αにしておきます。
    SpriteのDimensionsのYが100(高さ100)のため、Cell Heightは102くらいにしておきます。

    で、Gridを付けたらアイテム(今回はSprite)をコピーしまくります。



    はい!そして実行!!



    どうです?UIGridがいい具合に並べてくれます!
    そしてスクロールもばっちし!
    ちょー簡単!

    【スクロールバー】
    さてさて、スクロールバーをつけてみましょう。
    上の続きです。
    とりあえずスクロールバーに見た目をつけるために、1ドットの白と黒のpngを用意し、
    Atlasにいれておきました。

    んで、写真の手順でスクロールバーを作成します。
    [NGUI]→[Open]→[Widget Wizard(Legacy)]→TemplateにScroll Barを設定し、
    Background、Foregroundに先ほどの白と黒を設定。

    Directionは上から下にバーを移動させたいのでTopToBottomを設定しました。




    出来上がるのはこんなもの・・・・

    ここから大きさ等を調整します。
    あ、スクロールバーはスクロールビューの外の階層に作っておきます。

    とりあえずこんな感じ?
    そしたら、スクロールビューの「UIScroll View」にあるScrollBarの箇所に
    今作ったスクロールバーを登録します。
    今回は縦スクロールさせたいので、Verticalのところに登録します。





    これだけ!これだけでスクロールビューとスクロールバーが連動します!
    NGUIすごいっ!

    ってことで、ネタ切れました。
    皆様の役に立てるネタまた探さないと。。。

    では!

    Category: 開発日記(Unity)

    tb 0 : cm 0   

    コメント

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/72-f835f2b1
    この記事にトラックバックする(FC2ブログユーザー)