Photon 여섯 째날 (LobbyScene 꾸미기, RemoveRoomListUI(),UpdateRoomCache())

목차

• LobbyManager Scene 꾸미기
• InputField 와 버튼 상호작용해주기
• 버튼에 기능이 들어가는 함수 넣기
• 방 생성시, 생기는 방 목록 관리하기
• Button 으로 Scroll View 안에 목록 만들기
• 방 버튼의 기능 만들기
• void RemoveRoomListUI() 기능 구현
• void UpdateRoomCache() 기능 구현하기

---

LobbyManager Scene 꾸미기

 

이런식으로 꾸밀 예정

 

LobbyScene 에서

 

Text 있었던거 지우고

InputField ㄱㄱ

이렇게 만든다

 

(방 이름, 총 인원)

이 글씨는  InputField 에서 자식으로 또 만든 Text 에서 꾸며 준거임

OutLine 을 넣어줘서 좀 더 잘 보이게 만듦!

 

그다음 이 인풋 필드의 앵커를 우측 하단으로 적용 시켜준것임

 

(방 참가, 방 생성) 버튼도 만들어준다

Cancas Scaler 에서 모드를 Scale With Screan Size 로 하면

밑에있는 크기에 맞게 UI 의 크기를 바꿔주는거임

---

InputField 와 버튼 상호작용해주기

이 방 버튼들 interative 를 체크 해제

미션!

 

방 이름에 뭐가 들어가면, 방 참가만 뜨게

방 이름과 총 인원에 뭐가 들어가면, 둘다 뜨게

총 인원만 들어가면 아무것도 안되게

답!

---

버튼에 기능이 들어가는 함수 넣기

이제 버튼에 클릭했을 때 써지는 함수를 만들어 보자!

여기 버튼에는

JoinRoom 함수 넣어주고

여기 버튼에는

CreateRoom 함수 넣어주면 됨

실패하면 조인하게 하는거 지우자

CreateRoom 함수 수정! InputField 를 넣었으니까

JoinRoom 함수도 설정

여기, 총 인원 InputField 에서 Content Type 에서 Integer Number 를 선택하면 다른건 안눌리고

숫자만 눌리게 된다.

---

방 생성시, 생기는 방 목록 관리하기

Scroll View 생성

Content 에 Image 를 추가 시키고

 

Content 에 Vertical Layout Group 을 추가 시킨다

자식으로 있는 Image 들이 정렬이됨

Spacing은 그 사이의 간격을 의미 한다.

그러면 Image 들이 알아서 정렬이 된다.

Child Alignment 에 적혀있는 방법으로 정렬이 된다.

 

여기서 Controll Child Size 에 Width 를 체크해주면 부모와 넓이를 맞춰주는거임

child Force Expand 가 꼭 둘 다 켜져 있어야 가능함~

 

 

(참고)Use Child Scale 하면

이렇게 사이즈가 달라도 Spacing 균등하게 남음

근데 UI 에서 Scale 은 잘 안건들인다!

차라리 height 를 건들자!

지금 잘림 밑에

그럴려면 Content 의 Height 를 늘려야함

 

하지만 이 컴포넌트를 추가해보자.

Content 에 이거 넣자

Content Size Fitter 컴포넌트 추가

이거 해주면 Content 안에 컨텐츠에 따라서 잘 늘어나게 됨

이제 잘 맞음

 

그리고 이 Vertical Layout Group 에서 이걸 체크 해주면

가로 길이까지 맞게 나온다,.

 

이건 이미지 height 도 좀 낮춰준거

 

참고로 저 스크롤뷰는 Anchor 를 왼쪽 상단으로 놔야 한다.

 

---

Button 으로 Scroll View 안에 목록 만들기

Scroll View 에 아이템을 만들어보자

일단 안에 있었던 Image 다 없애주고

Button 넣어보자

 

Btn 이름은 RoomItem

text 왼쪽으로

버튼안에 Text 를 왼쪽으로 옮긴다.

이런식으로 하고싶은거임

Text 를 조금 오른쪽으로 옮긴다.

 

이제는 버튼을 누르면 바로 방 참가 할 수있게 끔 하는거임

내가 생성을 하면, buttn의Text 를 바꿔야 하는거임

 

스크립트 생성

아까 그 버튼에 넣어보자

 

RoomItem.cs---->

public Text roomInfo에 에  아까 버튼 안에 있는 text Assign 하면됨

버튼을 프리팹으로 만든다

그리고 저 버튼 삭제!

---

방 버튼의 기능 만들기

 

LobbyManager ---->

이거 만들자~

roomList 는 변경된 것만 리스트로 들어감

 

