[Unity] 마우스 뗄 때 이벤트가 발생하는 슬라이더 만들기 / IPointerUpHandler

public class SliderController : MonoBehaviour
{
    public Slider slider;
    public Text text;
    
    private void Start()
    {
        slider.onValueChanged.AddListener(delegate { valueChanged(); });
    }

    private void valueChanged()
    {
        text.text = slider.value.ToString();
    }
}

 

간단하게 슬라이더의 value가 변경될때마다 이벤트를 발생시켜, 그 시점의 value를 보여주는 코드를 작성해보았다.

슬라이더의 노드를 이동시키면 실시간으로 그 결과값이 바뀌는 것을 확인할 수 있다.

 

 

이렇게 단순한 동작이라면 문제가 없지만, valueChanged 이벤트가 발생할때의 동작이 서버에 어떤 request를 보내는 것이라면?

한 번 수행하는데에 처리 시간이 오래 걸리거나 로드가 높은 경우, 이러한 동작은 앱에 큰 부하를 줄 수 있다.

 

---

 

여러가지 해결 방안이 있겠지만 이번 포스팅에서는 슬라이더에서 마우스를 뗄 때 이벤트가 발생하도록 해보았다.

 

public class SliderController : MonoBehaviour, IPointerUpHandler
{
    public Slider slider;
    public Text text;

    private void valueChanged()
    {
        text.text = slider.value.ToString();
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        valueChanged();
    }
}

 

유니티가 제공하는 인터페이스 중에서 IPointerUpHandler를 사용해보자.

해당 인터페이스는 OnPointerUp(PointerEventData eventData) 메소드를 포함하고 있고,

PointerEventData는 마우스 포인터와 관련된 이벤트 정보를 가지고 있다.

 

이전에는 슬라이더 자체에 이벤트를 등록시켜서, value가 변경될때마다 text 값을 바꾸는 이벤트가 트리거 된 반면

이번 예제에서는 마우스 포인터를 떼는 시점에 text 값을 바꾸는 함수가 호출되므로

text 값을 바꾸는 이벤트가 훨씬 적게 발생하게 되었다.

 

 

---

 

만약 슬라이더가 여러개인데 각각의 값을 조절했을때 호출되는 함수를 하나로 통일하고 싶은 경우,

아래와같이 OnPointerDown과 OnPointerUp을 적절히 활용해서 구현할수 있다.

 

OnPointerDown, 즉 마우스 클릭이 발생할때 어떤 슬라이더를 선택했는지 저장해두고

OnPointerUp, 즉 마우스를 뗄 때 해당 슬라이더의 value 값을 받아와서 필요한 동작을 수행하면 된다.

 

public class SliderController : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    public Text text;   
    private Slider selectedSlider;

    public void valueChanged()
    {
        text.text = selectedSlider.name + " " + selectedSlider.value.ToString();
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        selectedSlider = eventData.selectedObject.GetComponent<Slider>();
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        valueChanged();
    }
}

 

위의 코드 중 eventData.selectedObject에 주목하자.

마우스 클릭 관련 이벤트에서, 어떤 오브젝트가 선택되었는지에 대한 정보를 담고 있어서 유용하게 쓰인다.

해당 포스팅에서는 슬라이더를 위주로 작성했지만, 다른 오브젝트에도 다양하게 활용할 수 있을 것이다.