mikan_daisuki’s blog

IT系サラリーマンの日記。前職ではスマホゲームを、現在はアプリを作ってます。



uGUI (UnityのUI機能) の使い方まとめ

 

はじめに

今更ながらuGUIを使うようになったので、

スムーズに開発できるように、使い方をまとめておこうと思います。

といっても、まとめてくれているサイトや記事がいっぱいあるので

リンク集に近いものをまとめます。

をまとめると使いやすいかも、ということで。

uGUI入門

uGUIとは

そもそも、UnityではUI機能のことをuGUIとは呼んでいません。

Unity4.6から提供された、UI機能のことを周辺の界隈の人たちが"uGUI"と呼んでいるようです。

由来は調べてみましたがわかりませんでした。Unity GUIとか?

チュートリアル

www.metalbrage.com

これを順番に読んでいけば入門はOK、というすばらしい内容です。

公式ドキュメントにはあまり良いものがなさそうなのでこれを読みましょう。

公式のサンプルプロジェクト

さすがに上記だけだと各パーツの作り方はわからないので、

https://www.assetstore.unity3d.com/jp/#!/content/25468

上記のAsset Storeをダウンロードしてみましょう。

  • テキスト
  • ボタン
  • スライダー
  • ラジオボタン
  • セレクトボックス
  • フォーム
  • スクロール

といった基本的なUIパーツの使い方がわかります。

Controls.unityをみてみるのがオススメです。

逆引きuGUI

とりあえず作り方を知りたいときはこっちを読みます。

テキスト

テキストを表示する

テキストを表示させるのに、Canvas, CanvasScaler, RectTransform, CanvasRenderer, Textと、たくさんのコンポーネントを使わないといけなくて、結構大変です。

hiyotama.hatenablog.com

こちらで、一通り必要な操作がわかりやすくまとめられています。

テキストを一部装飾する

表示するだけでなく、装飾したいこともあるはずです。

全ての色を変えるのは簡単ですが、一部変えたいときもある。

docs.unity3d.com

そんなときは上記を読みます。

htmlタグのように<hoge>ほげ</hoge>と入力して部分的に装飾することができます。

ざっと現状(2015年1月)のサポート内容を以下に記しておきます。

  • b: 太字
  • i: イタリック
  • size: 大きさ
  • color: 色
  • material: マテリアル (上級)
  • quad: 画像を埋め込める (上級)

画像

画像を作る

画像を作る際もいくつか注意ポイントがあったり、

小さな画像は、適切な単位で1枚にまとめることで軽いアプリを提供できます。

下記を読むことで正しい画像の作り方を確認できます。

hiyotama.hatenablog.com

画像を表示する

画像の表示方法にもいろいろあります。

  • Simple: そのまま指定サイズに合わせて拡大縮小する
  • Sliced: 画像の端っこはそのままで中の画像だけ拡大縮小する(UIの背景パーツで便利)
  • Tiled: サイズに合わせて画像を繰り返してくれる
  • Filled: 画像の一部を表示してくれる

hiyotama.hatenablog.com

上記でそれが網羅的にまとめられています。

ボタン

ボタンを作る

ボタンは、

  • デフォルトで背景が画像
  • デフォルトでテキストが内側に表示
  • タップ(クリック)したり、ユーザーのアクションで画像や色が切り替わる
  • タップ(クリック)したときの処理を記述できる

と、できることがたくさんある機能です。それらを全て、以下でまとめてくれてます。

hiyotama.hatenablog.com

レイアウト

パーツの位置を調整する

最低限、デザイナーの想定通りの位置に調整できないと話にならないので

位置調整用のコンポーネント「RectTransform」の理解は必須です。

tsubakit1.hateblo.jp

基本は、

  • 中心点が「左上」なのか「中央」なのか、などを設定する
  • 中心点を基準にした座標で位置を調整する

ということがわかってれば済む話なのですが、初見だと何をすればいいかわからない人もいると思います。

この記事をみれば、RectTransformをどう使えばいいのかわかります。

複数の画面サイズでも違和感なく表示させる

チュートリアルで紹介したサイトのあるページに詳しくまとまっています。

www.metalbrage.com

これにCanvas Scalerコンポーネントの詳細が記載されていて、

これを理解すると、画面サイズが変わったときにどう拡大縮小されるか、

がわかります。

これとは別に、UIの配置の仕方が大事です。

docs.unity3d.com

これを読んで、Anchorを使うことの重要性が説かれています。

例えば、

  • 端っこのパーツは端っこを基準に(左上のパーツなら左上端、右中央なら右端)UIを置く

など、指針を決めて実装しましょう。 

アニメーション

アニメーションをつける

tsubakit1.hateblo.jp

汎用的には、以下を学べばある程度自由に制御できるようになります。

スライドイン・スライドアウトさせる

uGUIのAnchorsでレスポンシブアニメーション | SOU・COLLE

ある程度Unityなりゲームエンジンに慣れてる人はこれ見れば一発ですが、

慣れてない方にはキツイ気がします。
 

ラブライブっぽいUIをUnityとiTweenで作ってみる

こっちの方がiTweenを使ってスクリプト側で制御してるので、

プログラマーには簡単そうです。

フェードイン・フェードアウトさせる

プログラマーならiTweenを使うのが簡単です。

megumisoft.hatenablog.com

Canvas Groupを使う方法もあります。

kikikiroku.session.jp
 

エフェクト

輪郭を加える

Outlineというコンポーネントがあって、それを使うだけで外枠をつけられます。

baba-s.hatenablog.com

影をつける

Shadowというコンポーネントを使います。便利ですね。

baba-s.hatenablog.com

グラデーションをつける・色の合成(加算/乗算/減算etc)をする

デフォルトではない機能で、作った方がいるようです。

westhillapps.blog.jp

他の機能とのコラボレーション

パーティクルとUIを共存させる

これはあるあるですね。

http://anz-note.tumblr.com/post/96866870921/unityのugui使いつつパーティクル表示させたい-д-カッ

anz-note.tumblr.com

ImageEffectなるものを使ってみる

カメラ側で処理する際に、セピア色、とかInstagramのフィルタみたいなこと(ポストエフェクト、と呼ばれているようです)ができるようです。

qiita.com

以下の方が、検証してる種類数が多いです。

kikikiroku.session.jp

コンポーネントの解説

Canvas

www.metalbrage.com

Canvas Scaler

www.metalbrage.com

Canvas Group

docs.unity3d.com

Canvas Renderer

docs.unity3d.com

Rect Transform

spi8823.hatenablog.com

Text

  • 自動改行と禁則処理
  • 描画範囲
  • フォントがぼやける問題

の解説があります。

tsubakit1.hateblo.jp

Image

  • 画像がぼやける問題

の解説です。

kohki.hatenablog.jp

Raw Image

解説、というよりは使い道の一例として紹介。

qiita.com

Mask/Rect Mask 2D

同じく使い方の一例ですが・・

hiyotama.hatenablog.com

以下はRect Mask 2Dの使用例です。

tsubakit1.hateblo.jp

Slider

これも使用例で使い易そうだったのでリンク。

qiita.com

Toggle

hiyotama.hatenablog.com

Input Field

hiyotama.hatenablog.com

Sprite Packer

設定によって、Editorで毎回ビルドしてpackingすると重い、とかでハマることがあります。

docs.unity3d.com

おわりに

uGUIを学ぶ際のインデックスとして役に立てれば幸いです。