UnityのImage【使い方とスクリプト】【UGUI】

component thumbnail

この記事はUnityのコンポーネントImageについて解説している記事です。

スポンサーリンク

<Imageとは>

テクスチャを画面に描画するためのコンポーネントです。

shaded-texture

UGUIなので、Canvasが無いと描画されません。

UGUIがまずよくわからないよという方は↓の左上の記事を参考にしてください。スプライトについても解説しています。また、関連性の高いコンポーネントについても解説しています。

スポンサーリンク

<Imageのインスペクター>

image inspector
クリックすると展開します

Source Image

表示させるスプライトを指定します。

Color

マテリアルに指定した色を渡します。

マテリアルを設定していない場合はスプライトに色を乗算します。

Material

このスプライトにマテリアルを適用します。

マテリアルがよくわからない方は↓から

Raycast Target

このスプライトがGraphic Raycasterからのレイキャストを受け付けるようになります。

Graphic Raycasterの解説は↓から

Image Type

このスプライトをどのように表示するのかを設定します。

選んだイメージタイプによってせてい項目が変わります。

Simpleの場合

スプライトをそのまま表示します。

・Use Sprite Mesh

スプライトに設定されたメッシュの形で描画します。

polygon-sprite

スプライトのメッシュの設定の仕方は↑↑の方で紹介したスプライトの記事で解説しています。

・Preserve Aspect

スプライトのアスペクト比を保つようになります。

RectTransformのWidthとHeightの値は変わらず、見た目だけが変わります。

Slicedの場合

スプライトの9スライスを有効にし、ボーダー範囲内を伸縮させます。

9スライスの設定の仕方は↑↑の方で紹介したスプライトの記事で解説しています。

test-ui-size-change

9スライス無し

test-ui-border-image

9スライス有り(Silced)

・Fill Center

9スライスで引き伸ばされた中央部分をくり抜いて表示します。

fill center

UIの縁取りなどに使用します。

Tiledの場合

スプライトの9スライスを有効にし、ボーダー範囲内を繰り返し表示します。

9スライスの設定の仕方は↑↑の方で紹介したスプライトの記事で解説しています。

↓を元画像にした時

元々の画像から縮尺を変えると↓のようになります。

no 9 slice

9スライス無し

slice sprite

9スライス有り(Silced)

tiled sprite

9スライス有り(Tiled)

このようにSlicedとは違い、引き伸ばされるのではなく、繰り返し表示になります。

・Fill Center

9スライスで繰り返された中央部分をくり抜いて表示します。

fill center

UIの縁取りなどに使用します。

Filledの場合

スプライトの表示範囲を動的に変更できるイメージタイプです。

sprite filled

・Fill Method

Fill Amountの値によってどのようにテクスチャの表示範囲を変えるのかを指定します。

Horizontal・・・横向きに表示範囲が変わっていきます。

Vertical・・・縦向きに表示範囲が変わっていきます。

Radial 90・・・始点から90度の角度で表示範囲が変わっていきます。

Radial 180・・・始点から180度の角度で表示範囲が変わっていきます。

Radial 360・・・始点から360度の角度で表示範囲が変わっていきます。

・Fill Origin

Fill Methodの始点をどこに置くのかを指定します。

Fill Methodの種類によって置ける箇所が変わります。

Top・・・上始点 (Vertical, Radial 180, Radial 360で選択可能)

Bottom・・・下始点(Vertical, Radial 180, Radial 360で選択可能)

Left・・・左始点(Horizontal, Radial 180, Radial 360で選択可能)

Right・・・右始点(Horizontal, Radial 180, Radial 360で選択可能)

Bottom Left・・・左下始点(Radial 90で選択可能)

Top Left・・・左上始点(Radial 90で選択可能)

Bottom Right・・・右下始点(Radial 90で選択可能)

Top Right・・・右上始点(Radial 90で選択可能)

・Fill Amount

どのくらいの範囲を表示するのかを正規化された値で表します。

・Clockwise

Fill MethodがRadial○○の時だけ指定できます。

時計回りかどうかです。

・Preserve Aspect

スプライトのアスペクト比を保つようになります。

RectTransformのWidthとHeightの値は変わらず、見た目だけが変わります。

Set Native Size(ボタン)

このボタンを押すとRectTransformのWidthとHeightがスプライトの元々のピクセルすうになります。

スポンサーリンク

<Imageのスクリプトの使い方>

名前空間UnityEngine.UI
class
継承UI.MaskableGraphic

デフォルトの状態から使用するには

using UnityEngine.UI;

と記述するか

UnityEngine.UI.Image

とする必要があります。

クリックすると展開します

defaultETC1GraphicMaterial

テクスチャがETC1という圧縮形式で圧縮されている場合で、何もマテリアルが設定されていない場合に使用されるマテリアルです。

