#概要
Unityのバージョンは5.2.3f1
uGUIのRaw ImageとImageとPanelについてのメモです。
この３つはほぼ似たような機能なのでまとめて解説します。(ImageとPanelは初期値が違うがコンポーネントは同じもの）
内容はマニュアルを見ると詳しく載っています。
Raw Image http://docs.unity3d.com/ja/current/Manual/script-RawImage.html
Image http://docs.unity3d.com/ja/current/Manual/script-Image.html
Set Native Sizeボタンを押すと画像ファイルの大きさにリサイズされる。
縦横比を変えたくない場合は、Preserve Aspectにチェックを入れる。
画像ファイルの設定方法も覚える必要がある
http://docs.unity3d.com/ja/current/Manual/class-TextureImporter.html
http://docs.unity3d.com/ja/current/Manual/SpriteEditor.html
#それぞれの使い道
Raw Image
- Raw Imageは.pngや.jpgのファイルをTextureとしてそのまま表示する。
- UV Rectを変更して画像データの表示箇所を調整できる。（特定の場所をズームするなど）
- タイルのテクスチャをならべて模様を作れる。
Image、Panel
- Panelは最初からサイズが自動でフィットするようになっているので背景設定などに使う。
- 画像ファイルの設定でTexture TypeをSpriteに設定したファイルを使ってサイズの違うボタンを１つの画像で作れる。(Sprite Editorにて設定）
http://unitygeek.hatenablog.com/entry/2015/03/07/182606 - Image Typeを変えることで画像の表示方法を変えたり画像の一部を非表示にできる。(タイプ別の表示は以下のサイトを参照）
http://www.metalbrage.com/UnityTutorials/uGUI/ImageElement.html
http://bribser.co.jp/blog/create-circle-shaped-gauge-for-game-using-unity-and-ugui/
（Scriptで制御すると体力ゲージやインジケータなどの演出に使えそう）
#Maskを使った表現
1.Imageを2つ作って片方を子オブジェクトにする。
2.親オブジェクトの方にAdd Component>UI>Maskを追加する。
3.MaskのShow Mask Graphicのチェックをはずす。
以上のことをやると子オブジェクトの形に親オブジェクトが切り抜かれる。
http://docs.unity3d.com/ja/current/Manual/script-Mask.html
- MaskにはRect Mask 2Dもある。こちらはマスクのオブジェクトを透明にできないなどの制限があるがパフォーマンス上の利点があるらしい。http://docs.unity3d.com/ja/current/Manual/script-RectMask2D.html
- TextにMaskを追加して、子オブジェクトにグラデーションをかけたテクスチャを設定すると、グラデーションがかかった文字が作成できる。
#Raw Image、Image、PanelのSprict制御
using UnityEngine.UI;
RawImage image1;
image1 = GetComponent<RawImage>(); // コンポーネントを取得
image1.uvRect = new Rect(0,0,0,0); // UV Rectを指定
image1.enabled = false; // Imageを非表示
Image image2;
image2 = GetComponent<Image>(); // コンポーネントを取得
image2.fillAmount += 0.01f; // Fill Amountを指定
image2.enabled = false; // Imageを非表示
#その他のメモ
- スマホのUIデザインのノウハウを参考にする。
- Textと同様、ShadowやOutlineを使って分裂した画像を分裂させたり、縁をつけたりすることができる。
- Maskを使った表現はいろいろなことができるのでいろいろ試すのが良い。（テキストでマスクしたり、リストをつくるのに使ったり）
- Raw Imageで模様を作って特定方向にスクロールさせるとゲームの背景に使えそう。
- UnityのSprite Pakerをつかってメモリ消費を抑える。http://docs.unity3d.com/ja/current/Manual/SpritePacker.html
#参考になりそうなサイトやAsset
- マテリアルを使った表現の参考サイト
http://www.metalbrage.com/UnityTutorials/uGUI/ImageElement.html - 体力ゲージ作成の参考サイト
http://qiita.com/T_2/items/fcbcbf4a5cb816330263 - Imageにクラデーションをつける参考サイトhttp://westhillapps.blog.jp/archives/42946739.html
#今後の課題
Materialを使ったいい表現が思いつかない。
Spriteアニメーションについてはanimatorの記事で書く予定。