[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上から変更する

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

Image.color

ColorをScript上から変更する

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

Image.Type.Simple

Image.Type.Slice

9sliceを実装する

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

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

Image.Type.Tiled

Image.Type.Filled

Image.fillMethod

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

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

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

参考