[Unity] - 슬라이더 이미지 변경 및 색 채우기 (Slider)

구현 목표는 아래와 같습니다!

1. 별이 하나씩 생성되면서 슬라이더로 색 채우기

2. 만약 반개라면 반만 채우기

 

생성되는 것은 이전 글에서 설명해두었습니다

[Unity] - UI 이미지 부드럽게 회전하기(Quaternion.Slerp)

 

이전 글과 다른점은, 별이 회전하지 않고 생성되면서 색이 채워진다는 점입니다! 아래와같이 slider에 value를 변경해주면 채울 수 있습니다. 

 

먼저, 슬라이더를 생성해줍니다

 

동그란 부분은 Handle Slide Area로, 저 부분을 움직이면 동그라미 기준으로 왼쪽부분이 채워지는 기능인데, 현재 저에게는 필요없는 기능이라 제거하였습니다.

Fill 부분의 색을 변경하고, 크기를 조절하면 위와 같이됩니다.

제가 원하는 것은 별이 슬라이더 역할을 하는것이기 때문에, Background와 Fill을 별 그림으로 바꿔주었습니다.

Slider의 Anchor를 가운데로해주고,

Background와 Fill도 가운데로 해주었습니다! 크기는 대강 맞도록 조절하였습니다.

그리고 채워지는 방법이 여러가지가있는데, 

Sliced와 Simple은 위와같이 채워지고, 

Filled에 Fill method를 Horizontal로 하면 위와 같이 채워집니다.

 

만일 아래와 같이 Fill method를 Radial 360으로 하게된다면,

위와같이 채워집니다. 

 

제가 원하는것은 반 채워진 별이었으므로 Horizontal로 설정하고 코드를 작성하였습니다.

IEnumerator review_star()
{
    for (int i = 0; i < max_star; i++)
    {
        bool isfull = i < star_cnt; // 채워져야하는 별이면 true
        // 별 생성
        GameObject star = Instantiate(star_prefab, parent.transform);
        
        if (isfull){ // 채워져야한다면 노란색으로 변경
            var ishalf = 0f;
            var speed = 0.5f;
            if (i == star_cnt - 0.5) // 반개일 때는 value가 0.5여야함. 
            {
                ishalf = 0.5f;
                speed = 0.25f; // 조금 더 빠르게
            }
            Slider slider = star.transform.GetChild(0).GetComponent<Slider>();
            StartCoroutine(FillSlider(slider, 0f, 1f- ishalf, speed)); // 0.5초 동안 부드럽게 채우기
        }

            RectTransform rect = star.GetComponent<RectTransform>();
        if (rect != null)
            rect.anchoredPosition = new Vector2(0f, 0f); // 가운데로 anchor 바꾸기 

        yield return new WaitForSeconds(0.5f); // 별 간 생성 간격
    }
}

// 슬라이더로 채우는 코드
IEnumerator FillSlider(Slider slider, float startValue, float endValue, float duration)
{
    float time = 0f;
    while (time < duration)
    {
        time += Time.deltaTime;
        float t = time / duration;
        slider.value = Mathf.Lerp(startValue, endValue, t); // 부드럽게 도달하도록!
        yield return null;
    }
    slider.value = endValue; // 고정
}