[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.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とスライスについて