LearnUGUI 연습 (6. ShopChest 정적 스크롤뷰 만들기)

1. 씬을 만들고, 초기 화면 셋팅(1920x1080)

2. Guide(Image)를 생성 후, 제작할 가이드 Sprite(43_Shop_Chest)를 Guide의 Source Image에 연결 및 Set Native Size 적용

3. 앵커 프리셋 좌 상단으로 적용(Alt+Shift)

4. 빈 오브젝트(Main)을 생성 후, scrollVIew(Image) 생성

5. 스크롤 뷰가 될 영역을 지정 (양 옆의 여백을 맞추기)

6. 빈 오브젝트(content)를 만들고 좌 상단으로 앵커 프리셋 설정

7. content에 Horizontal Layout Group 컴포넌트 추가

8. UIChestCell(Image)를 생성 후, 한 Chest 범위 만큼 크기를 설정

9. 복사(Ctrl+D)를 통해 한 페이지의 chest 수 만큼 복사

10. UIChestCell 사이간의 Spacing 조정

10. UIChestCell 사이간의 Spacing 조정과 Content Size Fitter 속성을 Preferred Size로 변경

11. scrollView에 Scroll Rect 컴포넌트 부착 후, Vertical 속성 체크 해제

12. Scroll Rect의 Content에 content 연결

13. 테스트 시에 Chest Cell이 정상적으로 스크롤링 되는지 확인을 위해 마지막 셀에도 색상을 설정

14. 오류 났을 때의 화면

*** 만약 위 그림처럼 마지막 ChestCell이 중간까지 밖에 오지 않는다면 content에 Horizontal Layout Group이 제대로 설정되지 않았거나, 기타 오류일 수도 있다.

 

다시 만드는 것이 제일 빠르다.

 

15. 씬 실행 후, 정상적으로 작동 되는지 확인

16. scrollView에 Mask 컴포넌트 장착

17. Mask 컴포넌트가 적용된 모습 확인

***Chest Cell에 대한 테스트를 진행할 때에는 Mask컴포넌트를 비활성화 하고 테스트를 하자.

 

18. 본격적인 Chest Cell의 제작을 위해 UIChestCell을 모두 제거

19. 원본 가이드의 Demo Scene에서 Chest Cell들을 찾아서 프리팹으로 생성

20. 원본 오브젝트들은 Demo Scene에서 나가기 전에 Unpack

21. 프리팹들을 content의 자식객체로 넣어주고, Unpack

22. scrollView 안에서 ChestCell들이 잘 이동되는지 확인

23. guide와 scrollView의 Image 속성을 비활성화 시키고 실행한 모습