【Unity】NGUIの基本操作その7
こんにちは、大坂です。
今週もNGUIについて書いていきます。
今回はNGUIでカメラを使用したスクロールについてです!
まずは、NGUIのUI Wizardを使用し2個の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」に移動し、順番に並べてあげればスクロールが完成です。
この方法でスクロールする画面を作成すれば、ボタンも押せて、スクロールもできる画面ができます。

長々と書きましたが、設定を始めてしまえば意外とすぐ出来てしまうので、試してみてください!
ではでは、また来週(´・ω・)ノシ
今週もNGUIについて書いていきます。
今回はNGUIでカメラを使用したスクロールについてです!
まずは、NGUIのUI Wizardを使用し2個の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)
« 【Unity】Orthello2DとNGUIの組み合わせ | 【バージョンアップ!】モンスラのバージョンが 2.1 になりました!! »
コメント
| h o m e |