FC2ブログ
    09 «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.» 11

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