読者です 読者をやめる 読者になる 読者になる

神様は有給消化中です。

技術ネタを書こうかな。時事ネタとか私生活ネタはうけないし。

【Unity5】HPゲージを実装する最も簡単な方法!

UnityでHPゲージを実装する簡単レシピを共有。最終的にこんな感じになります。
f:id:appleorbit:20151020232320p:plain



(1)Canvas以下に空のGameObject(Bar)を追加
(2)Barの下に背景色用のGameObject(Background)を追加
(3)Barの下にゲージ用のGameObject(Gage)を追加
f:id:appleorbit:20151020232359p:plain

(4)それぞれの設定をを行います。
・Bar
画面上の置きたい位置に設定してください。スクリプト(後述)もBarにアタッチします。
f:id:appleorbit:20151020232521p:plain

・Gage
このオブジェクトの設定が重要。pivotの位置を左上(x=0, y=1)に設定してください。
これで、左から減っていくGageが作成できます。右から減らしたい場合はpivotの位置を右上にします。
見た目は好きな感じで。以下では色のみ設定していますが、テクスチャを貼ればどんな見た目にもできます。
f:id:appleorbit:20151020232552p:plain

・Background
Gageと同じ位置、同じ大きさに設定します。
f:id:appleorbit:20151020232537p:plain


(5)Barにアタッチするスクリプトを作成
スクリプトで、GageのRectTransform.deltaSize.xを変化させればGageを増減させることができます。
以下のサンプルでは、1フレーム毎に2%ずつゲージを減らしています。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class Hoge : MonoBehaviour 
{
	void Awake () {
		rt = transform.FindChild ("Gage").gameObject.GetComponent<RectTransform> ();
		maxValue = rt.sizeDelta.x;
		t = 1f;
	}

	private void UpdateValue(float t){
		float x = Mathf.Lerp (0f, maxValue, t);
		rt.sizeDelta = new Vector2 (x, rt.sizeDelta.y);
	}

	void Update () {
		t -= 0.02f;

		UpdateValue (t);

		if (t <= 0f) {
			t = 1f;
		}
	}

	private float t;
	private float maxValue;
	private RectTransform rt;
}

以上、お手軽HPゲージのレシピでした。