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

概要

前回の記事のプロジェクトをベースにライフゲージの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)に変更する

1. 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をローカルに保存する
   

1. Projectビュー > Sprites フォルダを生成 1. Spritesフォルダを選択した状態で右クリックしImport New Assets...を選択しWheel.pngをImportする 1. 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にアップロードしています。