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

component thumbnail

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

＜Imageとは＞

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

shaded-texture

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

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

Imageと関連性のある記事
UnityのUIを作ってみよう【UGUIの使い方基礎】
Unity初心者の方でも入りやすいように、UIの作成方法について解説しています。Canvasに始まり、Image,Text,Buttonについてそれぞれの説明を行っています。UGUIは今後よく使うと思うので理解を深めていきましょう。
dkrevel.com
2020.10.02
Unityのスプライトについて【Sprite】
Unityのスプライトについて詳細に解説しています。テクスチャタイプをSprite(2D and UI)に指定するとスプライトになり２Dグラフィックオブジェクトとなる為３Dでも扱えます。生成されるポリゴンの設定など様々な事を調整する事ができます。
dkrevel.com
2019.12.20
UnityのCanvas【使い方とスクリプト】
UnityのCanvasの使い方について詳しく解説しています。インスペクターの各種パラメータの詳細とスクリプトの使い方、また一緒にできるCanvas ScalerやGraphicRaycaster、EventSystemなどの解説もあるのでぜひご覧ください。
dkrevel.com
2019.12.20
UnityのRectTransform【使い方とスクリプト】
UnityのコンポーネントRectTransformについて解説しています。インスペクターでのパラメータの意味やスクリプトの使い方を詳細に紹介しています。RawEditModeと同じかどうかはパラメータによるので注意してください。
dkrevel.com
2019.12.20
スポンサーリンク

＜Imageのインスペクター＞

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

Source Image

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

Color

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

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

Material

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

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

Unityのマテリアルとシェーダー【初心者向け】
Unity初心者の方でもわかりやすいようにマテリアルについて解説しています。マテリアルは使用するシェーダーとそのパラメータを保持しています。これらを変更することによって物体の見え方を変えることができます。
dkrevel.com
2020.03.18

Raycast Target

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

Graphic Raycasterの解説は↓から

UnityのGraphic Raycaster【使い方とスクリプト】
UnityのGraphicRaycasterについて解説しています。これはキャンバスへレイキャストを行い、キャンバス上のどのUIにヒットしたのかを決定します。これはCanvasと一緒でなければ使用できません。
dkrevel.com
2019.12.20

Image Type

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

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

Simpleの場合

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

・Use Sprite Mesh

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

polygon-sprite

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

・Preserve Aspect

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

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

Slicedの場合

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

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

test-ui-size-change

９スライス無し

test-ui-border-image

９スライス有り(Silced)

・Fill Center

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

fill center

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

Tiledの場合

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

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

↓を元画像にした時

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

no 9 slice

９スライス無し

slice sprite

９スライス有り(Silced)

tiled sprite

９スライス有り(Tiled)

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

・Fill Center

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

fill center

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

Filledの場合

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

sprite filled

・Fill Method

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

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

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

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

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

Radial 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

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

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

また、この機能を有効にするにはスプライトの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・・・始点から９０度の角度で表示範囲が変わっていきます。

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

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

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

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

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

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

Unityのスプライトについて【Sprite】
Unityのスプライトについて詳細に解説しています。テクスチャタイプをSprite(2D and UI)に指定するとスプライトになり２Dグラフィックオブジェクトとなる為３Dでも扱えます。生成されるポリゴンの設定など様々な事を調整する事ができます。
dkrevel.com
2019.12.20

型　bool型

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

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

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の方に代入すれば良いので、元々のスプライトを保持したまま差し替えたい場合に使用します。

例えばボタンで、通常の状態と押し込んだ状態の２種類のスプライトを使用する場合などです。(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変数などがよくわからない方は↓の記事を参考にしてみてください

Unityスクリプトリファレンスの見方【C#用語解説】
Unityのスクリプトリファレンスを見ることはよくあると思います。しかしながら、まだプログラミングについて詳しくない状態だと何が書いてあるかよくわかりません。そんな時困らないように各種プログラミング用語についてまとめてみました。
dkrevel.com
2019.12.20
目　　次

スポンサーリンク
タイトルとURLをコピーしました