【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すごいっ!
ってことで、ネタ切れました。
皆様の役に立てるネタまた探さないと。。。
では!
さて、先週土曜日に髪の毛ピンクに染めました。ごめんなさい。
と、いうわけで、前回書いた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)
« 【Java】システム設定周りについて | 【JAVA】LINEへの投稿連携 »
コメント
| h o m e |