『Modern UI Pack』でアイコン式HP表現

ゼルダの伝説のような「ハートアイコンでのHP表現」が、皆大好き[MICHSKY] Modern UI Packで簡単に再現出来る。
アニメーションも付いているが、Animatorタブでの設定は要らず、コードのみで実装可能。

↓有料アセットなしで完全再現した記事は以下。

関連記事: 【Unity】ゼルダの伝説風HPシステムを完全再現

前提
見本動画
手順

前提

勿論、Modern UI Packを既に持っている事が前提。

良く半額セールをしているが、最近値上げしたので、今後のセール具合は不明です。
今から手に入れようという方は注意。

見本動画

手順

Heart Popの設定を変更してプレハブ化

ヒエラルキーで右クリック -> Modern UI Pack -> Animated Icon -> Heart Popを作成。
サイズを良い感じに変更。
Animated Icon Handlerコンポーネント、Buttonコンポーネントは必要ないのでデタッチ。
プレハブ化。

Canvasの準備

ヒエラルキーで右クリック -> Modern UI Pack -> Canvasを作成。
Canvas下に、空のゲームオブジェクトを作成、「HorizontalLayoutGroup」と命名。
Horizontal Layout Groupコンポーネントをアタッチ。
Content Size Fitterコンポーネントをアタッチ。
1. Horizontal Fit：Preferred Size
2. Vertical Fit：Preferred Size

色の指定

スクリプトによって管理されている為、プレハブのImage.Colorを変更しても変えられない。
管理スクリプトをデタッチするか、以下のようにシステムに則って設定。

Assets -> Modern UI Pack -> ResourcesのMUIP Managerをクリック。
インスペクターで、Animated Iconの項からColorを設定(適当に赤系に)。

管理するクラスを設定

任意のスクリプトを作成。
HeartPopプレハブの参照を紐付け。
「Canvasの準備」で用意した、「HorizontalLayoutGroup」の、Transformの参照を紐付け。
HeartPopプレハブをInstantiate、同時に親に「HorizontalLayoutGroup」を指定。
HeartPopのAnimatorをリストに追加。
現在のHPに応じてAnimatorを更新。

コード

【コード動作チェック済み(2021/03/26)】


using System.Collections.Generic;
using UnityEngine;


public class UIManager : MonoBehaviour
{

//インスペクターから、ハートアイコンのプレハブを紐付け。
	[SerializeField]
	GameObject heartPopPrefab;

//インスペクターから、LayoutGroupを紐付け。
	[SerializeField]
	Transform hpIconsLayoutGroupTf;


//初期のHP上限。
	int defaultHpMax = 3;

//現在のHP。
 	int hp = 3;

//初期化時に一時的に使用。
	Animator tempHeartPopAnim;
//HeatPopのAnimatorのリスト。
	List<Animator> heartPopAnimList = new List<Animator>();


	void Awake()
	{

		for (int i = 0; i < defaultHpMax; i++) {
			tempHeartPopAnim = Instantiate(heartPopPrefab, hpIconsLayoutGroupTf).GetComponent<Animator>();

//初期状態が「ハートが非表示な状態」なので、「ハートが表示された状態」に変更。
//Animatorタブから、初期状態をInに変えれば省略可能。            
			tempHeartPopAnim.Play("In");
			heartPopAnimList.Add(tempHeartPopAnim);
		}

	}


//HPの増減があった場合に呼ぶ。
//一応処理を分割している。
 	public void UpdatePlayerHpIcons()
	{

  		if (hp < 0)
  			hp = 0;

//HPを減らしていくだけならば、これのみで良い。
 		for (int i = heartPopAnimList.Count - 1; hp <= i; i--) {
			heartPopAnimList[i].Play("Out");
   		}

//HPを回復する場合は、こちらも要る。
   		for (int i = 0; i < hp; i++) {
  			heartPopAnimList[i].Play("In");
 		}

  	}

//1HPを回復する。
//テスト動画では、ボタンのリスナーに登録している。
	public void AddHp()
	{
		hp++;

 		if (defaultHpMax < hp)
 			hp = defaultHpMax; 

		UpdatePlayerHpIcons();
	}

//1HPを減らす。
//テスト動画では、ボタンのリスナーに登録している。
   	public void SubHp()
	{
		hp--;

		if (hp < 0)
    			hp = 0; 

    		UpdatePlayerHpIcons();
	}

}