[Unity][UI] Slider(슬라이더)에 대해 알아보자

[Unity][UI] Slider(슬라이더)에 대해 알아보자

 

이전 글 :

2018/11/24 - [Unity] - [Unity][UI] Button(버튼)에 대해 알아보자

2018/11/24 - [Unity] - [Unity] 2D Sprite와 UI Image

 

 

-

 

01. 어떻게 만드나요?

 

 

 

우선, Slider는

Hierachy 우클릭 -> UI -> Slider

를 통해 생성할 수 있습니다!

 

 

좌측은 생성된 슬라이더의 기본 형태입니다.

 

Slider는 여러개의 오브젝트들이 모여있습니다.

BackGround, Fill, Handle 세가지로 나눌 수 있죠.

 

 

02. 살펴보기

(1) BackGround

 

 

BackGround는 말 그대로 '배경'입니다.

Image 컴포넌트를 이용하여 원하는 모양으로 바꿀 수 있습니다.

Source Image 대신 Color를 활용하여 색을 조절할 수도 있습니다! (^^)

 

 

(2) Fill

 

 

Fill은 '채워지는' 혹은 '채우는' 부분입니다.

마찬가지로 Source Image를 이용하여 준비한 이미지를 넣을 수 있고,

Color를 통해 색만 바꿔줄 수 있습니다.

 

 

(3) Handle

 

 

Handle은 '손잡이'라고 생각하시면 편합니다.

게임 플레이 화면에서 Slider의 채워짐의 정도를 표현하는 Value를 조절하기도 합니다.

사운드 설정에는 Slider에 Handle이 종종 있기도 하죠.

 

 

03. 응용하기

 

 

Button을 누르면 Slider의 Fill이 줄어들도록 설계할 생각입니다.

 

 

GameObject에는 SlideScriptf라는 C# Script 컴포넌트가 들어있습니다.

 

SliederA가 들어갈 자리는 당연히 스크립트에서 정의해주었습니다.

아래 스크립트를 참고해주세요!

 

 

OnClickButtonA() 함수는 생성한 Button에게 적용할 함수입니다.

Button을 클릭하면 hp가 1씩 감소합니다.

(Button에 적용하는 방법을 모르시겠다면 이전 글을 참고해주세요~)

 

void Update에서 slideA.value를 봐주세요.

hp와 hpFill을 활용하여 value의 값을 지정해줍니다.

 

value의 전체 값이 1이므로 (float)를 통해 형변환을 했습니다.

만약 (float) hp / hpFull = 99/100 이면 value는 0.99 겠죠?

 

 

-

 

(+) Handle이 없는 Slider

 

 

① 우선은 Fill Area를 BackGround의 끝까지 늘려줍니다.

예시 이미지에는 Fill이 전부 채워져있는데 Fill Area를 아무리 늘려도 Fill이 채워지지 않는다고요?

놀라지 마시고 아래를 참고하여 Fill을 조절해주세요.

 

 

② 가장 중요한 단계입니다.

Image Type을 Simple에서 Filed로 전환해줍니다.

Fill Method, Origin은 상황에 따라 다르니 직접 시도해보시는 걸 추천합니다.

여기서는 Fill Method -> Horizontal

Fill Origin -> Left로 조절했습니다.

 

 

③ Handle을 삭제해줍니다. (비활성화 시키셔도 괜찮습니다.)

④ Fill Amount를 조절해보세요.

 

Tip ) 스크립트에서, Slider가 아니라 Image로 정의한 후 Fill 부분만 집어넣을 수도 있습니다.

그 때는 (변수명).fillAmount = (float) hp / hpFull;

처럼 조정해주시면 됩니다.

 

 

-

 

가로가 아닌 세로 모양의 Slider도 매력있네요 (^^)

 

 

사용한 Asset : https://assetstore.unity.com/packages/2d/gui/cute-cartoon-mobile-gui-97-png-files-35315