概要

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制御

ImageTest

  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の記事で書く予定。

uGUIのRaw Image、Image、Panel、Mask

概要