読み取り専用です。

型 Material型

○ 使い方
テクスチャがETC1という圧縮形式で圧縮されている場合で、何もマテリアルが設定されていない場合に使用されるマテリアルを取得したい場合に使用します。

Material m = Image.defaultETC1GraphicMaterial;

alphaHitTestMinimumThreshold

レイキャストを受け取るアルファ値のしきい値です。

デフォルトでは0になっており、透明な部分であろうとレイキャストがヒットしたとみなされます。1にすると完全に不透明な部分以外のレイキャストは受け取りません。

また、この機能を有効にするにはスプライトのRead/Writeをオンにしていなければいけません。

型 float型

○ 使い方
透明な部分でレイキャストがヒットして欲しくない時などに使用します。

Image img = GetComponent<Image>();
img.alphaHitTestMinimumThreshold = 0.5f;

fillAmount

イメージタイプがFilledの場合、どれくらいの割合スプライトを表示するのかを決定します。

詳しくはインスペクターの項目をご覧ください。

型 float型

○ 使い方
画像の表示範囲を動的に変えたい場合に使用します。例えばHPバーなどです。

Image img = GetComponent<Image>();
img.fillAmount = 0.5f;

fillCenter

イメージタイプがTiledかSlicedの場合、引き伸ばされた中心を表示するのかを決定します。

詳しくはインスペクターの項目をご覧ください。

型 bool型

○ 使い方
画像が引き伸ばされた中心の表示のオンオフをしたい場合に使用します。

Image img = GetComponent<Image>();
img.fillCenter = true;

fillClockwise

イメージタイプがFilledかつFillMethodがRadial○○の場合、時計回りにするか逆時計回りにするのかを表します。

詳しくはインスペクターの項目をご覧ください。

型 bool型

○ 使い方
画像の表示範囲を逆回りにしたい場合になどに使用します。

Image img = GetComponent<Image>();
img.fillClockwise = true;

fillMethod

イメージタイプがFilledの場合、どのような表示範囲にするのかを決定します。

詳しくはインスペクターの項目をご覧ください。

型 UI.Image.FillMethod型

enum型です。

Horizontal・・・横向きに表示範囲が変わっていきます。

Vertical・・・縦向きに表示範囲が変わっていきます。

Radial90・・・始点から90度の角度で表示範囲が変わっていきます。

Radial180・・・始点から180度の角度で表示範囲が変わっていきます。

Radial360・・・始点から360度の角度で表示範囲が変わっていきます。

○ 使い方
画像の表示方法を変更したい場合に使用します。

Image img = GetComponent<Image>();
img.fillMethod = Image.FillMethod.Horizontal;

fillOrigin

イメージタイプがFilledの場合、どこを始点にして表示範囲を変えるのかを決めます。

詳しくはインスペクターの項目をご覧ください。

型 int型

○ 使い方
int型なので注意してください。同じ値でもFilledMethodによって結果が違います。

Image.FilledMethodの種類.始点位置 をint型にキャストしてあげると使いやすいと思います。

Image img = GetComponent<Image>();
img.fillOrigin = (int)Image.Origin180.Bottom;

flexibleHeight

利用可能なスペースがある場合、このレイアウト要素が割り当てられる相対的な高さです。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float h = img.flexibleHeight;

flexibleWidth

利用可能なスペースがある場合、このレイアウト要素が割り当てられる相対的な幅です。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float w = img.flexibleWidth;

hasBorder

スプライトがボーダーを持っているかどうかです。

詳しくは↓のスプライトの記事を参考にしてください。

型 bool型

○ 使い方
スプライトが9スライスにできるのか知りたい時などに使用します。

Image img = GetComponent<Image>();
if(img.hasBorder)
{
  Debug.Log("このImageのスプライトは9スライスできます");
}

layoutPriority

このコンポーネントのレイアウト優先度です。

レイアウトシステムに関連するコンポーネントが同じゲームオブジェクトに複数ついていた場合、この値が高いものが優先されます。

ですが、0 未満の値は無視されます。レイアウトシステムによって変更されます。読み取り専用です。

型 int型

○ 使い方
このコンポーネントの優先度を知りたい場合に使用します。

Image img = GetComponent<Image>();
int p = img.layoutPriority;

mainTexture

このImageにセットされているSpriteの中のテクスチャです。

読み取り専用です。

型 Texture型

○ 使い方
スプライトではなく、テクスチャ自体を取得したい場合に使用します。

Image img = GetComponent<Image>();
Texture t = img.mainTexture;

material

このImageにセットされているSpriteに適用するマテリアルです。

型 Material型

○ 使い方
マテリアルを変更したい場合などに使用します。

Image img = GetComponent<Image>();
Material t = img.material;

