[UGUI]_6. Slider

기록은 기억을 지배한다.·2023년 12월 1일

유니티 UI

목록 보기

6/9

Slider

슬라이더에 포함된 핸들을 좌우 또는 상하로 밀어서 값을 조절하는 상호작용 UI입니다.

게임 오브젝트

핸들 = 슬라이더에서 마우스로 잡고 움직일 수 있는 버튼.

인스펙터

Fill Rect :
핸들을 조작했을때 최소 값부터 현재 값까지 Slider를 채워주는 오브젝트 지정.
Fill Rect가 비어 있으면 Slider 값을 조작해도 Fill이 value만큼 채워지지 않는다.
Handle Rect :
핸들이 되는 오브젝트(Rect Transfrom) 지정.
Direction :
핸들이 되는 방향.(좌우,우좌,상하,하상)
Min,Max Value :
Slider의 Min,Max값.
Whole Numbers :
On 상태가 되면 Slider의 Value 값을 정수로만 설정 가능.
Min 0, Max 5 라고 하면 0,1,2,3,4,5의 값만 설정 가능.
Value :
Slider의 현재 값.
이 값은 lider를 터치해서 위치를 조작하면 바뀌게 되며,
현재 Slider의 값 정보가 필요하다면 Value에 접근해서 사용.
On Value Changed :
Value값이 변경될 때 호출되는 메소드 설정.
(Dynamic float에 대응되는 메소드와 속성을 설정하면 Value값이 자동으로 전달된다.)

OnValueChanged()를 이용한 Slider UI의 Value 값 활용

using UnityEngine.UI;

public class Slider_UI : MonoBehaviour
{
    [SerializeField]
    Slider slider;

    [SerializeField]
    TextMeshProUGUI text;		// *타입 주의 (UGUI까지 붙여야함)

    public void OnSliderEvent(float volume)
    {
        text.text = $"Volume {volume * 100:F1}%";
    }
}

작성한 스크립트를 Slider 컴포넌트에 부착, 연결해줍니다.

OnValueChanged 이벤트에 {Dynamic} OnSliderEvent를 등록합니다.

결과

스크립트를 이용해 OnValueChanged() 이벤트 등록

using UnityEngine.UI;

public class Slider_UI : MonoBehaviour
{
    [SerializeField]
    Slider          slider;

    [SerializeField]
    TextMeshProUGUI text;

    private void Awake()
    {
        slider.onValueChanged.AddListener(OnSliderEvent);	//콜백함수 등록
    }

    public void OnSliderEvent(float volume)
    {
        text.text = $"Volume {volume * 100:F1}%";
    }
}

위에서 등록했던 유니티 이벤트는 삭제 해주고 스크립트로
Awake 부분에 콜백함수를 등록합니다.

Slider UI의 Value값과 연동되는 이미지 알파값

using UnityEngine.UI;

public class Slider_UI : MonoBehaviour
{
    [SerializeField]
    Slider          slider;

    [SerializeField]
    SpriteRenderer spriteRenderer;

    [SerializeField]
    TextMeshProUGUI alpha;

    private void Awake()
    {
        slider.onValueChanged.AddListener(OnSliderEvent);
    }

    public void OnSliderEvent(float volume)
    {
        Color color = spriteRenderer.color;
        color.a = volume;
        spriteRenderer.color = color;

        alpha.text = $"Alpha {volume * 255:F1}%";
    }
}

Sprite Renderer 컴포넌트를 부착한 게임 오브젝트에 스프라이트 이미지를 등록하고
Slider에 연결해줍니다.

결과

플레이어 체력과 연동되는 Slider UI의 vlaue 값

HP 바로 사용할 Slider에서 핸들을 삭제 합니다.

HP바는 상호작용할 일이 없으므로 Interactable도 체크 해제합니다.

Fill 이미지를 빨간색으로 해주고 위치를 조정합니다.

테스트를 위해 플레이어를 공격할 버튼을 생성합니다.


using UnityEngine.UI;

public class Slider_UI : MonoBehaviour
{
    [SerializeField]
    private SpriteRenderer playerRenderer;
    [SerializeField]
    private TextMeshProUGUI textHP;             // 플레이어의 체력 텍스트 (현재체력/최대체력)
    [SerializeField]
    private Slider sliderHP;            // 플레이어의 체력 게이지
    [SerializeField]
    private Button buttonAttack;        // 공격 버튼

    private float maxHP = 100;      // 최대 체력
    private float currentHP;            // 현재 체력
    private float damage = 12;      // 공격력 (damage만큼 체력 감소)

    private void Awake()
    {
        currentHP = maxHP;
    }

    public void OnClickEventAttack()
    {
        if (currentHP > 0)
        {
            currentHP -= damage;
            currentHP = Mathf.Max(currentHP, 0);
            sliderHP.value = currentHP / maxHP;
            textHP.text = $"{currentHP}/{maxHP}";
            StartCoroutine("ColorAnimation");
        }

        if (currentHP <= 0)
        {
            buttonAttack.interactable = false;
        }
    }

    private IEnumerator ColorAnimation()
    {
        playerRenderer.color = Color.red;

        yield return new WaitForSeconds(0.1f);

        playerRenderer.color = Color.white;
    }
}