一分間Unity講座のアイキャッチ画像
一分間Unity講座のアイキャッチ画像

1分間 Unity講座 UIのImageを使ってライフゲージを作成する方法 - ファイブボックス

1分間 Unity講座 UIのImageを使ってライフゲージを作成する方法

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。

前回の記事で、UIのSliderを活用してライフゲージを作成する方法をご紹介しました。Sliderの場合、上下、左右から直線状に増減するライフゲージを作ることはできますが、Imageツールを活用すると、円形や扇型のゲージを作ることができます。

今回の記事では、Imageツールの活用についてご紹介します。

下の動画は「ファイブボックス 一分間Unity講座 UIのImageでライフゲージを作成する方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください。

素材作成

前回までの記事で作成た Canvas の配下に UI ⇒ Image でImageを配置します。

Canvas配下にImageを配置

Inspectorで各コンポーネントの値を修正します。サンプルでは以下のように修正しました。各自任意で調整してください。

  • 名前:HeartImage
  • RectTransformコンポーネント
    • PosY:-50 スライダー等と重ならないように
  • Imageコンポーネント
    • SouceImage 用意しておいたハートの画像を指定
Imageコンポーネントの各種設定

Imageコンポーネントでは次のプロパティを修正します。

ImageType

ImageType を変更することで、用途に合わせた使い方をすることができます。Imageコンポーネントには次のようなタイプが用意されています。

1. Simple

  • 用途: 一番基本的なタイプで、画像をそのまま表示します。特別な操作はなく、シンプルにそのままのサイズや比率で表示したい場合に使用します。
  • 特徴:
    • 画像のサイズはそのままか、UI要素に合わせて拡大縮小されます。
    • スプライト(画像)にパディングやスライスはないため、変形なしで描画されます。

2. Sliced

  • 用途: 9スライス(9分割)した画像を使用して、ボタンや背景のようにサイズが変わってもエッジ部分が歪まないように表示できます。ボタンやフレームなどに多く使われます。
  • 特徴:
    • スプライトのエッジ部分は固定サイズで表示され、中央部分だけが引き伸ばされます。
    • 画像がリサイズされても、エッジの部分がきれいに保たれます。
    • スプライトには「Border」が設定されている必要があります。

3. Tiled

  • 用途: 画像を繰り返してタイル状に敷き詰めるように表示するタイプです。特に背景として広い範囲を埋めたいときに使われます。
  • 特徴:
    • 画像が繰り返し描画され、指定された領域を埋めます。
    • 「Sliced」タイプと組み合わせて使うことも可能です。エッジ部分をスライスし、中央部分をタイルで埋めるといった使い方ができます。
    • スプライトを繰り返し表示するため、伸ばさずに自然に背景などを埋めたい場合に有効です。

4. Filled

  • 用途: ゲージのようなUIを作成するときに使います。円形のゲージや水平・垂直方向に徐々に満たされていくアニメーションなどに最適です。ライフゲージやロードバーのようなUIでよく利用されます。
  • 特徴:
    • 画像の一部分を表示する設定が可能で、徐々に埋まっていく動きを表現できます。
    • 「Fill Method」(Fill方式)によって、水平垂直放射状角度などでの表示が可能です。
    • スプライト全体を使って、0%から100%までの任意の割合を表示できます

今回は ImageTypeを「Filled」に指定して、ライフゲージとして活用してみます。

Fill Method

ImageType を「Filled」にした場合、その形状を次の項目から選択することができます。

  1. Horizontal(水平) X軸方向にゲージが増減します。 Fill Origin で Right を選択した場合、右側から増加、Left を選択した場合、左側からゲージが増加します。
  2. Vertical(垂直) Y軸方向にゲージが増減します。 Fill Origin で Bottom を選択した場合、下からゲージが増加、Topを選択した場合、上からゲージが増加します。
  3. Radial 90(90度扇形) 中心点を軸に円を描くようにゲージが増減します。 Fill Origin で BottomLeft、TopLeft、TopRight、BottomRight のいずれかの場所に中心を指定することができます。
  4. Radial 180(半円) 4つの辺の中心を軸に円を描くようにゲージが増減します。 Fill Origin で Top、Bottom、Right、Leftのいずれかの辺を指定、その辺の中心が円の中心になります。
  5. Radial 360(円) Imageの中心が円の中心になるようにゲージが増減します。 ゲージが増加するスタート地点をFill Origin の Top、Bottom、Right、Leftのいずれかから選択します。

なお、Ragialのいずれかを選択した場合、Clockwise プロパティで時計回りに増加するか、反時計回りに増加するかを選択することができます。

SampleではRadial 360 を指定、Fill Origin に top を指定、Clockwiseのチェックを外し、時計回りに値が減少(反時計回りに増加)するようにしました。

Imageのコントロール

前回まで完成していたスクリプトファイルを活用して動きを追加します。

まずは作成済みのスクリプトファイルをご確認ください。

public class SliderManager : MonoBehaviour
{
    Slider slider;      //Sliderコンポーネント型の変数を宣言
    Text sliderText;    //Text型の変数を宣言
    float maxHp = 10, hp;  //MaxHpとHp
}

void Start()
{     
    slider = transform.GetComponentInChildren<Slider>();  //Sliderを取得
    sliderText = transform.Find("SliderText").GetComponent<Text>(); //Textを取得
    hp = maxHp;                     //hpにmaxHPの値を指定
    slider.value = hp / maxHp;      //sliderの初期値を指定
}

public void SliderChange()
{
    sliderText.text = hp.ToString(); //SlideTextのtextを hpの値に
}    

void Update()
{
    if (Input.GetKeyDown(KeyCode.Space))    //Spaceキーが押されたら
    {
        hp--;                       //hpを1ずつ減少
        slider.value = hp / maxHp;  //slideの値を再計算し更新
    }
}

ここから今回のプログラムの追記です。

まずは Image型の変数を追加します。

Image heartImg;  //Image型の変数 heartImgを宣言 

Start関数heatImg の初期値を取得、値に初期値(1)を指定します。

void Start() 
{
	//追記
    //子要素のHeatImageを探してImageコンポーネントを取得
    heartImg = transform.Find("HeartImage").GetComponent<Image>();
    heartImg.fillAmount = hp / maxHp;  //heartImg の初期値を指定
}

Update関数でもheatImg の値を更新します。

void Update()
{
    if (Input.GetKeyDown(KeyCode.Space))    //Spaceキーが押されたら
    {
        hp--;                       //記述済み
        slider.value = hp / maxHp;  //記述済み
        heartImg.fillAmount = hp / maxHp;  //heartImg の初期値を指定
    }
}

 これでハートの中心を軸としたライフゲージの増減ができました。


ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

TOP