Unity 新GUIの時代到来！

皆さん初めまして、2014年度新卒の石黒祐輔と申します^_^;
前回の記事の小川と同期で、OJTも一緒のところでネイティブゲームの研修を受けていましたが、現在は別々のところではあるものの、同じくUnityエンジニアとして日々精進しています！
入社して以来、Cocos2d-xとUnityという2大ネイティブ用ゲームエンジンの技術をガッツリ磨いています。

そこで今回も前回に引き続き、Unityの記事になります！
現在社内では新しいUnityの動作検証を進めています。もちろんUnity 5も新機能満載で注目の対象なのですが、今回はオープンベータ中である4.6から提供される新しいGUIについてご紹介します。

UnityのGUIの歴史

何故メジャーアップデートではない4.6が注目されているかというと、前述の通り公式から提供される標準GUIに関して大幅なアップデートが入るからですが、それは今までのUnityのGUIは
  • 重い（ドローコールが多い、毎フレームスクリプトが呼ばれる）
  • 機能が少ない
  • 実行するまで表示確認できない
などなど、たくさんの問題を抱えていたらからです。これも相まって、2Dに弱いUnityと言われ続けてきました。

そのため公式のGUIはとても使えたものではありませんでしたので、多くの開発者がAsset StoreからGUI用のAssetをダウンロードし使っていました。その中でも有名なものにNGUIの存在があり、有料ではあるもののなかば標準GUIの様な扱いでした。

そこでこの状況をUnityが打破するためにGUI機能の刷新を図り、それが4.6から提供されることになりました！通称uGUIと呼ばれています。ただし現在では公式にはuGUIとは呼ばれていませんので、以下では新しいGUIと表記することにします。

新しいGUIの特徴

ここで簡単に新しいGUIの特徴をご紹介します。もちろん全てを書き始めるとキリがないので、掻い摘んでにはなりますが(^_^;)

まず古い方から・・・
 public class GuiExample : MonoBehaviour {
  void OnGUI() {
    if (GUI.Button(new Rect(50, 50, 100, 100), "Button")) {
      // do something
    }
  }
}

これはツライ！いきなりC#のコードの抜粋です！
そしてこれを実行すると、以下のようなものが描画されます。

旧GUI実行結果


実行してようやく上図の様なUIが得られますが、UIを作るためにコードを書かなければいけない、実行するまで分からないという状態で不便極まりなく、またパーツの配置もピクセル単位で指定しなければならず、生産性は低下する一方です。またコードを書けない人はUIを実装・修正することができません！

そしてこれを解決するのが、以下のような新しいGUIです！

新GUI


素晴らしいです！エディター上でUIオブジェクトを置いて、インスペクターから設定するだけで、リアルタイムに描画されますので、コードを書けない人でもUIを作ることができ、また修正も楽になります。

以上のように、新しいGUIでは生産性が飛躍的に増加することがお分かり頂けたでしょうか？
アンカーなどのレイアウトに関する基礎的な部分は公式サイトやその他有志の方々が纏めていますので、次項では新しいGUIのレイアウトを調整する上で肝となるオブジェクトサイズのノウハウを簡単にご紹介します。

各オブジェクトのサイズ

新しいGUIを修得する上で大切なのは、個人的にはUnityがUIのレイアウトを決定しているかだと思っています。そしてそれが分かると、自動レイアウトで躓かなくなると思います！そこでこの項では、各オブジェクトのサイズがどのようにして決まるのかをご紹介します。

Unityは各オブジェクトのサイズを動的に決定します。もしオブジェクトのサイズが静的に決まっている場合は不要ですが、自動レイアウト（Vertical/Horizontal Layout Groupなど）を使う場合は必須です！

ではどのような情報に基づいてUnityが各オブジェクトのサイズを決定するのかというと、重要なのはILayoutElementインタフェースで定義されている以下のプロパティになります。
  • minHeight/Width
  • preferredHeight/Width
  • flexibleHeight/Width
  • layoutPriority
min系は各オブジェクトが最低限表示して欲しいサイズをUnityに伝えます。
preferred系は、望ましいサイズを伝えます。
flexible系はサイズを伝えるのではなく、preferredのサイズより大きくしていいかどうかを伝え、bool値のような使い方をします。
layoutPriorityは、1つのオブジェクトで複数のコンポーネントがILayoutElementインタフェースを実装している場合の優先順位を決定します。

以上のプロパティは、もちろんTextやImageなどの標準UIにも実装されています。実際の値については、下図の右下のようにエディター上で随時確認できるようになっています。


上記のように自動レイアウトの中では各オブジェクトのILayoutElementにもとづいてサイズが決定されますが、もし自分でサイズを任意に決定したい場合や、複数オブジェクトからなるプレハブを作っている場合などは、自分でILayoutElementを実装する必要があります。
そのためには、もしサイズが静的な場合はLayoutElementコンポーネントを追加してインスペクターから値を設定します。もしサイズが動的な場合は、独自のILayoutElementを実装したコンポーネントを追加します。

個人的イケてる所・イマイチな所

LayoutElement以外にもいろいろと必要な知識があり、それらをここでご紹介するのはあまりにも無謀なので、今回はこの辺で割愛させて頂きます。詳しい情報については、公式マニュアル（英語）をご覧ください。

最後に、NGUIとも比較してみて個人的な感想をご紹介します。

個人的に新しいGUIがイケてると思っている点は、
  • 無料、オープンソース化の予定
  • 公式機能なのでバージョン依存が低い、Assetを入れる必要がない
  • NGUIのような使い勝手
  • マルチ解像度・DPIに対応しやすい
  • タップなどのイベント処理が柔軟に設定できる
  • ドローコールを賢く自動的にまとめてくれる
なところです。
逆にイマイチだと思っている点は、
  • ボタンを別のボタンのすぐよこに置くといった、相対的な配置ができない
  • 標準UI・機能が若干少ない
  • 描画の前後関係がヒエラルキーに依存してしまう
  • ドローコールがまとまる仕組みを理解していないと、いつの間にか増えている
なところです。

全体的には長年の実績があるNGUIには少し及ばないものの、オープンソース化されれば今の基本パーツ以外にもいろいろ増えそうなので、今後に期待です！
特に再利用性の高いUIモジュールを作る場合、NGUIの特定バージョンに依存してしまうと良くないので、新しい標準GUIは必須でしょう！

注意点

この記事執筆時点では、Unity 4.6はオープンベータテスト中です。
まだまだバグ修正を始め、仕様変更も多い状態です。
バージョンも1～2週間ペースで上がり、現在b21まで到達しているぐらい、不安定なものです。

そのためUnity自身テスト目的での使用を推奨しており、直近でリリースされるプロダクトへの適用を推奨していません。

まだまだ日本語の情報も少ないので、近いうちの導入を考えていらっしゃる方はご注意下さい。