[Unity] Imageコンポーネントの基本的な設定

## 実行環境
- Unity5.4.0f3

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/102664/a101c2b7-1805-aa0a-8548-bfd2df8b0718.png)

## Image.sprite (SourceImage)
- どのSpriteを描画するか指定する
- Inspector上からは `SourceImage` の項目から変更する

### SourceImageをScript上から変更する
- http://docs.unity3d.com/ja/current/ScriptReference/UI.Image-sprite.html

```csharp
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

```csharp
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` の値を設定する
    - 緑色のボーダーラインをドラッグすることでも設定可能
    - ボーダーの内側にある要素が拡縮される

![sprite.png](https://qiita-image-store.s3.amazonaws.com/0/102664/06fce994-ca38-73bf-0501-7d50d955880d.png)

![spriteeditor.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/4d67a345-1598-f12b-c5fc-89729e042fc1.gif)

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

![9slice.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/487a2775-5f85-ff74-d9dd-7c942c65f387.gif)

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

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

```csharp
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本来のサイズを設定することが出来る
  - 動的に画像を差し替えた場合も以下のようなコードで適応できる

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

## 参考
- [UnityのuGUIとImageとSpriteとスライスについて](http://tsubakit1.hateblo.jp/entry/2015/02/19/235900)