minHeight

このレイアウトに割当てられた最小の高さです。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float h = img.minHeight;

minWidth

このレイアウトに割当てられた最小の幅です。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float w = img.minWidth;

overrideSprite

表示するスプライトを上書きするスプライトです。

このImageにどんなスプライトがセットされていても、overrideSpriteに何かスプライトがセットされると、overrideSpriteの方にさし変わります。

型 Sprite型

○ 使い方
ただ単にスプライトを差し替えたい場合はspriteの方に代入すれば良いので、元々のスプライトを保持したまま差し替えたい場合に使用します。

例えばボタンで、通常の状態と押し込んだ状態の2種類のスプライトを使用する場合などです。(UGUIのButton自体にスプライトを上書きする機能があるので、Buttonをカスタマイズして使う際などに使います)

Image img = GetComponent<Image>();
Sprite s = Resources.Load<Sprite>("button_on");
img.overrideSprite = s;

preferredHeight

このイメージを実際に表示した際の高さです。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float h = img.preferredHeight;

preferredWidth

このイメージを実際に表示した際の幅です。

レイアウトシステムによって変更されます。読み取り専用です。

型 float型

○ 使い方
主に、UIにの大きさや並び等を計算で出したい場合に使用します。

Image img = GetComponent<Image>();
float w = img.preferredHeight;

preserveAspect

RectTransformによってImageの大きさが元々の画像のアスペクト比と変わってしまった場合に、RectTransformの値を無視してアスペクト比を保持するかどうかです。

型 bool型

○ 使い方
スプライトのアスペクト比を保ちたい場合に使用します。

Image img = GetComponent<Image>();
img.preserveAspect = ture;

sprite

このImageにセットされているスプライトです。

型 Sprite型

○ 使い方
スプライトを変更したい場合に使用します。

Image img = GetComponent<Image>();
Sprite s = Resources.Load<Sprite>("texture");
img.sprite = s;

type

イメージタイプを指定します。

詳しくはインスペクターの項目をご覧ください。

型 UI.Image.Type型

enum型です。

・Simple
・Sliced
・Tiled
・Filled

○ 使い方
画像の表示の仕方を変えたい場合などに使用します。

Image img = GetComponent<Image>();
img.type = Image.Type.Filled;

CalculateLayoutInputHorizontal

レイアウトシステムがminWidth、preferredWidth、flexibleWidthの照会をする前に呼び出します。

なし

戻り値(返り値)

なし

○ 使い方
レイアウトシステムが呼び出すので基本的に自分から呼び出す事はあまりないと思います。

Image img = GetComponent<Image>();
img.CalculateLayoutInputHorizontal();

CalculateLayoutInputVertical

レイアウトシステムがminHeight、preferredHeight、flexibleHeightの照会をする前に呼び出します。

なし

戻り値(返り値)

なし

○ 使い方
レイアウトシステムが呼び出すので基本的に自分から呼び出す事はあまりないと思います。

Image img = GetComponent<Image>();
img.CalculateLayoutInputVertical();

IsRaycastLocationValid

カメラとポイントを指定して、その場所でレイキャストを受け取れるかどうかを返します。

スクリーン座標 : Vector2型
レイキャストを送るカメラ : Camera型

戻り値(返り値)

レイキャストを受け取れるかどうか : bool型

○ 使い方
レイキャストを受け取れるか調べたい時などに使用します。

Image img = GetComponent<Image>();
if(img.IsRaycastLocationValid())
{
  Debug.Log("レイキャストを受け取れる");
}

OnAfterDeserialize

このクラスがデシリアライズされた後にこの関数が呼ばれます。

なし

戻り値(返り値)

なし

○ 使い方
主にImageを継承したクラスを作成する際、デシリアライズされた時の後処理を追加したい場合に使用します。

//Imageを継承している場合
public override void OnAfterDeserialize()
{
 base.OnAfterDeserialize();
 Debug.Log(“このクラスがデシリアライズされました”);
}

OnBeforeSerialize

このクラスがシリアライズされる前にこの関数が呼ばれます。

なし

戻り値(返り値)

なし

○ 使い方
主にImageを継承したクラスを作成する際、シリアライズされる前に処理を追加したい場合に使用します。

//Imageを継承している場合
public override void OnBeforeSerialize()
{
 base.OnBeforeSerialize();
 Debug.Log(“このクラスがシリアライズされます”);
}

SetNativeSize

Imageにセットされているスプライトの元々のピクセル数をRectTransformのwidthとheightに設定します。

なし

戻り値(返り値)

なし

○ 使い方
元々の画像のピクセル数に合わせた大きさにしたい場合に使用します。

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

Static変数などがよくわからない方は↓の記事を参考にしてみてください



タイトルとURLをコピーしました