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

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

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

 

【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」に移動し、順番に並べてあげればスクロールが完成です。
この方法でスクロールする画面を作成すれば、ボタンも押せて、スクロールもできる画面ができます。



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

ではでは、また来週(´・ω・)ノシ
スポンサーサイト

Category: 開発日記(Unity)

tb 0 : cm 0   

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://halcyonsystemblog.blog.fc2.com/tb.php/56-63aec7d3
この記事にトラックバックする(FC2ブログユーザー)