UnityのuGUI入門してみた

Unityもくもく会があったのでuGUIを触ってみました。

動画やブログで勉強してたけど、詳しい方から教えてもらって助かりました～

まずは4.6 Open BetaをDL！

2014/11/27追記
　Asset StoreにUGUIのサンプルでてました！　→　Unity Samples: UI

uGUI用のRect Toolボタンが追加に！
このボタンはTキーで切替できます

新規プロジェクトを作ってまずはボタンを作ります

uguiの部品はこのCanvas配下に入っていきます。
Canvasは複数作れるし、Canvas配下にCanvas作れます。

※　EventSystemはCanvas作成時に一緒に作られる。
　　uguiで提供するボタンイベントなど処理するっぽい

Rect toolでできること

　HierarchyでButtonを選択し、Rect toolボタンを押下。

　以下の事ができます。

　・縦横の端をつかんで拡大縮小

　・青い点をドラッグで拡大縮小

　・端と青い点以外をドラッグで移動

　・Shiftキー＆ドラッグで縦横比保ったまま拡大縮小

　・ドラッグ＆Optionキーだと真ん中を中心で拡大縮小

　・回転もできる

　

　・真ん中の青い円はピボットポイントです
　　→　ピボットポイントをずらすと回転する時の支点が変わる
　　→　RectToolボタンの右横のCenterボタン押下→Pivotにすると支点変更できる

ButtonのInspectorについて

　

　[ Rect Transform ]
　・3DオブジェクトのTransformにあたる
　・Rect Transformは位置、Rotationは回転、Scaleはサイズ調整可能
　・以下の画像のように起点を変更できる
　　

　　実際に起点を変えて、PosX、PosYに0を入れると理解しやすいです

　　ちなみにOptionキー押下しながら起点を変えると配置もしてくれる

　・Anchrosは、9-patchのようなもので拡大縮小した時の表示設定です。
　　

　　＜アンカーが最小の場合＞
　　　Canvasを拡大縮小しても画像サイズが変わらない
　　＜イメージにサイズとアンカーの枠を一致させた場合＞
　　　Canvasを拡大縮小した時、一緒にサイズ拡大縮小する

　[ Button ]

　・TransitionがColor Tintの場合、押下時の色など選べます

　　

　・TransitionをSprite Swapにすると任意の画像を表示できます
　　

　・TransitionがAnimationは任意のアニメーションを実行します。

　　Auto Generate Animator押下でアニメーションファイルを作ってくれます。
　　なのでAnimationでボタン色や拡小などのアニメ付けできます

　　

　・Navigationはキーで選択するボタンが指定できます。

　　以下は矢印キー押した時に選択するボタンを指定したところ。
　　Visualizeを押下すると、ボタンの遷移も見れます。

　　 

　・OnClickにアタッチしたオブジェクトのScritptも呼べます。
　　ちなみにここで呼ぶメソッドはpublicでないと表示されません

　　

　　・部品はMaterialを持たせる事もできます
　　
　・Button配下のTextにShadowやOutLineも付けられるのでリッチな表現可能

　　
　　ちなみにテキストにはMarkUpフォーマットが使えるぞ！
　　（Unity Manual - Rich Text）

　　

　・同じようにメニューから[Component]-[UI]-[Mask]とやるとマスクできる
　　こんなかんじでMaskをつけた親の下の子にマスクがかかります
　　

CanvasのInspectorについて

・Render Mode（スクリーン座標 or ワールド座標に配置するか選べる）

　１）Screen Space - Overlay　→　描画が全て終わった後に配置する

　２）Screen Space - Camera　→　特定のカメラだけにUGUI部品を表示する

　３）World Space　→　3Dオブジェクトのようにワールド座標で配置

　※　Canvasの移動(Rect Transform)はWorld Space以外できない

　※　pixel perfectチェックで画面にあったジャストサイズに表示してくれる

[Canvas Scaler]

・Ui Scale Mode（UIの表示サイズを設定できる）

　１）Constant Pixel Size　→　デフォルト。Scale Factorで部品のサイズを調整可

　２）Scale With Screen Size　→　Reference Resolutionで画面の固定サイズを選べる

　３）Constant Physical Size　→　ミリメートルやDPIなど実単位でUIサイズを選べる

だいたいこんな感じでiTweenも今後対応っぽいです
uGUIが気になってる方はそろそろ触らないとですよ

ちなみに動画はちょっと...という方はUIドキュメントがオススメです


[ 参考ブログ ]
Unity4.6 Unity UI (uGUI)のまとめ : Canvas

Unity 4.6Beta uGUI 履修1:Buttonを配置してみた。

Unity 4.6の新GUIを使おう (1/7)

【Unity、uGUI】チュートリアル見ながら触ってみる。

Unityの新GUI、uGUIはどうなる？こうなる！

UnityのuGUIのUIにシェーダーを適応する