uGUI (UnityのUI機能) の使い方まとめ
はじめに
今更ながらuGUIを使うようになったので、
スムーズに開発できるように、使い方をまとめておこうと思います。
といっても、まとめてくれているサイトや記事がいっぱいあるので
リンク集に近いものをまとめます。
- ざっくりどんなもんなのか
- 逆引きでの使用例
- 各コンポーネントの解説
をまとめると使いやすいかも、ということで。
uGUI入門
uGUIとは
そもそも、UnityではUI機能のことをuGUIとは呼んでいません。
Unity4.6から提供された、UI機能のことを周辺の界隈の人たちが"uGUI"と呼んでいるようです。
由来は調べてみましたがわかりませんでした。Unity GUIとか?
チュートリアル
これを順番に読んでいけば入門はOK、というすばらしい内容です。
公式ドキュメントにはあまり良いものがなさそうなのでこれを読みましょう。
公式のサンプルプロジェクト
さすがに上記だけだと各パーツの作り方はわからないので、
https://www.assetstore.unity3d.com/jp/#!/content/25468
上記のAsset Storeをダウンロードしてみましょう。
- テキスト
- ボタン
- スライダー
- ラジオボタン
- セレクトボックス
- フォーム
- スクロール
といった基本的なUIパーツの使い方がわかります。
Controls.unityをみてみるのがオススメです。
逆引きuGUI
とりあえず作り方を知りたいときはこっちを読みます。
テキスト
テキストを表示する
テキストを表示させるのに、Canvas, CanvasScaler, RectTransform, CanvasRenderer, Textと、たくさんのコンポーネントを使わないといけなくて、結構大変です。
こちらで、一通り必要な操作がわかりやすくまとめられています。
テキストを一部装飾する
表示するだけでなく、装飾したいこともあるはずです。
全ての色を変えるのは簡単ですが、一部変えたいときもある。
そんなときは上記を読みます。
htmlタグのように<hoge>ほげ</hoge>と入力して部分的に装飾することができます。
ざっと現状(2015年1月)のサポート内容を以下に記しておきます。
- b: 太字
- i: イタリック
- size: 大きさ
- color: 色
- material: マテリアル (上級)
- quad: 画像を埋め込める (上級)
画像
画像を作る
画像を作る際もいくつか注意ポイントがあったり、
小さな画像は、適切な単位で1枚にまとめることで軽いアプリを提供できます。
下記を読むことで正しい画像の作り方を確認できます。
画像を表示する
画像の表示方法にもいろいろあります。
- Simple: そのまま指定サイズに合わせて拡大縮小する
- Sliced: 画像の端っこはそのままで中の画像だけ拡大縮小する(UIの背景パーツで便利)
- Tiled: サイズに合わせて画像を繰り返してくれる
- Filled: 画像の一部を表示してくれる
上記でそれが網羅的にまとめられています。
ボタン
ボタンを作る
ボタンは、
- デフォルトで背景が画像
- デフォルトでテキストが内側に表示
- タップ(クリック)したり、ユーザーのアクションで画像や色が切り替わる
- タップ(クリック)したときの処理を記述できる
と、できることがたくさんある機能です。それらを全て、以下でまとめてくれてます。
レイアウト
パーツの位置を調整する
最低限、デザイナーの想定通りの位置に調整できないと話にならないので
位置調整用のコンポーネント「RectTransform」の理解は必須です。
基本は、
- 中心点が「左上」なのか「中央」なのか、などを設定する
- 中心点を基準にした座標で位置を調整する
ということがわかってれば済む話なのですが、初見だと何をすればいいかわからない人もいると思います。
この記事をみれば、RectTransformをどう使えばいいのかわかります。
複数の画面サイズでも違和感なく表示させる
チュートリアルで紹介したサイトのあるページに詳しくまとまっています。
これにCanvas Scalerコンポーネントの詳細が記載されていて、
これを理解すると、画面サイズが変わったときにどう拡大縮小されるか、
がわかります。
これとは別に、UIの配置の仕方が大事です。
これを読んで、Anchorを使うことの重要性が説かれています。
例えば、
- 端っこのパーツは端っこを基準に(左上のパーツなら左上端、右中央なら右端)UIを置く
など、指針を決めて実装しましょう。
アニメーション
アニメーションをつける
汎用的には、以下を学べばある程度自由に制御できるようになります。
スライドイン・スライドアウトさせる
uGUIのAnchorsでレスポンシブアニメーション | SOU・COLLE
ある程度Unityなりゲームエンジンに慣れてる人はこれ見れば一発ですが、
慣れてない方にはキツイ気がします。
こっちの方がiTweenを使ってスクリプト側で制御してるので、
プログラマーには簡単そうです。
フェードイン・フェードアウトさせる
プログラマーならiTweenを使うのが簡単です。
Canvas Groupを使う方法もあります。
エフェクト
輪郭を加える
Outlineというコンポーネントがあって、それを使うだけで外枠をつけられます。
影をつける
Shadowというコンポーネントを使います。便利ですね。
グラデーションをつける・色の合成(加算/乗算/減算etc)をする
デフォルトではない機能で、作った方がいるようです。
他の機能とのコラボレーション
パーティクルとUIを共存させる
これはあるあるですね。
ImageEffectなるものを使ってみる
カメラ側で処理する際に、セピア色、とかInstagramのフィルタみたいなこと(ポストエフェクト、と呼ばれているようです)ができるようです。
以下の方が、検証してる種類数が多いです。
各コンポーネントの解説
Canvas
Canvas Scaler
Canvas Group
Canvas Renderer
Rect Transform
Text
- 自動改行と禁則処理
- 描画範囲
- フォントがぼやける問題
の解説があります。
Image
- 画像がぼやける問題
の解説です。
Raw Image
解説、というよりは使い道の一例として紹介。
Mask/Rect Mask 2D
同じく使い方の一例ですが・・
以下はRect Mask 2Dの使用例です。
Slider
これも使用例で使い易そうだったのでリンク。
Toggle
Input Field
Sprite Packer
設定によって、Editorで毎回ビルドしてpackingすると重い、とかでハマることがあります。
おわりに
uGUIを学ぶ際のインデックスとして役に立てれば幸いです。