[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
- http://docs.unity3d.com/ja/current/ScriptReference/UI.Graphic-color.html
- 指定した色をSpriteに対して乗算する
- 要素を白基調で書き出しておいて、Unity側で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
- 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
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要素のタッチ判定が行われる
- UI要素が重なっている場合、上にあるUI要素が
Image.SetNativeSize
-
http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.SetNativeSize.html
- Sprite本来のサイズを設定することが出来る
- 動的に画像を差し替えた場合も以下のようなコードで適応できる
Image image = GetComponent<Image>();
image.SetNativeSize();
参考
Author And Source
この問題について([Unity] Imageコンポーネントの基本的な設定), 我々は、より多くの情報をここで見つけました https://qiita.com/lycoris102/items/98bc5a5659e4889dd43f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .