【衝撃】NGUI作者がUnite 2013で新GUIを語る

Unite 2013でUnity4.3に新GUIはまだ搭載されないニュースは失望があった一方、新GUIの検討内容に関する発表は驚きも沢山あった！！

今回は新GUIについて語ったNGUI作者のピッチから翻訳内容を紹介したい：

------------

新GUIであるDNFGUIに関するUnite発表資料
http://tasharen.com/unity/unite.ppt

August 28 2013


DNFGUIとは？

• 有志のコミュニティにより名づけられた新GUIのニックネーム
• UIシステムにおける「Duke Nukem Forever」（いつまでも発売されない事で有名だったゲームタイトル）となってほしいとの願い

UnityGUIの歴史を辿ると・・・

• 即時モードGUI（いわゆるOnGUI）
• 　開発者ベースのUIシステム
• 保持モードGUI（Unity GUIとしてUnite登場）
• 　次のフレームまで保持
• 　アーティストの使い勝手を向上

しかし実際には魅力がイマイチだった・・・

欠点は・・・

• 　根本的に厳格すぎて柔軟性がない（色のTweenでさえ、マウスオーバー時に二つの要素をハイライトさせたくても出来なかった）
• 　複数解像度のハンドリングも課題（画面サイズの変更に対して完璧にピクセル対応を目指したため低解像度と高解像度をサポートするだけでUIは作り直しが必要）
• 　等々

結局NGUIのほうが作業しやすく柔軟性があり、ユーザインタフェース設計のときに強力だった。

• 　保持モードGUIは中止となった
• 　「えっ、ScaleFormを統合すればいいんじゃね？」の答えはNGUIをUnrealに統合しないのと同じで、コンポーネントベース、柔軟で、オープンソースがUnityと思想が一致しているから

一方、NGUIの欠点は・・・

1. NGUIパネルはひとつのドローコールに統合してバッチングする。但し同じアトラスを使用する前提になっていることがネック

• NGUIでは同じアトラスであればデプスを調整するだけで良いけど、複数アトラスある場合はデプスとZバッファを調整。
• UIが傾けられるだけで、形状の中心がシフトして、NGUIがUnityの距離ベースソートに制限されるため、おかしくなる
• スクロールパネルを3D UIを試せばすぐ分かる話で、次期UIでは解消したい課題

ウィジェットのネストできない

• 理由は、NGUI設計のときにUnityライクにしたためTransformのスケールがウィジェットのサイズを示すようにしたため。Transformの累積性により300x200ピクセルの背景に10x10のウィジェットを含めると、スケールを複合すると3000x2000になるため出来なかった

クリッピング時のハンドリングに関する課題がある

• NGUIではクリッピングは本質的にパネル上で四角形（Rectangle）を指定して下位層のウィジェットのシェーダを別に置き換えることとなり、これにより実際のクリッピングを実現していた。ここではスケールは使用されず、パネルのコンテンツのスクロールは複雑極まりなかった。新GUIではこれを完全に書き換えることにした

フォントおよびラベルのハンドリングが苦手

• フリータイプのライブラリを使用できず、Unityが公開している機能には制約があり、グリフ（Glyph）の過去のエクスポートセットを読み込む必要があった。何かの理由により、フォントサイズをすべてのラベルのデフォルトサイズとする必要があり、スプライトのリサイズをするとき、ラベルの最大範囲を指定できる代わりに値セットとして（最大幅、最大行数）を修正する必要があり、これが痛かった

　　
UIシステムの作り直しを考えたとき、NGUIをベースラインにすることにした。

最初はイベントシステムから着手した。NGUIを使用した人なら改善したイベントシステムでOnClick, OnPress, OnDragを使い慣れているはずだ。新システムも同様なのだが、NGUIと違って、完全に拡張可能だ。カメラにコンポーネントをアタッチしてコライダに Raycast する代わりに Raycast 関数を上書きして自身のロジックを実装できる。例えば自身の Raycast を UI 階層に出来た。

このシステムの良いところは、マウス、タッチ、およびコントローラの入力を直感的にハンドリングして、NGUI で使用するナビゲーションを選ぶ必要があるのと違って、入力されるイベントにもとづいてシームレスに別のものに切り替えることができる。メニューをナベゲーションするのにマウスを使用して、次にXBox360コントローラに切り替えたり、それが自動的に正しく動作する。UIウィジェットの場合、左を押下するだけで左側にあるもっとも近い選択可能なウィジェットを見つけてくれる。右を押下すれば逆もまた正しく動作できるし、さらには希望すればウィジェットを明示的に指定することだって出来る。

もうひとつ便利な機能はイベントバブルである。もしゲームオブジェクトが特定のオブジェクトをハンドリングしない場合、親オブジェクトに自動的にいって、さらに親を辿る。もしスクロールビューのなかにボタンがあれば、ボタンにクリックイベントハンドラをつけてスクロールビュー自身にドラッグイベントハンドラもつけられる。
同一イベントから複数のリモート関数をトリガーする機能も、インスペクタで選択するだけで実現できて、便利である。

新しいUIシステムはスプライトベースであり、アトラスベースではない。つまり、UIスプライトは事前生成したアトラスの中の名前でなく、スプライト（テクスチャ）を参照する。

特定のアトラスを参照しないことがでウィジェットのカスタムマテリアルを指定する自由度が出来る。アニメーションを作成するために詳細テクスチャのUVを別にスクロールさせるだってできる。静的イメージで確認できるが、スライダのストライプも実際に水平に移動する。
すべてのアトラスおよびバッチングは自動的に行われ、考える必要がない。

結果として、ユーザにとっては：

• 全てのZバッファおよびデプスソートの課題は完全に解決される。ラベルを二つのスプライトに挟みたい場合、簡単になる
• 3D UIウィンドウを傾けて、中にクリッピング領域が必要な場合、簡単になる
• WYSIWIGで描画順を保持したまま、UIシステムはドローコール数を削減する

新UIシステムでの新しいポイントは、ウィジェットの幅と高さを指定するのに別の値を使用して、Transformのスケールに依存しない。つまり、ウィジェットのネストがより容易になる。ネストされたウィジェットの位置が自動的に親オブジェクトのピボット位置に相対的となるため、ボタン内にラベルがああるボタンを作成して、角の位置をドラッグしたとしてもラベルは中央の位置を保持する

ラベルは完全に再デザインされていて、Unityのダイナミックフォントシステムを常に使用するため、西洋言語以外でフォントのGlyphをサポートさせる場合も心配がない。再デザインの副作用として、リッチテキスト形式がサポートされ、テキストの中にサイズタグを埋め込むことが出来て、文章中の文字をいくつかリサイズすることも容易だ。

クリッピングのハンドリングもまた再デザインしたところである。 Unity 4.2 のステンシルバッファ対応を活用することで新UIシステムは四角形だけでなく、任意の形状のクリッピング領域をサポートする。

-----------

Unityの新GUIには早くベールを完全に脱いでほしいぜ！！