エフェクト実習
教材一覧

Appearance

第09回 ゲージの表示と変化

2 / 4 現在値の入力と割合の更新 ​

このステップの目的

スクリプトへ値を渡し、ゲージの表示と計算結果を照合します。

割合の計算 ​

現在値が30、最大値が100なら、割合は30 / 100 = 0.3です。小数を求めるためにfloatで計算します。Mathf.Clamp01は0未満を0、1を超える値を1に収めます。最大値が0以下のときは割り算をせず、この例では空の表示にします。

ScriptsフォルダーにFillAmountGauge.csを作り、次の全文を記述します。

csharp
using UnityEngine;
using UnityEngine.UI;

public class FillAmountGauge : MonoBehaviour
{
    [SerializeField] private Image fillImage;

    public void SetValue(float current, float max)
    {
        float rate = max > 0f ? Mathf.Clamp01(current / max) : 0f;
        fillImage.fillAmount = rate;
    }
}

GaugeBackgroundへFill Amount Gaugeを追加し、Fill Imageへ子のFillImageを割り当てます。次に、同じフォルダーへGaugePreview.csを作ります。ゲームのHP管理に代わって、Inspectorの値を毎フレーム渡す確認用コンポーネントです。

csharp
using UnityEngine;

public class GaugePreview : MonoBehaviour
{
    [SerializeField] private FillAmountGauge gauge;
    [SerializeField] private float currentValue = 30f;
    [SerializeField] private float maxValue = 100f;

    private void Update()
    {
        gauge.SetValue(currentValue, maxValue);
    }
}

空のGameObjectをGaugePreviewとして作り、同名のコンポーネントを追加します。Gauge欄へGaugeBackgroundを割り当て、Playします。これでUpdate → SetValue → fillAmountの順に表示が更新されます。

数値と表示の比較 ​

Play中にGauge Previewの値を変更します。Fill Amountを直接編集すると次のフレームで上書きされるため、この比較ではCurrent Valueを操作してください。

Current ValueMax Value予想する割合
301000.3
601000.6
301000.3へ復元
150100上限で止まり1
300割り算せず0

確認後はPlayを終了します。編集モードのCurrent Value 30、Max Value 100を確認して保存します。次に45 / 150を予想して試し、同じ3割でも元の値は異なることを説明してください。比較後は再び30 / 100へ戻します。

基本課題の保存 ​

背景とFillImageを含むGaugeBackgroundをHorizontalGaugeとしてPrefabへ保存します。Sceneには呼び出し側のGaugePreviewも残します。この段階で基本課題は完成です。次の形・配置の変更は選択課題です。

チェックリスト
  • 30%・60%・30%を再現し、最大値0でも空の表示へ更新される。
  • 値を渡す側と、割合をImageへ反映する側を区別できる。
  • 値と表示の比較画像、用途、変更理由を説明できる。