Comments前回は、nginxのパフォーマンス改善について御紹介しました。今回は、ストリーミング再生から少し逸れますが、NGUI(Unityアセッツ)のUIScrollViewについてご紹介します。Unityで人気のアセッツにNGUIというものがあります。有料ですが、AssetsStoreで公開されており、便利な機能が多く用意されているアセッツです。NGUIのコンポーネントの一部に、UIScrollViewというものが存在があります。非常に簡単にスクロールUIを作成することが可能で、UIGridやUIDragScrollViewというコンポーネントを併せて使うことによってPageViewのようなUIもすぐに作ることが出来てしまいます。過去に行った開発で縦と横のスクロールUIを併用するケースがあり、各方向のUIScrollViewを親子関係にしたところ、ドラッグイベントで衝突が起きてしまい、うまく動作しませんでした。結果的に、実現はできましたが、スクリプトを使用して少し工夫する必要があったため、今回はそちらの方法をご紹介いたします。使用したUnityのバージョンは、少し古いですが4.6.9です。前提として、横方向にスライドするUIScrollViewの上に、縦方向にスライドするUIScrollViewを設置するオブジェクトを作ることとします。横方向の身にスライドするUIScrollViewの作成です。EmptyなGameObjectを作成して、UIScrollViewコンポーネントをアタッチ※MovementはHorizontalにします作成したUIScrollView用オブジェクトと同階層に、新たにGameObjectを作成して、UIDragScrollViewコンポーネントをアタッチGameObjectを新規作成して、UIGrid/UICenterOnChildコンポーネントをアタッチ※こちらは任意となります適当なオブジェクトをUIScrollViewの子供として追加します。※UIGridを作成した方はUIGridオブジェクトの子供、作成していない方はUIScrollViewの子供として設定してください各種オブジェクトの名前は適当に設定してください。例では、PageというEmptyなGameObjectを作成し、それぞれを識別しやすいように色分けした背景を設置しています。※MainSceneはUIRoot/UIPanel、Cameraは各オブジェクトを表示するためのUICameraですこの段階で横スクロール可能なUIScrollViewが作成できました。次に、先ほど作ったオブジェクト(※例ではPage)内に、縦スライドのUIScrollViewを設置します。※MovementはVerticalにします作成したUIScrollView用オブジェクトと同階層に、新たにGameObjectを作成して、UIDragScrollViewコンポーネントをアタッチ適当なオブジェクトをUIScrollViewの子供として追加します。■縦スライドのUIScrollView作成後の、ノードツリーでは、この状態で一度動かしてみてください。横スライドが動作せずに縦スライドだけが動かせる状態になっていると思います。このままでは、縦横併用スライドを作ることが出来ないため、UIDragScrollViewを継承したオリジナルのコンポーネントを使用します。}}上記のスクリプトを保存し、Assetsフォルダ内の適当な場所に保存してください。先ほど作成した縦方向のUIScrollViewオブジェクトからUIScrollViewを削除し、保存したCustomDragScrollViewをアタッチします。View”が表示されるので、そこに横方向のUIScrollViewオブジェクトを設定します。これで縦横併用の設定は全て終了です。ポイントは、OnDrag関数内の処理です。NGUIのUIDragScrollViewクラスに用意されているOnDragイベントは、ドラッグが発生した際にタッチ座標の移動量を引数に実行されるためその関数自体をオーバーライドし、NGUI標準の処理が実行される前に、縦横どちらのスライドを行うのかをハンドリングします。deltaの型はVector2であるため、x/yの移動量を比較し、大きい値の方向をその時のスクロールイベントとして扱うようにしています。縦方向のDragScrollViewで発生したドラッグイベントを、横方向のUIScrollViewにほうに流しています。UIScrollViewのDrag関数は、ドラッグ状態の時以外は処理を行わないようになっているため、ドラッグ状態ではないときに一度だけPress関数を実行し、対象のUIScrollViewオブジェクトを強制的にドラッグ状態にすることで動作させています。最後に、OnDragEnd関数でドラッグ終了を検知し、縦方向のUIScrollViewのisDraggingフラグを落として終了となります。いかがでしょうか?このようにコンポーネントを拡張することで、NGUIを使用することで便利になったUI作成の幅を更に広げることが出来ます。他にもいろいろなコンポーネントを自作して、効率的なアプリ開発を目指してみてください。弊社では全国各地の請負い(ご自宅)で作業協力頂ける、フリーランスエンジニアの方を常時探しております。ご興味ある方は、お気軽にお問い合わせ下さい。コメントをキャンセルメールアドレスが公開されることはありません。BlogFeathersFeathersHTMLJavaScript。