Index
Image とは
Image とは Canvas 上に画像(Sprite のみ)を表示する機能です。
Image の作り方
Hierarchy 上で右クリック→UI→Image をクリックすることで、Imageを作ることができます。
Image の変更の仕方
Sprite を Image の Inspector にある Source Image にドラッグ&ドロップすると変更できます。
Image の設定の変更
Image を選択すると、Inspector からコンポーネントとして、Rect Transform と Image がついていることが分かります。
位置やサイズの変更(Rect Transform)
Rect Transform では、位置、サイズなどを変更することができます。詳しくは、下のリンク先をご覧ください。
Image コンポーネントの機能
Image のコンポーネントには、下の機能がついています。
プロパティ | 機能 |
---|---|
Source Image | 表示する Sprite を選択(前述) |
Color | 画像に適用する色を選択 |
Material | 画像をレンダリングするために使用する Material |
Raycast Target | Raycast のターゲットとして認識したい場合はチェックする |
Maskable | マスクを許可する場合はチェック |
Image Type | 4種類の Image Type を選択 |
Preserve Aspect | 縦横比を一定に保つ場合はチェック |
Use Sprite Mesh | 画像の不透明部分のみを描画したい場合はチェック |
いくつかピックアップして説明をします。
色の変更
Color をクリックすると、色を設定する画面が現れます。こちらから表示される画像の色を変更できます。また、α値(透明度)もこちらから変更できます。
Material の変更
Image の Sprite に Material をつけると次のように真っ黒になることがあります。
それは、Material を作ったとき、初期設定では Shader が Standard になっているためです。
Material には Shader という機能があり、これによって見え方を設定しています。今回は画像(Image, Sprite)に Material をつけるため、そのためのShader を選択しましょう。
Shader | 機能 |
---|---|
Default | 通常の表示のされ方をする |
Diffuse | 拡散反射、光を反射する |
Mask | 画像に対してマスクをかける |
Default は通常の Sprite です。Diffuse はライトを使いたい場合に使います。デフォルトの Sprite では光の影響を受けないため、光を反射することはありません。ライトの影響を受けさせたい場合は、Diffuse にしましょう。
マスクは画像を切り抜いて表現する処理方法です。マテリアルからの方法がよくわからなかったため、別の方法を後日、まとめます。
Raycast Target について
まず、Raycastについて説明します。
Ray とは光線を意味し、Unity では、シーン上の指定した地点から光線を飛ばし(cast:投射する)、光線上にあるコライダーの情報を取得するために用いられます。つまり、Raycast は光線を飛ばし、その光線にあたったかどうかを判定するために使うものになります。
Raycast Target は Ray に当たったかどうか判定したいものとそうではないものを区別するために使います。Ray が当たったことを認識したい場合はチェックをいれましょう。
Maskable について
Unity には、オブジェクトの見える範囲を制限する Mask(マスク)という機能があります。基本的な使い方として、子要素が親要素より大きい場合、親要素の外にはみ出た部分は切り取られ、表示されないようにできます。
Maskable にチェックを入れていると、マスクができる状態にあるいうことです。
(Maskable にチェックがある場合)
(Maskable にチェックがない場合)
Image Type について
Image Type は次の4種類があります。
Image Type | 機能 |
---|---|
Simple | Image 画像全体をそのまま表示 |
Sliced | 1つの画像を最大9個にスライスした画像として表示 |
Tiled | 描画範囲の余白に画像が繰り返し表示 |
Filled | Image の部分表示ができる |
Mask についての公式による説明
docs.unity3d.com
- Simple
画像全体をそのまま表示します。サイズや位置は Rect Transform から変更できます。
- Sliced
Sliced では真ん中をくりぬいたり、画像の真ん中だけサイズを変更したりするときに使います。
(使い方)
Sprite Editor から Sprite の Border(ボーダー、境界) を設定します。(Sprite Mode は Simple のまま)
緑色の線がボーダーです。
Image の Source Image に Sprite をドラッグ&ドロップすれば、下の動画のように真ん中(ボーダーで囲んだ領域)だけサイズを変更したり、くり抜いたりできます。
真ん中をくり抜く場合は、Fill Center のチェックを外してください。
- Tiled
Tiled では描画範囲の余白に Border で囲んだ部分が繰り返し表示されます。
Border の設定方法は Sliced で説明した通りです。先ほどの画像を Tiled にして表示させると次のようになります。
5の部分を Border で囲んだため、5が繰り返し表示されています。Tiled にも Fill Center がありますが、こちらの Sliced の場合と同様で真ん中を表示するか、くり抜くのか選択できます。
- Filled
Filled では画像の部分表示ができます。
機能 | |
---|---|
Fill Method | 塗りつぶす方法を設定 |
Fill Origin | 塗りつぶしの起点の選択 |
Fill Amount | 表示する割合 |
Clockwise | Fill Method で Radial のつくものを選択した場合のみ表示される。チェックを入れると時計回り、外すと反時計回りに表示領域が増える |
Use Sprite Mesh について
Mesh とは一般的にポリゴンの集合体のことを言います。3Dオブジェクトなどは、Mesh により表現されています。
Sprite についても切り出すときなど、Mesh がにより表現されていることが実感できます。基本的に Sprite は矩形(長方形)で切り出されるため、透過されている部分も一緒に描画しています。Use Sprite Mesh にチェックをいれることで、不透明な部分のみを描画することができます。
なお、チェックを入れない場合は Sprite を矩形で判定するため、頂点数は4つで済みますが、Use Sprite Mesh にチェックを入れると不透明な部分を判定するため、頂点数は跳ね上がります。そのため、処理コストが上がるようです。
次のリンク先での説明が分かりやすかったため、ご紹介させていただきます。
最後に
Image の使い方をまとめました。Mask の使い方については、また後日。