【Unity uGUI】Imageコンポーネントを徹底解説


Imageコンポーネント


この記事は uGUIシリーズ の2回目です。今回はuGUIの Image について解説します。

※使用しているUnityのバージョンは5.5.0f3です。

Imageコンポーネントのプロパティ


uGUIのImageオブジェクトはスプライト(2D画像)をUI表示するためのコンポーネントです。
デフォルトで以下のコンポーネント構成とプロパティを持ちます。
(UIオブジェクトは、Transformの代わりに Rect Transform を持ちます。)
WS000672

■Source Image

Souce Imageでは、シーンに表示したい画像のソースファイルを指定します。
指定できるファイルは、Texture Type が “Sprite (2D and UI)” のものに限られます。
試しに(.png)ファイルからSpriteを作成してみましょう。
1.適当な画像を用意して、プロジェクトにImportします。
WS000665

2.ImportしたファイルのTexture Typeを、Sprite(2D and UI)に変更します。
WS000666

3.SpriteにしたファイルはSouce Image で選択できるようになります。(D&Dでも可)
WS000668

4.選択したファイルがシーンに表示されます。
WS000669

■Color

Colorについては他のUIコンポーネントと共通で、画像の色と透明度を設定できます。
色は元の画像に上塗りする感じです。
WS000671WS000673

■Material

画像にマテリアルを適用できます。

■RayCast Target

Rayに当たるかどうかの設定です。
チェックを入ればクリックやタップをすることができます。
チェックを外すとRayはこのUIを突き抜けます。

■Image Type

Image Type は4種類あります。
WS000674

◆Simple

Image Type を Simple にすると、Image画像全体をそのまま表示します。
サイズを変更する場合は、Rect Transform の Width や Height から行います。

● Preserve Aspect
アスペクト比率を維持するかどうかの設定です。
例えばチェックを入れた状態で Height の値だけを増加させても画像のサイズは変わりません。
チェックを外すと縦に引っ張られたようになります。

チェック有り
WS000676

チェック無し
WS000677

◆Sliced

Image Type を Sliced にすると、1つのImage画像を最大9つにスライスした画像として表示します。
また、Fill Center の項目が追加されます。(後述)
WS000680

Sliced の設定を有効にするために、下図のように Sprite Editor で Border の設定をする必要があります。(緑線が Border )
WS000678

L:左 R:右 T:上 B:下 からのピクセル数でそれぞれ設定できます。
WS000679

● Fill Center
チェックを外すと Border で囲まれた領域の埋め込みがOFFになります。(要するに非表示)
WS000683

Sliced では、Border で囲われた領域(LRTB全てのBorderを設定した場合は中央の領域)が重要です。
画像サイズを変更した場合、Fillで切り抜かれる領域と同様にBorder内の領域だけが引き伸ばされます。
unity_ugui_image

◆Tiled

Image Type を Tiled にすると、描画範囲の余白に画像が繰り返し表示されます。
こちらも、繰り返し描画される部分は Border で囲った領域となります。
WS000684
↑アイコンは繰り返していないが、文字は上下左右に繰り返し描画されている。

● Fill Center
Slicedと同様です。

◆Filled

Image Type を Filled にすると、Imageの部分表示ができます。
WS000688

● Fill Method
塗りつぶしの方法を選択します。
WS000689

● Fill Origin
塗りつぶしの起点を選択します。
Fill Method によって選択肢が変わります。

● Fill Amount
表示する割合です。
1ですべて表示、0で非表示となります。

● Clockwise
Fill Methid で Radial 90、Radial 180、Radial 360 を選択した場合のみ表示されます。
チェックを入れると時計回りに表示領域が増えていき、外すと反時計回りになります。

■Set Native Size

このボタンを押すと、Width と Height が元画像サイズになります。

以上が、uGUIのImageコンポーネントのプロパティです。頑張って使いこなしましょう。
次回は Button についてです。

今月の新着記事

【合格体験記】Unity開発者認定試験に合格しました
【Unity認定試験対策】Unity 練習問題 10 – Rigidbody –
【Unityプログラミング力向上】C# 練習問題 7

記事一覧にもどる

  • このエントリーをはてなブックマークに追加

PAGE TOP