07 «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.» 09

ハルシオンシステムの気まま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.blog.fc2.com/tb.php/72-f835f2b1
この記事にトラックバックする(FC2ブログユーザー)