유니티

두번 째로 로그인한 유저의 룸 접속 방식은 랜덤 매치메이킹을 통해 자동입장하는것인데 이제 직접 룸을 만든후 다른 유저는 룸의 목록을 조회하고 선택후 입장할 수 있게 해보자

Scroll Rect 컴포넌트

먼저 하이라키뷰의 Canvas 하위에 있는 Panel-Login을 선택하고 새로운 PanelUI항목을 추가한다. Panel-RoomList로 변경하고 앵커프리셋을 가로 세로 모두 Stretch로 설정한다. 상하좌우 여백은 다음과 같이 적적히 생성한다.

 Panel-RoomList을 선택하고 UI->ScrollView를 추가한다. 앵커프리셋을 가로세로 Stretch로 설정한다.

ScrollView오브젝트의  ScrollRect컴포넌트의 Horizontal은 언체크한다.

 Scroll View->Viewport 하위의 것들은 실제 스크롤링될 객체이며 룸 목록객체를 정렬하는 역할을 한다.  Content 속성에는 이미 Content 게임오브젝트가 연결됐다.

스크롤 객체 생성

로비에 접속했을 때 포톤 클라우드 서버에서 보내주는 룸 목록을 수신받아 동적으로 구성해야 하기 때문에 UI를 디자인하는 시점에서 생성될 룸의 개수가 몇 개인지 알 수 없으며, 가변적일 수 밖에 없다.  따라서 룸 정보를 표시하는 UI를 프리팹으로 미리 만들어두고 로비에 접속했을때 수신된 룸 개수 만큼 반복문을 반복하면서 동적으로 룸정보를 표시하는 프리팹을 Scroll View-ViewPort-Contents하위에 생성하는 방식으로 룸 목록을 구현한다.

하이라키 뷰에서 Contets를 선택하고 컨텍스트 메뉴에서 UI-Image를 선택해 생성한다. 이름을 RoomItem으로 변경하고 Source Image속성은 백그라운드로 설정한다. 백그라운다 이미지는 속성오른쪽 Image Browser를 열어 검색해서 선택한다.

RommItem차일드로 Text Mesh Pro를 추가하고 이름을 Text-RoomInfo로 변경한다

RommItem은 상하 방향으로 스크롤되는 객체이지만 동시에 클릭할 수 있어야한다. 따라서 Button컴포넌트를 추가해야 하지만 동적으로 생성되기 때문에 스크립트에서 처리한다.

Grid Layout Group컴포넌트

지금까지 만든 RoomItem을 실행시점에서 동적으로 생성하기 위해 프로젝트뷰의 Resources폴더로 옮겨 프리팹으로 만든다.

실행후 로비에 접속시 이미 5개의 룸이 생성되어 있다면 위 아래로 나란히 정렬되게 해야한다. Layout계열의 컴포넌트를 이용하면 손쉽게 정렬 기능을 구현할 수 있다.

RoomItem을 5개쯤 카피한다. 위치가 겹쳐져있다. 

Content를 선택후 인스펙터에서 AddComponent-[Component][Layout][Grid Layout Group]을 선택해 Grid Layout Group 컴포넌트를 추가하면 자동정렬된다.

Grid Layout Group 속성을 다음과 같이 설정한다.

예제 게임을 실행해 룸 목록을 스크롤해보면 상하로 스크롤 되는걸 확인할 수 있다.