チュートリアルから学ぶライフゲージの実装方法

概要

前回の記事のプロジェクトをベースにライフゲージのUIを追加します。
本記事はTanks!（対戦型の戦車ゲーム）の内容を一部抜粋し簡略化たものになります。

手順

プレイヤーの足元にライフゲージを表示する

1. HierarchyビューからSliderを追加する Create > UI > Slider
2. プレイヤーに追従させるためCanvasをLowMan(Player)配下に移動する

3. Canvasについて以下の変更を加える

   Canvasのサイズ変更を可能にする
   Inspector > Canvas Scaler(Script) > Render Mode > World Space に変更する

   Canvasの表示位置、サイズをPlayerの足元となるように変更する
   Inspector > Rect Transform > Position (0, 0.1, 0)に変更する
   Inspector > Rect Transform > WidthとHeightを2に変更する
   Inspector > Rect Transform > Rotation (90, 0, 0)に変更する

4. Sliderについて以下の変更を加える

   SliderをCanvas全体に引き伸ばして表示する
   HierarchyビューでSliderと配下のBackground、Fill Area、Fillを同時に選択した状態でAnchorを変更する
   Inspector > Anchor Presets > Altキーを押下しながら右下のstretchを選択する

   Sliderのつまみ部分のUIを削除する
   HierarchyビューからHandle Slide Areaを削除する

   ユーザー操作による変更を無効にする
   Inspector > Slider(Script) > Intractable のチェックボックスを外す
   Inspector > Slider(Script) > Transition Noneに変更する

   最大値を設定する
   Inspector > Slider(Script) > Max Value を100に変更する

   初期値を設定する
   Inspector > Slider(Script) > Value を100に変更する

   Sliderの色を任意の色に変更する
   Slider配下のFillを選択した状態で
   Inspector > Image(Script) > Color を任意の色に変更する

   ダメージを受けた場合にSliderの値をスクリプトから減算する
   後述するLifeGaugeController.csを作成しSliderにアタッチする

ライフゲージを円形表示に変更する

1. Wheel.pngをローカルに保存する
   
2. Projectビュー > Sprites フォルダを生成
3. Spritesフォルダを選択した状態で右クリックしImport New Assets...を選択しWheel.pngをImportする
4. Wheelについて以下の変更を加える

Inspector > Texture type > Sprite(2D and UI) に変更する
Unapplied import settingsダイアログが表示されるのでApplyを選択する

ソースコード

Player.cs

public class Player : MonoBehaviour
{
    // 変更がない箇所は省略

    LifeGaugeController m_Life;

    void Awake ()
    {
        m_Life = GetComponentInChildren<LifeGaugeController>();
    }

    public void TakeDamage (int damage)
    {
        // ライフゲージに反映
        m_Life.OnGaugeUpdate(hp);
    }
}

LifeGaugeController.cs

public class LifeGaugeController : MonoBehaviour {

    private Slider m_Slider;                // 現在のライフを示すスライダー
    private Quaternion m_RelativeRotation;  // シーンの開始時のローカル空間のローテーション

    private void Awake()
    {
        m_Slider = GetComponent<Slider>();
    }

    private void Start()
    {
        m_RelativeRotation = transform.parent.localRotation;
    }

    private void Update()
    {   
        // スライダーがプレイヤーの方向に追従して回転してしまうのを防ぐため
        // 初期値を設定し直す
        transform.rotation = m_RelativeRotation;
    }

    public void OnGaugeUpdate(float life)
    {
        m_Slider.value = life;
    }
}

まとめ

ソースコードはGitHubにアップロードしています。