Unity 4.6 Beta の新GUIについて 今見ておくべき資料

資料まとめ

Unity 4.6 Beta がリリースされ、ついに新GUI(通称uGUI?)が使える様になりました。

• ダウンロードはこちらから。公式トップ
  Unity - Beta - Unity 4.6

合わせてチュートリアルなどいくつか資料が公開されていたので、目を通して、実際に動かしてみました。

betaということもあり今後仕様が変わったり、より便利なドキュメントや日本語の解説も増えるかと思いますが、2014年8月時点で使えるリソースをまとめてみます。

最後の二つのは▲をつけてありますが、これは内容に重複があったりするため、忙しい人は見なくても良いかなーと思ったものです。それでも良い資料だと思います。

ちなみに 全部英語 です。

概要説明(ビデオ)

• Overview of the New UI System – Unity Technologies Blog

基本的な編集の仕方などが30分弱で説明されています。まずはここから。次に紹介しますようにサンプルが公開されているので、おすすめ。

上記ビデオで利用しているサンプルシーン(もちろんテクスチャ等素材も含む)のダウンロード

• UI Example Project | Unity Community

助かります。

公式チュートリアル (11 + 1 本)

• Unity - UI

項目ごとの動画11本、合計1時間12分でざっくり各機能を紹介。 上記概要説明ビデオとかぶる部分も多いですが、両方見れば記憶にも良く残るのでは(笑)と思います。

World Space Canvas の説明

• Unity 4.6 – New UI World Space Canvas – Unity Technologies Blog

Unity 4.6 で 3D Text が廃され、代わりにGUIのCanvasのRender modeとして、"World Space" が定義されています。これを使うことで、他のオブジェクトと同様にシーン中にGUI要素を配置でき、またGUIですのでインタラクションも可能になります。

上記チュートリアルではWorld Space Canvas についての説明はほとんどありません。こちらで、具体的に「キャラクターの座標系に存在し、スケールをあわせたGUI」の作り方が説明されています。

▲ 公式チュートリアルラストのまとめ動画 "THE NEW UI"

• Unity - The New UI

最新の概要説明ビデオ。初めに挙げた概要説明ビデオと内容やボリューム感がかぶっています。

初めに挙げた概要説明ビデオは、5/28 にアップされた物で、4.6としてリリースされた物と一部異なっている部分があります。動画を見ていて気がついたところで言うと

• 5/28時点では、EventSystem が Canvasの下にぶら下がるようになっている
• Canvas Renderer のアイコンが異なる

などです。細かいところですが。 "THE NEW UI" 動画は最新の内容になっているので、その点についてはこちらの方が良いですが、サンプルが公開されている分、5月の概要説明ビデオの方が使いやすいと思います。

▲ UNITE 2014 講演動画

• Unite 2014 - Advanced UI - YouTube

開発者の方によるライブデモプレゼンテーション。動画は1時間ありますが、後ろの25分は質疑応答。 概要をさーっとなぞるだけなので、上に挙げている動画を見ていたら不要かも。

※ UNITE 2014 の講演動画一覧はこちら Unity - Unite Archive - 2014

要点かなーと思ったこと列挙

細かいところまでは全然追えていませんが、uGUIを使う上で押さえておくべき(そしてちょっと特殊な)部分をメモしておきます。

Canvas と Render Mode

(ビデオ) UI Canvas を参照

• Screen Space - Overlay：画面上の平面UI
• Screen Space - Camera：UI用のカメラを用意して立体的なUIを重畳
• World Space：シーン中に他のオブジェクトと同様にUI要素を配置

の三つがある。

Screen Space - Camera を使う場合は、CameraのClear Flags や Culling Mask、Depth 等を活用して、重なり具合を制御する。

Anchorシステム

(ビデオ) UI Rect Transform を参照

• 各種UI要素の配置に関する設定。親ウィンドウの左端からxピクセルに固定、とか、センタリング、とか。

• Anchor は「親の四隅から見たパーセンテージ」で表現される

• Anchorのプリセットを選ぶときに Alt キーを押すと、同時に配置されるUI要素のポジションまでプリセットの中から選んで設定できる。左寄せにするなど。

• Layout Group (Grid, Vertical, Horizontal) については、GUIサンプルプロジェクト中 "Layout Groups" (キーボードのサンプル) が参考になる。

• GUIはフォントやアイコンを利用するので基本的にはScaleは使わない。 World Soace Canvas 利用時は、フォントサイズを合わせるために、Canvas全体に対してScaleをかけて、その中のウィンドウやフォントは、画面ピクセルのサイズ単位で指定する

GUIのアニメーション

(ビデオ) UI Button 参照

ボタンなどの要素は normal, highlight, pressed, disable の4状態を遷移し、その間でアニメーションを設定できる。アニメーションの設定法としては以下の四つがある

• 無し
• ボタンの
• Spriteの張り替え
• Mechanimを用いた汎用性の高いアニメーション設定

「マウスオーバー時に少し大きくしながら手前に出して、ついでにちょっと青く光らせる」 みたいなことも、Mechanimを使えば割と簡単に設定できます。

GUIのイベント

[ビデオ] UI Events And Event Triggers

• ボタンクリックのイベントハンドラを、インスペクタ上で指定できる。 反応するゲームオブジェクトと、そいつがする行動を指定する

• Event Trigger コンポーネントをアタッチすることで、 "On Click" 以外のイベントもインスペクタ上から指定出来るようになる

日本語テキスト

インスペクタ上ではうまく書き込めない。どこか別の場所で書いてコピペはできます。

ボタンやスライダの見た目の変更

すべてのUI要素は小さなスプライトに分解できる。スライダは、背景と、バーと、ハンドル、のようなかんじ。それらごとにスプライトを用意すれば、自由にデザインが可能

さいごに

NGUI をあまり使ったことがないのですが、新しいGUIはAnchorやスタイルの変更など良いところを取り込んできれいにまとまっている印象を持ちました。普段GUIをちゃんと作り込む必要のある作品を作っているわけではないのですが、特にWorld Space Canvasなんかは積極的に使っていきたいです。