누가 어떤 방에 들어가거나, 누가 들어가서 어떤 방이 이제 더 이상 못들어오거나

방에서 누가 나가거나, 다 나가서 방이 없어지거나

여튼 그게 다 불러와지는것임

 

근데 중요한건, 나간 그 방만 List 에 들어간다

 

즉, b 방에 누가 나가면 List 에 b방만 뜨고, a 방에 누가 들어가면 List 에 a 방만 들어가져있음

 

그러면 왜 List를 써? 

내가 방에 Lobby 씬에 있을 때에 만약 누군가들이 a,b,c 방을 다 만든 상태라면

리스트에 a,b,c 가 한번에 다 불리는거임

4번방이 생성되면 4번만 리스트에 들어감

2번방이 삭제되면  2번만 리스트에 들어감

 

우리가 예전에 썼었던 RoomOption 이 RoomInfo 에 들어가는거임!

 

변화 된 정보만 있기 때문에, 따로 전체 정보를 관리 해줘야함

 

그 정보를 토대로 룸리스트 UI를 생성해야 함.

 

LobbyManager.cs 에 제일 밑에 함수를 작성해보자

 

3가지 루트로 우리는 저 방목록을 완성시킬거다.

 

처음에 뭐가됬든 누가 들어오든 누가 나가든,

변화가 일어났을 때,

 

방 목록 UI 를 전체 다 삭제하고,

따로 방 리스트를 관리하는데에서 정보를 갱신하고

다시 UI 를  한번에 다 만들거임

 

이렇게 하는 이유는,

 

방 리스트를 따로 관리 하는 이유는 위에서도 말했지만,

변화된 방만 List<RoomInfo> 에 담기기 때문이다.

전체 데이터는 관리해야함

 

뭘로? Dictionary 로

 

방 관리 기본적 툴

---

void RemoveRoomListUI() 기능 구현

 

룸 리스트 를 삭제한다는건, 

 

아까 Scroll View 에 있었던 Content 를 등록한 후,

그 안에 있는 모든 Button 컴포넌트를 불러와서, 다 파괴 하면 됨

변수 등록

이렇게 해도 됨!

 

근데, 우리는 배우는 과정이니까, foreach 문을 이용해서 구현을 하도록 해보자

버튼 리스트로 해도 되지만, foreach 로 저렇게 해줘도 됨!

 

이렇게 작성하면, Content 안에 모든 UI 를 삭제하기 완료

---

void UpdateRoomCache() 기능 구현하기

 

여기서 모든 룸 info 를 다 관리 해줄거임

여기서 딕셔너리를 써보자

---

딕셔너리 의 예

예시

 

Dictionary 는 Json 과 비슷하게

Key 값과 Value 값이 있다

 

위 예시에서는 Key 값을 string 형으로 가져오고

Value 값을 int 값으로 준다

 

그리고 키값에 value 값을 넣으면 수정 및 추가가 된다.

즉, a값에 10 이있고, 그다음 50을 넣어주면 a 값은 50 이 된다.

 

하지만, a  값에 아무것도 없었으면 그냥 추가가된다.

---

Dictionary 선언

우리는 Key 값을

(방 제목) string

Value 값을 RoomInfo 로 받아올거임

 

이렇게 roomList 를 전달 해줘야 함.

roomList 를 매개변수로 넣어준다.

 

foreach 문으로 작성 해보자

 

RoomInfo 데이터가 들어있는 Roominfo 리스트 roomList 에서

RoomInfo 형식인 info 를 하나씩 찾는거임

 

즉, 아까 말한 방에 변화가 일어날 때마다 리스트에 추가 및 변경이 일어나는데,

그게 roomList 에 일어난다.

 

그 변화가 일어날 때마다 삭제 및 추가 해서

누적된 큰 데이터를 만들예정인거임 (저 roomList 에는 변화가 일어난 방만 뜨니까)

 

이렇게 작성한건 밑에 for 문과 같은 말임!

 

이게 가장 중요한 코드임

 

변화가 일어날 때마다 변화된 방이 계속 roomList 라는 리스트에 뜨게 되는데

 

그게 뜰 때마다, roomCache 라는 딕셔너리에

같은 Key 값(방 제목)이 있는지 검사한다.

 

같은 Key 값이 있으면,

그 변화된 정보에서 또 알아봐야 함

그 룸이 삭젱되야 하는건지 아닌지, <- 이건 메소드로 알 수 있음 (info.RemoveFromList) 라는걸로

이게 true 이면 삭제한다

 

 

삭제되야하는게 아니면,

정보를 갱신해주면 된다.

 

근데

만약에 같은 키값이 없다면,roomCache 에 추가만 해주면 된다

 

나머지는 내일~