【Unity】HPゲージの簡単な実装方法

今回は、簡単にできるHPゲージの実装方法についてご紹介します。

結論から申し上げると、画像のFillAmount値を変更できるようにスクリプトを作っただけなので、記事読むのめんどくさい人は、各自ググってください。

「unity HPゲージ実装」

というキーワードでGoogle検索すると、相当いろいろな記事が目につくと思いますが、、、

大きく分けて四つの方法があるみたいです。

①単純にマスク処理をかけて、画像をスライドさせた簡易版HPバー

②uGUIスライダーを利用した汎用性の低いHPバー

③ガチめにつくったunityチュートリアルのHPバー

④今回紹介するFillAmount値をいじったHPバー

最初にガチめのやつ、unityチュートリアルのHPゲージ実装動画を軽く紹介します。

【https://www.youtube.com/watch?v=NgftVg3idB4】(1時間ほどの動画)

内容をかいつまんで説明すると

①

HPゲージ実装用の画像を用意します。

これは適当でいいです。色をつなくても大丈夫というか、unityで使うテクスチャは、基本白ベースがいいと思います。color値は、スクリプトで指定したほうが楽なので。

②

何らかの方法で、ビジュアルHPと、ベースの背景HPにマスク処理をかけます。

(unityチュートリアル内では、謎の特殊機能によって、チェックボックスをアクティブにしただけでマスク処理がかかってますが、普通は出来ません。オブジェクトの親子関係を作ったあと、専用のスクリプトで指示を与えないとマスク処理はかからないです。)

③

ゲーム内のダメージ指数

HPゲージの長さを定数化した数値

HPゲージのtransform値

HPゲージのRect transform値

HPゲージのcolor値

などなど・・・

これら全ての数値同士を歯車のように噛み合わせるため、全ての変数を使った計算式を立てます。

んで、結局必要なスクリプト量がこれ。

(田近くん、書き出すのめんどうなのでホームページのスクリプト借りるね。すまんぬ。また今度焼肉いこう。)

using UnityEngine; using System.Collections; using UnityEngine.UI; public class DamageAndHealExample : MonoBehaviour { public RectTransform Health; public float posY; public float MaxposX; public float MinposX; public int currentHealth; public int MaxHealth; private bool onCD=false; public float coolDown; public Text healthText; public Image visualHealth; float currentXValue; private int CurrentHealth{ get{ return currentHealth; } set{ currentHealth=value; HandleHealth(); } }

// Use this for initialization void Start () { posY = Health.position.y; MaxposX = Health.position.x; MinposX = Health.position.x - Health.rect.width*3; currentHealth = MaxHealth; onCD = false; Debug.Log ("posY:"+posY+"MaxposX:"+MaxposX+""); Debug.Log ("posY:"+posY); Debug.Log ("MinposY:"+MinposX); Debug.Log ("currentHealth:"+currentHealth); } // Update is called once per frame void Update () { } void OnTriggerStay(Collider other){ if(other.gameObject.name=="DamageArea"){ if( currentXValue>MinposX){ StartCoroutine(CoolDownDmg()); CurrentHealth-=1; } } if(other.gameObject.name=="HealArea"){ if( currentXValue<MaxposX){ StartCoroutine(CoolDownDmg()); CurrentHealth+=1; } } } private void HandleHealth(){

healthText.text = "Health:" + currentHealth; currentXValue = MapValues (currentHealth, 0, MaxHealth, MinposX, MaxposX); Debug.Log (currentXValue); Health.position = new Vector3 (currentXValue,posY); if (currentHealth > MaxHealth / 2) { visualHealth.color=new Color32((byte)MapValues(currentHealth,MaxHealth/2,MaxHealth,255,0),255,0,255); //Debug.Log ("Map:"+MapValues(currentHealth,MaxHealth/2,MaxHealth,255,0)); //Debug.Log (">:"+visualHealth.color); } else { visualHealth.color=new Color32(255,(byte)MapValues(currentHealth,0,MaxHealth/2,0,255),0,255); Debug.Log ("Map:"+MapValues(currentHealth,MaxHealth/2,MaxHealth,255,0)); Debug.Log (">:"+visualHealth.color); } } IEnumerator CoolDownDmg(){ onCD = true; yield return new WaitForSeconds (coolDown); onCD = false; } private float MapValues(float x,float inMin,float inMax,float outMin,float outMax){ return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; }

}

まぁ、いきなりこれをそもそもHPゲージを実装したいどうのこうの言ってる初心者が理解するのは難しいと思います。かくいうぼくも独学でまだプログラミング歴2ヶ月ほどですが。

でも結局、必要な要件って何かというと

①ゲーム内のダメージ指数の量に比例して、ゲージの長さを変えたい

②ゲージの長さによって、ゲージの色を変えたい

これだけなんですよね。チュートリアルのスクリプトで再現できることを100%とすると、80%くらいの再現度で実装することが出来ました。

んで、ぼくが書いたスクリプトがこれ。

using UnityEngine; using System.Collections; using UnityEngine.UI; public class HealthControl : MonoBehaviour { public GameObject HPgauge; PlayerControl playerControl; private float fillAmount; public Image visualHealth; public Text healthText;

void Update () { if (IsPlaying () == true) { player = GameObject.Find ("Player(Clone)"); playerControl = player.GetComponent<PlayerControl> (); healthText.text = "Health:" + playerControl.currentHP; visualHealth.fillAmount = fillAmount; fillAmount = playerControl.currentHP / playerControl.HP; //Debug.Log (visualHealth.fillAmount); } if(fillAmount >= 0.6f){ visualHealth.color = new Color(0,255,0,255); } if(fillAmount < 0.6f & fillAmount >= 0.3f){ visualHealth.color = new Color(125,125,0,255); } if(fillAmount < 0.3f & fillAmount >= 0){ visualHealth.color = new Color(255,0,0,255); } //visualHealth.fillAmount = 0.5f; }