UnityのImageの使い方


Imageコンポーネント


みなさんこんにちは。SAK講師の下荒磯です。
uGUIシリーズ の2回目です。
前回の Textのつかいかた に引き続き、今回はuGUIの Image について解説します。
Imageコンポーネントは、画像ための便利なUIです。

さっそく、Imageコンポーネントの全てのプロパティについて見てきましょう。
※使用しているUnityのバージョンは5.5.0f3です。

プロパティ


uGUIのImageオブジェクトはスプライト(2D画像)をUI表示するためのコンポーネントです。
デフォルトで以下のコンポーネント構成とプロパティを持ちます。
(UIはCanvasオブジェクトの子要素に配置するため、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のつかいかた についてです。


あわせて読みたい
→ uGUIのつかいかたシリーズ一覧
← Unityの記事一覧にもどる

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

PAGE TOP