UNITY COOKBOOKSHOT BY. INS

PART 16UI 최종

UI 심화의 심화

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

( 1 / 8 )

스킬 쿨타임을 만들자

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

( 2 / 8 )

체력바를 만들자

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

( 3 / 8 )

윤곽선 조정

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

( 4 / 8 )

x10

# 깨지지 않는 UI

스크롤링 만들기 #1

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

( 5 / 8 )

스크롤링 만들기 #2

추가한 ‘ Scroll Rect Component’ 의 ‘ Content’ 에 스크롤링 될 이미지를 대입하고 실행하면 위 아래로 스크롤링 되는것을 확인할 수 있습니다 . ‘Scroll Rect’

( 6 / 8 )

Elastic: 상하좌우 스크롤 범위가 자유로움 / Clamped: 위ㆍ아래만 # 위 아래로 스크롤링 되는 이미지

스크롤링 만들기 #3

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

( 7 / 8 )

THIS !

캔버스의 깊이 값

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

( 8 / 8 )

Thank You !