[Unity] Slider 커스텀 | Silder Fill Area 딱 맞게 조절하기(채우기) | Handle 조절 | Handle 직접 조작 못하게

Unity를 하다보면 Slider UI를 만들게 됩니다.

 

핸들? 너무 크고 못생겼어. 없애도 되나?
핸들 없앴더니 왜 Fill Area가 가득 안차지?
Slider 커스텀 하고싶은데 어떻게 하지?

 

초반에 이런 고민을 정말 많이 했습니다. 그래서 제가 고민하고 결국 해결된 것들에 대해서 설명해보겠습니다.

 

1. Slider 커스텀

Slider UI를 생성했다면, 위와 같이 Background, Fill Area, Handle Slide Area가 생성 될 것입니다.

 

Background는 슬라이드 뒷 배경입니다. Fill Area가 줄어들면서 보이는 영역이죠.

Fill Area는 채워지는 부분입니다.

Handle Slide Area는 슬라이드를 조절 할 수 있는 핸들이 부착되어 있습니다. 핸들은 유니티를 실행하면 Game 영역에서 마우스로 슬라이드가 가능합니다. 물론 슬라이드가 불가능 하도록 하고싶다면 Slider 컴포넌트를 수정하면 되겠죠?!

 

Slider의 인스펙터 창을 보면 Slider라는 컴포넌트가 부착되어 있습니다.

 

제일 아래 Value에서 핸들을 잡고 좌우로 움직여주면 슬라이드 fill 영역이 채워지고 줄어드는 모습이 보입니다.

이걸 통해서 슬라이드 fill 영역을 조절하는 겁니다.

 

이제 Slider 커스텀을 해보겠습니다.

Backgorund의 인스펙터 창을 보면 image컴포넌트가 있습니다.

soucre 이미지를 변경하면 우리가 적용한 이미지가 슬라이더 배경에 적용되는 모습을 확인할 수 있습니다.

 

적용하는 방법은 우측 동그라미 두개를 클릭해서 목록에서 찾아도 되고, 프로젝트 창에서 직접 드래그 앤 드롭 해줘도 됩니다.

 

저는 저희 디자이너가 만들어준 UI를 선택해봤습니다.

왼쪽이 기본 background, 오른쪽이 imgae source를 변경해주는 background입니다.

 

background 이미지를 변경하는 방법을 알았으니 다른 부분도 어떻게 변경해야 하는지 알겠죠?

변경하고 싶은 오브젝트의 imgae 컴포넌트를 찾아 image source를 변경하면 됩니다!

 

2. Fill Area 딱 맞게 조절하기

handle을 삭제하고 slider의 value를 1(최대)로 변경하면 우측에 빈 공간이 생기는 경우가 있습니다.

 

해당 부분은 Handle이 사라지면서 빈 공간이 노출된 것입니다. 해결하는 방법은 두가지가 있습니다.

 

1. Rect tool로 직접 수정

글로 설명하기 힘들어서 동영상 첨부합니다. 위처럼 Scene에서 fill area를 직접 늘려주는 방법이 있습니다.

 

rect tool은 t를 누르거나 좌측 tool 바에서 선택 할 수 있습니다.

2. 컴포넌트를 통한 수정

다음은 fill 오브젝트의 image컴포넌트에서 노란색 박스 안에 있는 부분을 위와같이 수정해줍니다.

 

filled는 가득 채움 + horizontal은 수평으로 + fill origin은 왼쪽에서 부터 == 왼쪽에서 부터 수평으로 가득 채움이라는 의미입니다. 위처럼 설정하면 크기에 맞게 fill area가 자동으로 맞춰집니다.

 

3. Handle 조절 및 Handle 직접 조작 못하게

Handle도 마찬가지로 설정을 다 해주고 나면 꼭 시련이 찾아오는데, fill area랑 따로 노는 상황이 생깁니다.

그럴땐 위에서 했던 것 처럼 rect tool로 직접 handle 범위를 수정해주면서 알맞은 위치를 찾아주면 됩니다.

이건.. 글로 설명하기가 너무 애매하네요..

 

좌 : fill value 1 우 : fill value 0

아래는 제가 만든 최종본입니다. 보시면 지금 잡혀있는 부분이 handle 부분인데, 다른 흰색 선보다 파란색으로 선택된 선의 영역이 더 좁죠? Handle이 움직이는 범위를 fill과 background보다 작게 설정해서 slider의 value가 0이 되더라도 handle이 범위를 벗어나지 않게 보여지는 부분을 수정 한 것입니다.

 

저는 해당 UI를 타이머로 제작했습니다. handle에 이미지를 추가했지만 플레이어가 해당 handle 이미지를 만져 value를 직접 수정하면 안되겠죠? 인스펙터 창으로 갑니다.

 

slider 컴포넌트를 보면 Interactable입니다. 이는 사용자의 입력값을 받을지 여부입니다. 이를 해제하면 유니티를 실행히도 Game 뷰에서 핸들이 선택되지 않습니다.

 

transition은 tager을 클릭/선택되는 동안 지정해둔 색으로 변경되는 것입니다. None으로 변경했습니다.

 

더 자세한 Slider 컴포넌트에 대한 설명은 Unity 공식 홈페이지를 참고하면 됩니다.

https://docs.unity3d.com/kr/2020.3/Manual/script-Slider.html