Unity Image를 이용해 HP 만들기.

Unity Image를 이용해 HP 만들기.

안녕하세요.

이번에는 Image를 이용해 HP를 만드는 방법입니다.

HP나 스킬의 쿨타임 등을 표시할때 유용합니다.

이 글은 이전에 작성한 Slider를 이용한 방법과 비슷하고 다른점이라면 이미지를 이용한 것입니다.

• UI구성.
• 실행결과.

*이전글은 이 글의 하단을 보면 확인할 수 있습니다.

UI구성.

이전글과 거의 동일한 글이므로 Image부분만 간단하게 작성하겠습니다.

캔버스에 아래 사진처럼 생긴 UI Image를 생성해주었습니다.

Image-> Source Image를 선택하고 Image Type을 Filled로 선택합니다.

HP처럼 보이기 위해 Fill Method는 Horizontal로 선택하고 빨간색을 선택합니다.

아래 화살표를 표시해놓은 것처럼 보입니다.

이전에 사용한 코드를 재탕하겠습니다.

HPScript의 HP변수 값을 수정하고 버튼을 누르면 변수의 값을 슬라이더와 Image Fill에 반영해주는 간단한 코드입니다.

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

public class HPScript : MonoBehaviour
{
    [Range(0, 1)] public float HP=0;
    private Slider slider;
    public Image otherImage;
    private void Start()
    {
        slider =gameObject.GetComponent<Slider>();
        otherImage = GameObject.Find("ImageHP").GetComponent<Image>();
    }
    public void SetHp()
    {
        slider.value = HP;
        otherImage.fillAmount = HP;
    }
}
/*
 * FileNmae=HpScrip.cs
 * this is Slider UI test Script**/

실행결과.

현재 Fill Amount=1

HP변수 0.5로 설정 후 버튼 클릭.

Fill Amoun=0.5

https://docs.unity3d.com/2019.1/Documentation/ScriptReference/UI.Image-fillAmount.html

[프로그래밍/유니티] - 유니티 슬라이더를 이용해 Hp UI구현

유니티 슬라이더를 이용해 Hp UI구현