게임개발)체력 게이지 구현 아이디어

체력 게이지 구현 아이디어

체력의 게이지나 / 특정 횟수를 시각적으로 표현하기 위해서 생각한 간단한 아이디어를 구현하는 방식을 간단하게

포스팅한다.

롤의 체력 게이지도 비슷하다 전체적인 게이지 내에서 체력 100마다 한칸을 표시하는 형태로 처리된다.그래서 시간이 지나서 체력이 높아지면 체력 게이지가 좀 더 촘촘하게 표시가 된다.

이미지를 표현하고 싶은 만큼 포함하는 방법도 있지만

이미지의 크기나 사이즈나 여러가지 방법에서 비효율적이라고 판단해서

게이지의 이미지의 Width를 기준으로 구분이 되는 라인을 추가하는 방식으로 구현한다.

이미지 Width를 비례해서 추가적으로 Position, Anchor 처리하는 로직은 상황에 따라 다르다 참고하면 된다.

< Guage Script >

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

public class GaugeItem : MonoBehaviour
{
	[SerializeField]
	private Image gaugeImage = default;
	[Header("Line")]
	[SerializeField]
	private Transform rootLine = default;
	[SerializeField]
	private Image gagueLine = default;

	private List<Image> gagueList = new List<Image>();

	public void SetGagueValue(int _value)
	{
		if (gagueList.Count == 0)
			return;

		gaugeImage.gameObject.SetActive(true);
		gaugeImage.fillAmount = (_value / gagueList.Count);
	}

	public void SetGaugeLine(int _totalCount)
	{
		foreach (var item in gagueList)
		{
			item.gameObject.SetActive(false);
		}
		gagueList.Clear();

		gagueLine.gameObject.SetActive(false);
		int lineCount = _totalCount - 1;
		int offSetX = Mathf.FloorToInt(gaugeImage.GetComponent<RectTransform>().rect.width / _totalCount);

		for(int i=0;i < lineCount; i++)
		{
			var newLine =Instantiate(gagueLine, rootLine);
			var rectTransform = newLine.GetComponent<RectTransform>();
			rectTransform.anchorMin = new Vector2(0f, 0.5f); 
			rectTransform.anchorMax = new Vector2(0f, 0.5f);
			rectTransform.pivot = new Vector2(0.5f, 0.5f);

			rectTransform.localScale = Vector3.one;
			var position = new Vector3(offSetX * (i + 1), 0f, 0f);
			rectTransform.anchoredPosition = position;
			newLine.gameObject.SetActive(true);
			gagueList.Add(newLine);
		}
	}
}