#Slider #Scroll Bar #Dropdown #Scroll View #UI #Event System #Health Bar #Cooltime #Scrolling #Canvas Depth

1. UNITY COOKBOOK
SHOT BY. INS
PART 16
UI 최종

2. UI 심화의 심화
유니티 UI 기능 중 여러 기능을 더 살펴보겠습니다.
버튼, 입력란, 이미지 기능 말고도 스크롤링이나 여러 상호작용에 관련 된 기능이 꽤 있습니다.
제일 아래 ‘Event System’은 이러한 UI 객체들의 상호작용 이벤트를 돕고 관리하는 기능입니다.
이 부분은 추후 아랫장에서 자세하게 다룰 예정입니다.
( 1 / 8 )

3. 스킬 쿨타임을 만들자
UI 기능 중 ‘Slider’에서의 계층구조를 잘 보면 ‘Fill’ 이라는 자식이 있는데 이를 발췌하여 ‘Image Type’를 ‘Filled’로 변경하면
라디안 값에 따라 호각형으로 이미지가 지워지는 것을 볼 수 있습니다.
이를 잘 활용하면 게임 상에서의 쿨타임 기능을 구현 할 수 있습니다. 하지만 ‘Fill’ 에서의 ‘Image Component’는 일반적인
컴포넌트랑 틀리기 때문에 저렇게 ‘Slider’에서 발췌해 쓰이기도 합니다.
( 2 / 8 )

4. 체력바를 만들자
Fill를 이용한 체력바를 구현해봅시다.
2개의 Fill을 이용하여 하나의 색상은 어둡게, 다른 하나의 색상은 밝게 처리하여 Component 상에서의
‘Fill Method’ 값을 ‘Horizontal’로 변경하고 ‘Fill Amount’의 값을 변경하면 체력바가 늘어났다 줄어들었다 합니다.
이러한 불편한 UI를 타개하기 위해 ‘NGUI’, ‘UGUI’의 UI에디터가 어셋스토어에서 판매하기도 합니다.
( 3 / 8 )

5. 윤곽선 조정
캔버스 상에서 UI의 크기를 조정하다 보면 이미지 픽셀이 깨져버립니다. 하지만 이런 문제를 해결하는 방법이 존재합니다.
UI 대상의 이미지의 ‘Inspector View’에서 보면 ‘Sprite Editor’ 이가 있는데 양 끝의 녹색선을 테두리 측으로 옮겨
3x3 규격의 분할로 만들면 정 가운데 구간은 확대하면 늘어나지만, 그 외의 테두리 부분은 늘어나지 않습니다.
실제로 그렇게 해 보면 크기를 키워도 늘어나지 않는 이미지를 확인하실 수 있습니다.
( 4 / 8 )
x10
# 깨지지 않는 UI

6. 스크롤링 만들기 #1
스마트폰으로 웹툰을 볼 때 스크롤을 하면 다음 화면이 이어서 보이게끔 구현해 보겠습니다.
우선 ‘Image’ 객체 2개와 화면이 되는 ‘Image’ 안에 스크롤 대상이 되는 ‘Image’를 계층구조로 만듭니다.
이후 화면 객체에서 ‘Mask Component’를 하게 되면 자식 계층이 마스킹 되어 화면 부분에서만 출력 가능합니다.
그리고 ‘Scroll Rect’를 추가로 컴포넌트 합니다.
( 5 / 8 )

7. 스크롤링 만들기 #2
추가한 ‘Scroll Rect Component’의 ‘Content’에 스크롤링 될 이미지를 대입하고 실행하면 위 아래로 스크롤링 되는
것을 확인할 수 있습니다. ‘Scroll Rect’
( 6 / 8 )
Elastic: 상하좌우 스크롤 범위가 자유로움 / Clamped: 위ㆍ아래만
# 위 아래로 스크롤링 되는 이미지

8. 스크롤링 만들기 #3
추가적으로 스마트폰에서 화면이 스크롤링 될 때 좌측에 스크롤바도 같이 움직이게끔 만들어보겠습니다.
우선 ‘Scrollbar’를 하나 생성하고 ‘Direction’을 ‘Top To Bottom’으로 설정하고 출력 화면 ‘Image’에서 ‘Vertical Scrollbar’
입력란에 ‘Scrollbar’를 대입하면 스크롤 할 때 스크롤바가 같이 상호작용하여 내려가는 것을 볼 수 있습니다.
( 7 / 8 )
THIS !

9. 캔버스의 깊이 값
캔버스에서의 깊이 값 판정은 3D처럼 앞 뒤의 순서를 바꾼다고 바뀌지 않습니다.
‘Hierarchy View’에서 ‘Canvas’ 계층의 자식들 순서에 따라 UI 깊이 값이 결정됩니다.
이상 UI 기능에 대해서 자세히 알아보고 응용해보았습니다.
( 8 / 8 )

10. Thank You !