스크롤 뷰 뭐하기로 제목짓고싶은데 실패!
스크롤 뷰는 경험상 Layout Group과 병행해서 쓰면 좋았던것같아요.
편하다! 새롭다! 깨끗한 손! (?)
[Unity UGUI] 일정 간격으로 UI 배치하기 - Layout Group
글 너무 오랜만에 써서 어떻게 써야할지 계속 쳐다만 보면서 고민중 왜 오랜만인가 - 그동안 올림픽 보고 게임 하면서 지내느라 .. 국가대표 선수들의 경기 하나하나 너무 멋졌어요! 어쨌든 이
drybone-developer.tistory.com
0. 준비
화면상에 다 담기엔 어려운 오브젝트들을 스크롤로 표시하고 싶을 때 씁니다.
가령 이런 상황입니다.
캔버스 밖으로 6과 7이 튀어나가 있습니다. 그런데 간격은 줄이고 싶지 않아!
스크롤링이 됐으면 차라리 좋을텐데!
...바로 이럴 때!
스크롤 뷰는 게임오브젝트 항목에서 UI → Scroll View로 만들 수 있습니다.
스크롤 뷰는 유니티 Play로 쉽게 결과를 확인할 수 있으니 여러번 재생시켜보며 결과를 봅시다.
1. 스크롤 뷰 구성
스크롤 뷰를 만들면 가장 상위 오브젝트인 Scroll View부터 이 모든게 만들어집니다.
쉽게 말해 오브젝트를 담는 영역과 수평 스크롤 바, 수직 스크롤 바로 나뉘어 있습니다.
Content 부분이 스크롤링이 되는 영역이므로, 이 오브젝트의 자식으로 오브젝트들을 넣어줍니다.
이 때, 별다른 설정을 건드리고 싶지 않다면 (귀찮다면)
Content 아래에 또 다른 부모 오브젝트를 두지 않고! 바로 그 아래에 넣어주셔야 합니다.
미리 준비해둔 부모 오브젝트 묶음이 있고 컴포넌트 설정 등이 존재할 때에는
컴포넌트 속성을 복사 붙여넣기로 Content에 옮겨오거나, 스크롤 뷰 자체의 설정을 바꾸는 방법이 있습니다.
1-1. 스크롤 뷰 크기 조절
전체적으로 스크롤 뷰가 보이는 크기를 조절하려면
최상위 오브젝트(기본 생성 이름 Scroll View)의 크기를 조절해주시면 됩니다.
1-2. 스크롤 영역 크기 조절
Content의 크기는 스크롤 영역이 어디까지 이어지느냐~를 담당하기 때문에,
문제 없이 스크롤이 되게 하려면 Content의 크기를 넉넉하게 해줘야 합니다.
위쪽 이미지 스크롤바를 비교해서 봐주시면.. 뭐가 스크롤이 제대로 될 지 보이시죠?
2. 스크롤 뷰 설정
스크롤 뷰에 있는 컴포넌트. Scroll Rect 라는 이름입니다.
유니티 매뉴얼을 슬쩍 봤는데 정식 번역이 "스크롤 사각 영역" 인가보네요.
Content - 스크롤 영역. Rect Transform을 포함한 오브젝트만 가능
Horizontal & Vertical - 스크롤 방향 허용
Movement Type - 스크롤 방식 (Elasticity는 이 속성의 하위 속성)
Inertia - 관성. (Deceleration Rate는 이 속성의 하위 속성)
Scroll Sensitivity - 마우스 스크롤 등을 사용했을 때의 스크롤 정도
Viewport - 스크롤 뷰에서 보이는 영역. Content의 부모여야 제대로 작동
Scrollbar - 스크롤바와 그 대략적인 설정
여기에서 할 수 있는 스크롤바 설정 외에도, 아주 약간 더 자세한 스크롤바의 설정을 할 수 있는데
그건 스크롤바 컴포넌트가 붙은 곳에서 설정해주셔야 합니다.
아래에는 적당히 살펴보면 좋을 얘기만 담았습니다. (?)
어떻게 돌아가는지를 적고싶었는데 움직이는 그림 만들기가.. 쉽지 않아 (귀찮음) 텍스트가 많습니다.
2-1. 영역
만약 처음부터 스크롤 뷰를 만든 게 아닌 데다가,
미리 준비해둔 오브젝트에 이것저것 컴포넌트와 설정이 되어있어 오브젝트들을 옮기기가 아까울 때!
원래 있던 Content를 삭제하고, 준비된 오브젝트 묶음을 뷰포트의 자식으로 넣어준 뒤,
가장 상위 오브젝트인 스크롤 뷰의 Content 속성에 지금 넣어준 오브젝트 묶음을 입력해주면
와! 그대로 옮겨집니다. 단, Rect Transform을 포함한 상태여야 합니다.
뷰포트가 하는 역할은 이런 것. 스크롤 뷰의 크기에 맞춰 오브젝트가 보이는 영역을 잘라줍니다.
뷰포트는 Content 속성에 들어가는 오브젝트의 부모여야 하고, Rect Transform을 포함해야 합니다.
2-2. 스크롤 방향과 움직임
수평, 수직의 스크롤을 활성화할지 말지를 설정합니다.
이게 비활성화가 되어있으면 설령 스크롤바가 제대로 되어있더라도 스크롤이 되지 않습니다.
수평으로만 스크롤되어야 하는데 너무 자유분방하게 스크롤이 된다! 할 때 수직을 해제한다든가...
이런 이용이 보통입니다.
Unrestricted - 제한없음. 스크롤 영역에 상관 없이 마구 스크롤 가능합니다.
Elastic - 기본값. 탄성! 스크롤 영역을 벗어나면 띠용~ 하고 되돌아옵니다. 흔하고 좋은 옵션.
Clamped - 제한. 무슨 일이 있어도 스크롤 영역을 벗어나지 않습니다.
스크롤을 하다가 멈췄을 때의 행동을 정합니다.
활성화 해두면, 스크롤하다 멈췄을 때 관성에 의해서 조금 더 스크롤이 됩니다.
스마트폰 같은 쪽에서 .. 자주 보이는 옵션이죠 이것도?
Deceleration Rate는 그 정도값이며, 관성을 해제하면 이 속성도 사라집니다.
관성을 해제하면 바로 뚝 .. 하고 멈춥니다. (ㅋㅋ)
직접 화면을 잡고 움직이는 경우 (모바일 등)엔 이 값이 관계가 없습니다만,
마우스 스크롤, 트랙패드 등을 사용했을 때 어느 정도 스크롤이 될지 설정합니다.
수가 클 수록 한 번에 더 많은 양이 스크롤됩니다.
이 옵션들은 쉬우니 직접 해보시는게 더 와닿을듯 하네요!
2-3. 스크롤바
수평, 수직의 스크롤바 각각의 참조와 어떻게 보이게 할 지 등을 설정할 수 있습니다.
Visibility가 좀 .. 중요한 것 같은데
Permanent - 스크롤 방향 설정을 따라감 (비활성화 - 비활성화, 활성화 - 활성화)
Auto Hide - 스크롤 영역이 스크롤바 길이보다 작으면 비활성화하고, 크면 활성화
Auto Hide And Expand Viewport - 위에 이어, 남은 스크롤바를 뷰포트에 맞춰서 확장
이미지를 생각없이 잘랐더니 너무 크네
어쨌든 이게 차이입니다. 왼쪽은 Permanent 또는 Auto Hide를 써서 확장이 없는거고
오른쪽은 Auto Hide And Expand Viewport를 써서 확장이 있는겁니다. 스크롤바랑 뷰포트 영역이 다르죠
(그런데 가끔 확장 없는 설정으로 해도 뷰포트는 넓게 보이기도 하더라고요 버그인가)
확장 옵션을 쓸 경우 Spacing으로 이런 것도 할 수 있긴 한데 .. 크게 의미가 있어보이진.. 않는듯!?!?
이래놓고 나중에 어디서 되게 중요하게 쓰는거 아냐? 만약 그러면 이 글을 수정하겠습니다.
3. 스크롤바 설정
스크롤바 오브젝트와 그 하위오브젝트에는 Image 컴포넌트를 포함하고 있는 것도 있어서(Scrollbar, Handle)
이미지의 색깔을 바꿔주는 것으로 간단히 스크롤바의 색깔을 바꿀 수도 있어요.
또, 각각의 스크롤바엔 Scrollbar라는 컴포넌트가 붙어있습니다.
별로 어려운 건 없어서 그냥 쭉 적어보자면...
Interactable
상호작용 가능한지. 체크되어있으면 스크롤바의 핸들을 직접 잡아서 스크롤이 가능합니다.
해제되어있으면 그 방법 외의 것들로만 스크롤이 가능.
Transition
다른 UI 오브젝트에도 자주 보이는 속성인데...
상호작용을 할 시에 어떤 식으로 사용자의 눈에 보이게 할 건지 정할 수 있죠.
색깔을 덧씌워서 강조하는 Color Tint, 스프라이트를 교체하는 Sprite Swap이나 Animation이 있습니다.
Direction
스크롤바가 움직이는 방향을 정할 수 있습니다.
단, 수평 스크롤 바를 위에서 아래.. 수직 스크롤바를 왼쪽에서 오른쪽.. 뭐 이런 설정은 좀 위험하겠죠
이걸 반대로 설정하면 왼쪽→오른쪽이 익숙한 사람에겐 진기명기입니다 완전 (?)
Value
스크롤바의 초기 위치입니다. 0이면 시작점, 1이면 제일 마지막 부분.
Size
스크롤바 핸들의 크기입니다. 별 일 없으면 자동으로 조절됩니다.
Number of Steps
스크롤바의 시작점부터 끝점까지를 여기에 입력된 수로 나누어, 한 번의 스크롤에 한 단계를 움직입니다.
이게 입력되어있으면 보통.. 웬만큼 큰 수가 아니면 엄청 딱딱하게 움직입니다. 탄성도 잘 작동하지 않고..
0은 기본값인데, 이렇게 하면 매우 부드럽게 움직입니다.
댓글