Unity UIの基本⑤｜Imageの使い方とHPゲージ・円形ゲージの作り方、徹底解説
UnityのUIでは、文字やボタンだけでなく、画像を表示する場面も多くあります。
たとえば、次のようなUIです。
・キャラクターやアイテムのアイコン
・メニュー画面の背景
・ボタンの背景画像
・HPやスタミナのゲージ
・クールタイムを表す円形ゲージ
これらの表示に使われる基本的なUIパーツが、Image です。
以前の記事では、メニュー画面などの土台として使われるPanelについて確認しました。
Panel にもImageコンポーネントが付いていますが、今回はImageを単独で作成し、画像の設定方法や表示方法を詳しく確認していきます。
さらに、Image TypeのFilledを使って、横方向のゲージや円形・扇形のゲージを作成します。
Imageとは
Imageは、Canvasの中に画像を表示するためのUIパーツです。
HierarchyウィンドウでCanvasを右クリックし、次の順番で選択します。
UI → Image
Canvasの子オブジェクトとしてImageが作成されます。
作成されたImageには、主に次のコンポーネントが付いています。
・Rect Transform
・Canvas Renderer
・Image
Rect Transform は、UIの位置や大きさを管理します。
Canvas Renderer は、Canvas上にUIを描画するためのコンポーネントです。基本的には直接設定を変更する必要はありません。
画像の内容や色、表示方法などは、Imageコンポーネントで設定します。
Imageコンポーネントの設定
Source Imageに画像を設定する
ImageコンポーネントのSource Imageには、表示したい画像を設定します。Projectウィンドウから画像をドラッグして、Source Imageに設定します。
ただし、通常のTextureとして読み込まれている画像は、そのままではSource Imageに設定できない場合があります。
その場合は、Projectウィンドウで画像を選択し、InspectorウィンドウのTexture Typeを次のように変更します。
Sprite（2D and UI）
変更したら、Inspector下部のApplyを押します。
これで、画像をUIのSource Imageとして使用できるようになります。
Set Native Sizeで元画像の大きさに
画像をSource Imageに設定しても、Imageオブジェクトの大きさによっては、画像が引き伸ばされたり、または縮小されて表示されることがあります。
元画像のサイズに合わせたい場合は、Imageコンポーネントの Set Native Size を押します。
Set Native Size を押すと、Rect Transform の Width と Height が、画像の元サイズに合わせて変更されます。
ただし、大きな画像を使っている場合は、UIも非常に大きくなることがあります。
Set Native Sizeは、必ず使う設定ではありません。
元画像の大きさを確認したいときや、画像を基準のサイズに戻したいときに使う機能です。
Colorで色と透明度を変更する
ImageコンポーネントのColorでは、画像の色を変更できます。
白を設定している場合は、元画像の色がそのまま表示されます。
赤や青などを設定すると、元画像にその色が掛け合わされます。
Colorを開くと、下部にAという値があります。
Aは Alpha の略で、画像の透明度を表します。
・Aが最大：完全に表示される
・Aが0：完全に透明になる
たとえば、画面全体に黒いImageを配置して透明度を下げると、画面を少し暗くすることができます。
ゲームオーバー画面やポーズ画面の背景などでよく使われる方法です。
Preserve Aspectで縦横比を保つ
Imageオブジェクトの Width と Height を変更すると、元画像の縦横比が崩れることがあります。
そのような場合は、Imageコンポーネントの Preserve Aspect にチェックを入れます。
Preserve Aspectを有効にすると、Rect Transformの範囲内で、元画像の縦横比を保ったまま表示されます。
キャラクターの顔画像やアイテムのアイコンなど、画像を変形させたくない場合に便利です。
ただし、Rect Transform全体を画像で埋めるのではなく、縦横比に合わせて余白ができることがあります。
Raycast Targetとは
Imageコンポーネントには、Raycast Targetという項目があります。
Raycast Targetが有効になっているImageは、マウスクリックやタッチ操作の判定対象になります。
たとえば、透明なImageがボタンの上に重なっていると、Imageがクリックを受け止めてしまい、下にあるボタンを押せなくなることがあります。
クリック判定が必要ない背景画像や装飾画像では、Raycast Targetを無効にしておくと、意図しない操作の妨げを防げます。
ただし、Image自体をクリック対象として使用する場合は有効にしておきます。
Image Typeの違い
Imageコンポーネントには、画像の表示方法を決めるImage Typeがあります。
Image Typeには、主に次の4種類があります。
・Simple
・Sliced
・Tiled
・Filled
それぞれの違いを確認していきます。UnityのuGUIでは、この4種類がImageの基本的な表示方式として用意されています。
Simple｜画像をそのまま表示する
Simpleは、画像全体をそのまま表示する基本的な方法です。
通常、Imageを作成したときはSimpleが選択されています。
Rect Transformの大きさを変更すると、その大きさに合わせて画像も拡大・縮小されます。
次のような用途に向いています。
・アイコン
・キャラクター画像
・背景画像
・装飾画像
・画面を暗くする半透明画像
Preserve Aspect を有効にできるのも、Simpleの特徴です。
Sliced｜枠を崩さずに拡大する
Slicedは、画像を9つの領域に分けて表示する方法です。
これは一般的に、9スライスと呼ばれます。
Sliced を使うと四隅の形を保ちながら、辺と中央部分を伸ばすことで、枠線を崩さずに画像の大きさを変更できます。
Slicedを使うには、Image Type を Sliced に変更するだけではなく、元画像にBorderを設定する必要があります。
Borderとは、画像のどこを四隅・辺・中央として扱うかを決める境界線です。
まず、Projectウィンドウで元画像を選択し、Inspectorで次の設定を確認します。
・Texture Type：Sprite（2D and UI）
・Sprite Mode：Single
設定を変更した場合は、Applyを押します。
続いて、InspectorのSprite Editorを開きます。
Sprite Editorでは、画像の上下左右に緑色のBorder線を設定できます。
今回のような枠付き画像では、Border線を枠の内側に合わせます。
たとえば黒板の画像であれば、次のように考えます。
・四隅：木枠の角を含める
・上下の辺：上側と下側の木枠を含める
・左右の辺：左側と右側の木枠を含める
・中央：緑色の黒板部分だけにする
つまり、緑色の中央部分を囲むようにBorderを設定します。
Borderは、画面上の緑色の線をドラッグして設定できます。また、右下に表示されるBorderの数値を直接入力することもできます。
残したい角や枠線がBorderの外側に入り、伸ばしたい中央部分が内側に入るように設定すします。
設定が終わったら、Sprite Editor右上のApplyを押します。
その後、Canvas内のImageを選択し、Image TypeをSlicedに設定し、画像を次のような9つの領域に分割して考えます。
・四隅
・上下左右の辺
・中央
Slicedは、次のようなUIに向いています。
・ウィンドウ
・メッセージボックス
・ボタンの背景
・枠付きのパネル
・ゲージの背景
Tiled｜画像を繰り返して並べる
Tiledは、画像を引き伸ばすのではなく、繰り返し並べて表示する方法です。
次のような模様を表示するときに便利です。
・レンガ模様
・木目
・布や紙の模様
・繰り返し模様の背景
・装飾されたゲージ
画像を拡大しても模様自体が引き伸ばされないため、細かな模様を保ったまま広い範囲に表示できます。
Slicedが中央部分を引き伸ばすのに対し、Tiledは対象部分を繰り返して表示します。
Filled｜画像の一部分だけを表示する
Filledは、画像全体ではなく、指定した割合だけを表示する方法です。
たとえば、Fill Amountを半分にすると、画像の50％だけが表示されます。
この機能を使うと、次のようなUIを作成できます。
・HPゲージ
・経験値ゲージ
・残り時間の表示
・クールタイムゲージ
・円形や扇形のゲージ
Filledでは、主に次の項目を設定します。
・Fill Method
・Fill Origin
・Fill Amount
・Clockwise
Fill Amountは、0から1の範囲で表示量を設定します。
・0：何も表示しない
・0.5：半分表示する
・1：すべて表示する
Filledでは、Fill Amountによって画像の表示割合を制御します。
Filled の活用事例
1,横方向のHPゲージを作る
ここからは、Filledを使って簡単なHPゲージを作成します。
1．ゲージの背景を作る
Canvasの中にImageを作成し、次のように設定します。
名前：HPGaugeBackground
大きさ：横長の形状（例 500 × 100）
Color：黒や暗いグレーなどを設定
2．ゲージ本体を作る
HPGaugeBackground を右クリックし、子オブジェクトとしてImageを作成します。
名前：HPGaugeFill
大きさ：背景と同じ（例 500 × 100）
Color：赤や緑など、HPを表す色
原稿のHierarchyの構成は以下の通りです。
3．Image TypeをFilledにする
HPGaugeFillのImageコンポーネントを、次のように設定します。
・Image Type：Filled
・Fill Method：Horizontal
・Fill Origin：Left
・Fill Amount：1
これで、左から右へ伸びる横方向のゲージになります。
例えば Fill Amount を0.5にすると、ゲージが半分になります。
Fill OriginをRightにすると、右側から減少するゲージになります。
2,縦方向のゲージを作る
縦方向のゲージを作る場合は、Fill MethodをVerticalにします。
設定例は次のとおりです。
・Image Type：Filled
・Fill Method：Vertical
・Fill Origin：Bottom
・Fill Amount：0.5
これで、下から上に伸びるゲージになります。
次のような表示に使えます。
・温度計
・酸素ゲージ
・ジャンプ力のチャージ
・水や燃料の残量
・縦型のスタミナ表示
Fill OriginをTopにすると、上から下に減少する表示になります。
3,円形ゲージを作る
Filledでは、横方向や縦方向だけでなく、円形のゲージも作れます。
円形ゲージには、円形のSpriteを使用します。
【画像：円形ゲージ用のSprite】
Imageコンポーネントを次のように設定します。
・Image Type：Filled
・Fill Method：Radial 360
・Fill Origin：Top
・Fill Amount：0.75
・Clockwise：ON
これで、円を一周するように表示量が変化します。
Clockwiseを有効にすると時計回りに進み、無効にすると反時計回りに進みます。
円形ゲージは、次のような表示に向いています。
・スキルのクールタイム
・制限時間
・アイテムの使用待ち時間
・チャージ量
・ゲームの読み込み状況
Radial 90・180・360の違い
円形のFill Methodには、主に次の種類があります。
Radial 90
90度の範囲を使って表示します。
円の4分の1にあたる扇形のゲージを作れます。
Radial 180
180度の範囲を使って表示します。
半円型のゲージを作れます。
速度計やメーターのようなUIに使えます。
Radial 360
360度の範囲を使って表示します。
円全体を使ったゲージを作れます。
タイマーやクールタイムの表示に向いています。
スクリプトからFill Amountを変更する
Fill Amountは、スクリプトから変更できます。
今回は、HPの現在値に合わせてゲージを変更する簡単なスクリプトを作成します。
using UnityEngine;
using UnityEngine.UI;
public class HPGauge : MonoBehaviour
{
[SerializeField] Image hpGaugeImage;
[SerializeField] float maxHP = 100f;
float currentHP;
void Start()
{
currentHP = maxHP; // 初期HPを最大HPに設定
}
void Update()
{
// HPゲージの表示を更新
hpGaugeImage.fillAmount = currentHP / maxHP;
}
}このスクリプトを空のGameObjectなどに追加します。
Inspectorの Hp Gauge Imageに、HPGaugeFill を設定します。
currentHP / maxHPを計算すると、現在のHPが0から1の範囲に変換されます。
キー入力でHPを減らして確認する
動作確認用として、Update関数内にスペースキーを押すとHPが減る処理を追加してみます。
void Update()
{
if (Input.GetKeyDown(KeyCode.Space)) // スペースキーを押すと
{
currentHP -= 10f; // HPを10減らす
// HPが0未満にならないように制限
currentHP = Mathf.Clamp(currentHP, 0f, maxHP);
}
// HPゲージの表示を更新(記述済みコード）
hpGaugeImage.fillAmount = currentHP / maxHP;
}ゲームを実行してスペースキーを押すと、HPが10ずつ減り、円形の形状も変わっていくのが確認できます。
Mathf.Clamp を使うことで、currentHPが0より小さくなったり、maxHPより大きくなったりしないようにしています。
Imageで作るゲージとSliderの違い
Unityには、ゲージに似たUIとしてSliderもあります。
ImageのFilledとSliderは、どちらも値をゲージとして表示できますが、目的が少し異なります。
ImageのFilledが向いている場面
・HPを表示する
・クールタイムを表示する
・残り時間を表示する
・プレイヤーが直接操作しない
・円形や扇形のゲージを作りたい
ImageのFilledは、基本的に値を見せるための表示に向いています。
Sliderが向いている場面
・音量を変更する
・画面の明るさを変更する
・難易度や速度を選択する
・マウスや指でつまみを動かす
・最小値と最大値を設定したい
Sliderは、ユーザーがドラッグ操作によって数値を選択するためのUIです。最小値、最大値、現在値の管理や、値が変更されたときのイベントも用意されています。
HPバーのように表示だけを行う場合はImageのFilled、音量設定のようにユーザーが値を操作する場合はSlider、と考えると分かりやすいでしょう。
今回のまとめ
今回は、UnityのUIパーツの一つであるImageについて確認しました。
Imageは、単に画像を表示するだけのUIではありません。
Image TypeやFill Amountを使うことで、HPバー、タイマー、クールタイム、画面演出など、さまざまなUIを作ることができます。
特にFilledは、ゲームらしいUIを作るうえで利用する機会が多い機能です。
まずはInspectorでFill Amountを動かし、画像がどのように変化するか確認してみましょう。
次回予告
次回は、UnityのUIパーツの中から、Buttonについて解説します。
Buttonは、クリックやタップによって処理を実行するためのUIです。
Buttonの作成方法、On Clickへの処理の登録、通常時・選択時・押されたときの見た目を変更するTransitionについて確認します。
さらに、スクリプトからButtonを有効・無効にする方法や、クリック処理を登録する方法も解説します。
▼ Unity初心者向け記事まとめはこちら
こちらのマガジン「ミニゲーム作成講座 全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。
さらにステップアップの「スマホで遊ぶジャンプゲーム 8回セット」のマガジンもぜひご活用ください。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。
いいなと思ったら応援しよう！
よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！