実行環境

Unity5.4.0f3

Image

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.html
Canvas上でSpriteをレンダリングするためのコンポーネント
- Canvasの子要素として配置されない場合は、描画されない
- UI要素として描画しない場合、 SpriteRenderer コンポーネントを使用する
- UI要素として描画するがWWWから取得した都合等でTextureを貼り付ける場合には RawImage コンポーネントを使用する

Image.sprite (SourceImage)

どのSpriteを描画するか指定する
Inspector上からは SourceImage の項目から変更する

SourceImageをScript上から変更する

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image-sprite.html

image = GetComponent<Image>();
image.sprite = sprite;

Image.color

http://docs.unity3d.com/ja/current/ScriptReference/UI.Graphic-color.html
指定した色をSpriteに対して乗算する
- 要素を白基調で書き出しておいて、Unity側でColorを指定することでバリエーションを持たせられる

ColorをScript上から変更する

http://docs.unity3d.com/ja/current/ScriptReference/Color.html

Image image = GetComponent<Image>();
image.color = new Color(1.0f, 1.0f, 1.0f, 1.0f); // 0~1 の間の値を指定する (0~255で扱いたい場合は変換するメソッドを用意すると良さそう/ カラーコードの場合も同様)
image.color = new Vector4(1.0f, 1.0f, 1.0f, 1.0f); // Vector4は暗黙的にColorに変換される
image.color = Color.red; // Unity側で用意された色定義を使用する

Image.type

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.html
RectTransform にてUI要素のWidth/Heightが変更された時の描画挙動を設定出来る

Image.Type.Simple

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.Simple.html
画像の全体像を描画する
RectTransformによって拡縮が行われる場合、画像の引き伸ばしが行われる

Image.Type.Slice

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.Sliced.html
9slice用の設定
- 画像を9分割し、角(左上/左下/右上/右下)に指定されていない箇所を引き延ばすことによって変形を防ぐ手法

9sliceを実装する

SpriteEditorにて9sliceを適応したSpriteを作る
- http://docs.unity3d.com/ja/current/Manual/SpriteEditor.html
- 9sliceを設定したい画像をProjectビュー上で選択する
- TextureType を Sprite(2d and UI) に指定する
- SpriteMode を Single に設定する
- SpriteEdtior を開く
- Border の値を設定する
  - 緑色のボーダーラインをドラッグすることでも設定可能
  - ボーダーの内側にある要素が拡縮される

Canvas以下に上記SpriteをアタッチしたImageコンポーネントを用意する
- SourceImageに上記で設定したspriteをアタッチする
- Image.Type.Sliced を設定する

Image.Type.Tiled

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.Tiled.html
タイルを敷き詰めたように描画する手法
元の画像サイズを超えるようにRectTransformを設定すると、引き延ばす代わりに同一の要素を繰り返し配置する

Image.Type.Filled

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.Filled.html
画像の一部分だけ描画する
主にHP等のゲージを実装する際に使われる

Image.fillMethod

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.FillMethod.html

fillMethod
Horizontal	`Image.FillOrigin`で左右どちらを基点にするか設定した上で横に画像を埋めていく
Vertical	`Image.FillOrigin`で上下どちらを基点にするか設定した上で縦に画像を埋めていく
Radial90	`Image.FillOrigin`で角(左上/左下/右上/右下)を指定した上で放射状に画像を埋めていく (90°)
Radial180	`Image.FillOrigin`で縁(上/下/左/右)を指定した上で放射状に画像を埋めていく (180°)
Radial360	`Image.FillOrigin` で始点を設定した上で Imageの中心を中心として円形に画像を埋めていく

Image.fillAmount

どのくらいImageを描画するかを0~1の範囲で設定する

private int maxHP = 100;
private int HP = 100;

void Damage(int damage)
{
   HP = Math.Max(HP - damage, 0);
   Image image = GetComponent<Image>();
   image.fillAmount = float(HP/maxHP);
}

Image.preserveAspect

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image-preserveAspect.html
アスペクト比を維持するかを設定する
RectTransformのWidth/Heightを変更した際に、アスペクト比を超えた場合、小さい方の値を基準にアスペクト比を維持する

Image.raycastTarget

http://docs.unity3d.com/ja/current/ScriptReference/UI.Graphic-raycastTarget.html
raycast
- (ここでは)仮想的な直線を飛ばすことで衝突判定を行うための仕組みを指す
raycastTargetが有効である場合、このオブジェクトに対するタッチ判定を有効になる
- UI要素が重なっている場合、上にあるUI要素が raycastTarget = true である場合、上にあるUI要素のみタッチ判定が行われる
- UI要素が重なっている場合、上にあるUI要素が raycastTarget = false である場合、下にあるUI要素のタッチ判定が行われる

Image.SetNativeSize

http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.SetNativeSize.html
- Sprite本来のサイズを設定することが出来る
- 動的に画像を差し替えた場合も以下のようなコードで適応できる

Image image = GetComponent<Image>();
image.SetNativeSize();

参考

UnityのuGUIとImageとSpriteとスライスについて