스크롤 기능은 이 블로그를 포함한 여러 곳에서 사용할 수 있는 친숙한 기능이다.
Scroll View는 주로 화면에 모든 요소를 한 번에 표시할 수 없을 때 사용되며, 내부 요소를 상하 또는 좌우로 이동시켜 원하는 요소를 표시하는 데 활용된다.
아래 이미지는 실제로 구현된 모습이다.
우선 참고할 수 있도록 실제 상점 UI에서 스크롤이 적용되는 부분의 Hierachy 일부를 올린다.
1. Scroll Rect
스크롤 기능이 동작할 수 있게 하는 것은 Scroll View 오브젝트의 Scroll Rect라는 컴포넌트이다.
Scroll Rect에서 제일 중요한 부분은 Content, Viewport, Scrollbar 이다
Content는 스크롤할 실제 콘텐츠,
Viewport는 콘덴츠가 표시될 영역,
그리고 Scrollbar는 스크롤의 위치를 나타내는 UI이다.
2. Content
내가 스크롤하고 싶었던 컨텐츠는 상점 아이템이 추가되는 ShopItemStockContainer였기에 해당 오브젝트를 Content로 참조했다.
2.1. Content Size Fitter
Content Size Fitter 컴포넌트의 경우 해당 오브젝트를 잘 보여줄 수 있게 Width나 Height를 조정해주는 컴포넌트이다.
Content Size Fitter에는 세가지 옵션이 존재한다.
0. Unconstrained
- 자동으로 변경하지 않고 수동으로 설정한 값을 유지한다.
1. Min Size
- 콘텐츠가 차지하는 최소 크기만큼 설정한다.
2. Preferred Size
- 콘텐츠가 이상적으로 표시되기 위한 크기를 기준으로 Rect Transform의 크기를 설정
Content Size Fitter를 적용되지 않는다면 Scroll Rect가 Content의 범위를 제대로 인지하지 못하기에, 꼭 추가를 해줘야한다.
3. Viewport
Viewport는 콘텐츠가 보이는 부분이다. 나는 ShopViewPort에 Rect Mask 2D를 추가했다.
Rect Mask 2D의 경우 이전에 다룬적이 있다.
https://jooglorystar98.tistory.com/69
내일배움캠프 69일차 TIL "Mask, Rect Mask 2D"
상점 UI를 구현하기 위해 필요한 기능이 있었다. 위 이미지 처럼 상점에 필요한 아이템들을 표시 하는데, UI에 담을 수 있는 양보다 많은 수의 아이템 슬롯이 있을 때, 그 슬롯이 UI를 벗어나게
jooglorystar98.tistory.com
이로서 ShopViewPort 의 범위 외에는 자식으로 있는 ShopItemStockContainer가 보이지 않게 된다.
4.Scrollbar
Scrollbar는 컨텐츠의 크기를 시각적으로 확인할 수 있으면서, 직접 상호작용해 컨텐츠를 조작할 수 있는 UI이다.
Scroll Rect에 연결한 경우 대부분의 요소를 Scroll Rect에서 관리해준다.
Interactable의 경우 체크할 경우 스크롤바를 드래그해, 컨텐츠를 움직일 수 있있다. 체크 해제시에는 상호작용이 불가능하며 시각적인 정보만 제공해준다.
4.1. Scrollbar Direction
Direction은 스크롤바의 방향을 결정한다.
Left To Right, Right To Left는 수평 스크롤바고, Botton To Top과 Top To Bottom은 수직 스크롤바이다.
구체적으로는 Value에 따른 스크롤 Handle의 위치를 어떻게 하느냐를 정한다.
Top To Bottom의 경우, Value가 0일 때 스크롤 핸들이 위에 있으며, 1일 때 아래에 있게 된다.
Bottom To Top의 경우 반대로, Value가 1일 때 스크롤 핸들이 위에 있으며, 0일 때 아래에 있게 된다.
마무리하며
이번에는 상점 UI를 개선하면서 Scroll Rect를 비롯한 다양한 컴포넌트들을 이용해 스크롤바를 구현하고, 스크롤이 가능한 범위도 한정하는 것이 가능했다.
이번에 익힌 스크롤 기능은 다른 게임을 개발할 때도 유용하게 사용될 것이다.
'내일배움캠프 TIL' 카테고리의 다른 글
| 내일배움캠프 81일차 TIL "퀘스트 감지 처리" (0) | 2025.01.13 |
|---|---|
| 내일배움캠프 80일차 TIL "NPC 위치에 따른 표시" (0) | 2025.01.10 |
| 내일배움캠프 78일차 TIL "퀘스트 기능" (0) | 2025.01.08 |
| 내일배움캠프 77일차 TIL "ToggleSelect 관련 개선" (0) | 2025.01.07 |
| 내일배움캠프 76일차 TIL "선택한 아이템을 강조하는 법" (0) | 2025.01.06 |