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

こんにちは、大坂です。

今週もNGUIについて書いていきます。
今回はNGUIでカメラを使用したスクロールについてです！

まずは、NGUIのUI Wizardを使用し２個のUIを作成します。
作成後、下図のようにしておきます。名前は適当。
「Panel」の中にある「Bottom_Right」「Top_Left」は空のオブジェクト、「Scroll_Area」はSpriteです。
「Scroll」の位置は「Display_Base」の横にでも移動しておいてください。



「Bottom_Right」「Top_Left」に「Anchor」をアタッチ。
メニューの「NGUI」⇒「Attach」⇒「Anchor」です。



アタッチした「Anchor」の「Container」にSpriteで作成した「Scroll_Area」を指定。
「Side」は「Bottom_Right」のオブジェクトには「Bottom_Right」を指定。
「Top_Left」のオブジェクトには「Top_Left」を指定。





これで画面の基となる設定は終わりです。
次にスクロール側の設定です。
「Scroll」側の「Anchor」の「UI Camera」を「Display_Base」のカメラに変更しておきます。
(ここでは「Display_Base_Camera」)



続いて「Scroll_Camera」の設定。
まず、「Viewport Camera」を追加。
メニューの「Component」⇒「NGUI」⇒「UI」⇒「Viewport Camera」です。



追加した「Viewport Camera」の「Source Camera」に「Display_Base_Camera」、「Top Left」に「Top_Left」のオブジェクト、「Bottom Right」に「Bottom_Right」のオブジェクトを指定。



さらに「Scroll_Camera」に「Draggable Camera」を追加。
メニューの「Component」⇒「NGUI」⇒「Interaction」⇒「Draggable Camera」です。



追加した「Draggable Camera」の「Root For Bounds」にUIのRootの「Scroll」を指定。
ScaleのXに「0」を指定。
(今回は縦にするクロールするためXに「0」を指定しています。Xに「1」、Yに「0」を指定すれば横にスクロールできます。)



最後に、「Scroll」の方の「Panel」の下に「Botton」を追加。
追加したボタンに「Drag Camera」を追加。
メニューの「Component」⇒「NGUI」⇒「Interaction」⇒「Drag Camera」です。



追加した「Drag Camera」の「Draggable Camera」に「Scroll_Camera」を指定。



あとはボタンを複製して位置を「Scroll_Camera」に移動し、順番に並べてあげればスクロールが完成です。
この方法でスクロールする画面を作成すれば、ボタンも押せて、スクロールもできる画面ができます。



長々と書きましたが、設定を始めてしまえば意外とすぐ出来てしまうので、試してみてください！

ではでは、また来週(´･ω･)ﾉｼ

Category: 開発日記（Unity）