LearnUGUI (미션 창 만들기) - 1

오늘은 위와 같은 미션 창을 만들어 볼 것이다.

 

미션 창은 스크롤 뷰(Vertical)로 이루어져 있고, 

 

미션 셀의 진행도는 데이터를 연동하여 저장 및 불러오기를 하게 할 예정이다.

 

1. 미션 창을 제작 할 새 씬을 생성

2. Canvas를 생성하고, Scaler를 1920x1080으로 수정

3. Main Camera의 Clear Flags를 Solid Color로 변경, Background를 검정색으로 설정

4. 만든 guide(Image)에 가이드 이미지(47_Missions)를 연결하고, 알파값을 40으로 조정

5. 초기 세팅 확인

6. UIMissionScrollView(Image) 생성

7. UIMissionScrollView의 알파값 조정

8. Mission의 미션 셀 만큼 UIMissionScrollview의 크기 조정

9. 빈 오브젝트(content) 생성

10. 앵커프리셋을 좌 상단으로 설정(Alt+shift), Content Size FItter 컴포넌트 생성 및 Preferred Size로 변경

11. 미션 셀(Image)를 생성 후, 앵커 프리셋을 좌 상단으로 맟추고(Alt+shift), 크기 조정

12. content에 Vertical Layout Group 컴포넌트 부착

13. content의 Image 복사(Ctrl + D)

14. content에 Verical Layout Group의 Spacing 수치 조정으로 셀 간격 넓히기

15. UIMissionScrollview에 Scroll Rect 컴포넌트를 부착하고, Horizontal 속성 체크 해제

16. UIMissionScrollView의 Scroll Rect의 Content 속성에 content 연결

17. 미션 셀이 정상적으로 기능하는지 테스트 하기 위해 첫 셀과 마지막 셀의 색상 변경

18. UIMissionScrollView에 Mask 컴포넌트 부착

19. 씬을 실행해서 UIMissionScrollView가 정상적으로 스크롤링 되는지 확인