ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - UI:Image の使い方 -

初めに

 UI の一つである Image の使い方、Image コンポーネントについてまとめています。


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 では、位置、サイズなどを変更することができます。詳しくは、下のリンク先をご覧ください。

docs.unity3d.com

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 にチェックを入れると不透明な部分を判定するため、頂点数は跳ね上がります。そのため、処理コストが上がるようです。

 次のリンク先での説明が分かりやすかったため、ご紹介させていただきます。

tsubakit1.hateblo.jp

最後に

 Image の使い方をまとめました。Mask の使い方については、また後日。