유니티 방치형 프로젝트 - 인벤토리 같이 스크롤 적용되는 영웅 슬롯 UI 구현하기.

  구현할 내용

리소시스 폴더의 스크립터블 오브젝트 데이터를 슬롯에 반영하기

커밋 4f6ed4575802d45e5b989ed9f383ec7925baa409

 

공부하면서 배운 것

1. 스프라이트 이용해서 이미지 불러오기

2. Recources.Load 관련 메서드 익히기 

3. UI 구현 및 배치 잘 해보기

4. 전체적인 설계 잘 짜기 

UI 구성하기

1.스크롤 영역 생성

마우스 우클릭 UI -> Scroll View 추가 > Rect Transform 확장

 

 

2. 오브젝트 크기 줄이기

스크롤 할 영역 만큼만 높이 조절하기

 

3. 오브젝트 제거

스크롤바 Horizontal이랑 Vertical 지우기 (Scroll View 오브젝트 하위에 자동으로 생성되어있는 것 지우기)

 

4.정렬

- Content 오브젝트에 Grid Layout Group 컴포넌트 추가

- Cellsize,spasing,childalignment,constraint,constraintcount 값을 아래와 같이 수정.

 

Content 오브젝트 자식 오브젝트를 Middle Center 즉 중심부터 생성하는것을 의미

 

5. 문제 확인

Content 오브젝트 자식으로 Image 오브젝트 여러 개 추가 시 위에가 잘리는 문제 발생 

 

6. 문제 해결

Content 오브젝트에 Content Size filter 컴포넌트 추가 후 vertical fit 을 preferred size 로 설정하여 문제 해결

※ Content Size Filler를 아래와 같이 설정하면 Content오브젝트 크기를 자식오브젝트 크기만큼 자동으로 늘려준다.

 

7. Content Size Filler 사용전 사용후 비교 

컨텐트 사이즈 필터 추가 후 Preferred Size 적용 시 컨텐트의 크기가 300에서 내부 오브젝트 크기 만큼 자동으로 늘어난 것을 확인할 수 있다 (좌 사용전, 우 사용 후)

 

 

 

8. 디테일 수정

패딩 수정

 

 

9. 플레이 테스트

스크롤이 상하좌우 다 먹히는 현상 발생. 위 아래로만 제어 가능하도록 제한 필요

 

10. 문제 해결

Horizental 체크해제

11. 문제 해결 확인

상 하 로만 잘 스크롤 됨

 

12.디테일 수정

- Content > Grid Layout Group > Child Alignment 값 Upper Left 변경

- 패딩 Left 45 수정

 

 

13. 슬롯 제작 - 이미지 설정

- Content 자식으로  HeroSloat 오브젝트 추가 후 배경 이미지 설정

 

 

\

14. 슬롯 제작 과정 - 이미지 설정

- HeroSloat 오브젝트 자식으로 Img_Character 오브젝트 추가 후 캐릭터 이미지 설정

15. 슬롯 제작 과정 - 이미지 설정

- HeroSloat 밑으로 오브젝트 추가 후 이미지 추가

16. 슬롯 제작 과정 - 이미지 설정

Slider 자식으로 오브젝트 추가 후 이미지 추가한다음에 이미지 타입 Filed로 변경

17.  Fill Method Horizontal 변경

 

18. Slider 자식으로 텍스트 컴포넌트 추가 

19. HeroSloat 자식으로 텍스트 컴포넌트 추가 

- HeroSloat 오브젝트 작업 완료 (추후 프리팹 화 해서 인스턴트 해서 사용할 예정)

 

20. HeroSloat 오브젝트 프리팹 화

추후 컨텐트 오브젝트 자식으로 Instantiate 해서 사용할 에정이기 때문

슬롯 스크립트 작성

1. 필드 변수 생성 

이미지 : 슬라이더, 캐리겉이미지, 등급별 배경

Text : 레벨, 개수

 

2. 오브젝트 연결

 

3. 초기화

HeroSloat 오브젝트는 하나의 슬롯이며 추후 Content 자식으로 Instantiate 될 것이다 그러면 초기화 작업으로 해당 슬롯의 이미지 텍스트 등의 작업을 영웅 정보에 맞게 세팅이 되어야 한다 따라서 initialize 메서드를 미리 만들어 놓는다.

 

스크립터블 오브젝트 데이터를 Utils 클래스의 Get_Atlas 메서드에 넘기면

아래와 같이 스프라이트 아틀라스에서 제공하는 메서드를 통해 GetSprite 를 통해 스프라이트를 반환 받을 수 있다.

 

그래서 나는 캐릭터 이미지와 등급 이미지를 한 폴더에 모아둔 다음 

스프라이트 아틀라스 처리를 하였고 Allow Rotation , Tight Packing 을 해제 하였다.

 

 

어찌 되었든 여기서 중요한 것은 리소시스 폴더의 Atlas 파일을 아래 코드를 통해 불러오는 것이다.

 

이제 슬롯 준비는 끝났다. 스크립터블 데이터를 받아와 이 프리팹을 생성 하기만 하면 된다.

 

슬롯 프리팹 스폰

UI_Heroes 스크립트 만들기.

 

Conent에는 Scroll View 생성 시 자동으로 추가 되는 View Port아래 Content 를 넣어주면 되고 Part는 HeroSloat 프리팹을 넣어준다.

 

스크립터블 오브젝트 데이터 준비

 

1. Resources.LoadAll 함수를 통해 스크립터블 오브젝트들을 배열로 가져온다 Sharacter_Scriptable[]  로 담겨진다는 뜻이다

 

2. 가져온 스크립터블을 딕셔너리에 넣어두고.

 

3. OrderBy를 통해 등급 기준으로 딕셔너리를 정렬한다.

 

4. foreach 문을 통해 프리팹을 Content 자식으로 스폰시키고 Getcomponent 해서 초기화를 진행한다.

 

과정 정리

지금 까지의 과정을 정리하면

1. 스크립터블 오브젝트 데이터를 리소시스 폴더에서 LoadAll 해서 배열로 가져오고

2. 딕셔너리에 넣고 정렬시키고 Instantiate 를통해 Content 자식으로 스폰시켰고  

3. 스폰과 동시에 스크립터블 데이터를 넘겨줬고 

4. UI_Heroes_Part에서는 넘겨 받은 데이터로 세팅을 진행하는 것이다.

5. 그리고 UI_Heroes_Part에서는 스프라이트 데이터를 Utils에 또 요청해서 받아오는 것이다.