새로운 게임에 스크롤뷰를 사용해 스크롤링을 구현하게 되었다.
공부도 할 겸 오늘은 UGUI의 Scroll View 사용 방법을 작성한다.
[Scroll Rect]
스크롤뷰를 클릭하면, 인스펙터 창에서 Scroll Rect 컴포넌트가 있는 걸 볼 수 있다.
이걸로 스크롤뷰에 대해 기본적인 설정을 할 수 있다.
유니티 레퍼런스에 나와있는 기능들에 대해 몇 가지를 표로 정리했다.
| Property | 기능 |
| Content | 스크롤 할 요소들의 집합에 대한 사각 틀. 요소들의 부모라고 보면 된다. |
| Horiaontal | 수평 스크롤링 활성화 |
| Vertical | 수직 스크롤링 활성화 |
| Movement Type | Unrestricted: 스크롤했을 때, 콘텐츠가 영역을 벗어나는 것을 허용. Elastic: 콘텐츠가 스크롤 사각 영역을 벗어나지 않고, 영역 끝에 닿으면 튕긴다. Clamped: 콘텐츠가 사각 영역을 벗어나지 않게 한다. |
| Elasticity | Elastic 모드에서 사용할 탄성 정도 |
| Inertia | 관성 모드. 활성화되면 드래그 후에 포인터를 떼도 계속 스크롤된다. 비활성화 하면 손으로 드래그 해야만 스크롤된다. |
| Deceleration Rate | Inertia가 활성화 됐을 때, 콘텐츠가 정지하는 속도를 결정. 0이면 바로 정지, 1이면 계속 움직인다. |
| Scroll Sensitivity | 스크롤 휠과 트랙 패드 스크롤 이벤트 민감도 |
| Viewport | Content의 부모. |
[주의]
웬만하면 Movement Type은 Unrestricted를 사용하지 말자. 사용할 일이 있을까 싶을 정도의 기능이다..
[Layout Group]
이 기능은 자동으로 오브젝트들을 정렬해주는 기능이다. 스크롤뷰 말고 다른 곳에서도 유용하게 사용할 수 있다.
스크롤뷰를 생성하고 오브젝트들을 처음 넣으면 위치들을 설정해줘야 하는데
이게 매우 귀찮고, 귀찮은 작업이다. 그리고 해상도가 달라지면 또 위치가 달라지기 때문에
Layout Group을 사용하는 것이 좋다.
인스펙터 창에서 Add Component를 누르고 layout group을 검색하면 이렇게 3가지가 나오는데
원하는 걸로 선택해서 추가해주면 된다.
오브젝트 하나에 layout group 컴포넌트는 하나만 사용할 수 있다.
유니티 레퍼런스에 나와있는 기능들을 표로 정리했다.
| Property | 기능 |
| Padding | 레이아웃 그룹 모서리의 두께. |
| Spacing | 레이아웃 요소 간의 간격. |
| Child Alignment | 사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라이먼트. |
| Control Child Size | 요소의 크기를 지정하거나 요소를 배치할 때 레이아웃 그룹이 해당 자식 레이아웃 요소의 크기를 조정할지에 대한 여부. |
| Child Force Expand | 추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃 요소를 강제로 확장할지에 대한 여부. |
- 터치 스크롤 구현 -
이제 다른 설명들은 생략하고 구현을 하려고 한다.
일단 먼저 스마트폰 느낌이 나게 해상도도 바꿔준다. 900x1950
[스크롤뷰 생성]
스크롤 뷰를 사용하기 위해 먼저 하이라키 창에서 우클릭 후 UI - Scroll View를 클릭 해
Scroll View를 생성한다.
캔버스와 함께 Scroll View가 생성된 걸 확인할 수 있다.
그리고 Scroll View 밑에 Scrollbar가 생기는데, 스크롤바를 사용 안 할 생각이기에 과감히 삭제해준다.
Content는 스크롤 요소들이 들어가는 공간이라고 생각하면 된다.
이번에는 화면 꽉 차게 구현하기 위해서 stretch로 꽉 채워준다.
이건 본인이 원하는 크기로 설정하면 된다.
[요소 추가]
그리고 이제 Content 밑에 오브젝트를 넣어준다
이미지를 10장 넣었는데 처음에는 아무 설정을 하지 않아 그냥 기본 크기로 10개가 겹쳐 있다.
여기서 이제 아까 설명했던 Layout Group을 사용해준다.
[Layout Group Component 추가]
세로로 스크롤을 할 것이기 때문에 Content에 Vertical Layout Group 컨포넌트를 추가해준다.
이렇게 추가하면 바로 이미지들이 나란히 정렬이 된다.
여기서 이제 Child Alignmet와 Control Child Size, Child Force Expand를 사용해서
본인이 원하는 크기와 방식으로 정렬해주면 된다.
일단 이미지들을 구별하기 위해 서로 다른 색을 입혀줬다.
가운데에서 위에서부터 채워지도록 Upper Center을 사용했고,
화면이 가로로 길어지면, 이미지들도 가로로 길어지게 하기 위해
Control Child Size에서 Width를 체크하고,
높이는 고정하기 위해 Height은 체크하지 않았다.
그리고 이미지들의 높이를 250으로 설정했다.
짠! 이미지들이 깔끔하게 정렬되었다.
그리고 화면에 담지 못한 애들은 저렇게 밑에 나란히 정렬되어 있다.
[실행 화면]
이제 실행하면..!
놀랍게도 스크롤이 위아래로 되는 것이 아니라 가로세로 난리가 나고,
터치를 멈추면 바로 처음 위치로 가는 사태가 일어난다..!
[Scroll Rect]
가로로 스크롤 되는 것은 Scroll Rect에서 Horizontal을 체크 해제하면 해결 된다!
이게 스크롤 방향을 정하는 건데 본인은.. 멍청하게 세로로만 한다고 해놓고 체크 해제하는 거를 까먹었다 ㅎㅎ
[Contenet Size Fitter]
포인터를 떼면 처음 위치로 돌아가는 것은 Content Size Fitter Component를 추가해주면 된다.
놀라지 말고 Content에 Content Size Fitter를 추가해주고,
Vertical Fit을 Preferred Size로 설정해주면 된다.
[실행 화면_최종]
짠! 이제 제대로 작동한다.
우당탕탕 터치 스크롤 구현 끗!
'Unity | 유니티 > Unity 개발 일지' 카테고리의 다른 글
| [Unity] IPointer Interface ( 클릭 / 터치 이벤트) (0) | 2023.03.25 |
|---|---|
| [Unity] 스크립트 직렬화( SerializeField / Serializable ) (0) | 2023.03.24 |
| [Unity] 스프라이트 아틀라스(Sprite Atlas) 사용 방법 (0) | 2023.01.30 |
| [Unity] 애니메이션 도구 | DOTween 기능(2) (0) | 2023.01.19 |
| [Unity] 애니메이션 도구 | DOTween 기능(1) (0) | 2023.01.10 |