Photon Unity Networking PUN 튜토리얼 따라하기 2

원문: doc.photonengine.com/ko-kr/pun/current/demos-and-tutorials/pun-basics-tutorial/lobby-ui

2 - 로비 UI | Photon Engine

 

2. 로비를 예쁘게 만들어보자

 

튜토리얼 1번을 완료한 후에 진행한다고 가정한다.

 

1. Play 버튼 만들기

 

위 버튼을 누르면 버튼이 생긴다.

 

시점을 잘 조절하면 위 처럼 나온다.

 

Hierarchy 창에서 버튼을 확인한 후, 버튼 왼편의 삼각형을 클릭해주자. 

 

그럼 이렇게 텍스트까지 나온다. 이걸 클릭 한 후, 인스펙터창을 보자

 

Text 란 안에 내용을 Play 로 변경해주자. 

그러면 버튼 안의 텍스트가 바뀐다.

 

다시 Hierarchy 창에서 Button을 눌러주자. 

 

그럼 위 그림 맨 하단처럼 On Click() 을 볼 수 있다. 그 창의 우하단에 + 버튼을 눌러보자. 

 

그럼 위 처럼 되는데, 파란색 박스로 쳐진 곳 쪽으로, Launcher 게임 오브젝트를 드래그해서 올려보자. 

위는 드래그해서 올린 모습이다. 아래는 드래그 후 마우스 버튼을 놓았을 때의 모습이다.

 

위 사진처럼, Runtime Only 우측의 No Function을 누르면 Launcher가 보이는데 그 안의 Connect를 클릭해주자.

 

그러면 위 사진 처럼 된다. 

 

그리고 Launcher.cs 스크립트에 가서 Start 함수 안에있는 Connect를 제거해주자. 

이제 스크립트와 씬 모두 저장해주자. 

 

이제 플레이 모드 진입 후, Play 버튼을 누르면 Connect가 된다.

 

2. 플레이어 이름 만들어주기

 

PlayerNameInputField.cs 컴포넌트를 만들고, 스크립트를 원문에서 붙여넣어준다. 

 

위 메뉴를 눌러주면

값을 넣을 수 있게 된다. 그리고 나서 이름을 Name InputField로 변경해주자. 

InputField의 Placeholder를 클릭한 후 인스펙터창을 보면 다음과 같은 테스트 창이 있다.

텍스트 내용을 Enter your Name으로 변경하자. 

 

그리고  Hierarchy 창에서 Name Inputfield를 선택 한 다음 PlayerNameInputField.cs 파일을 add component 기능으로 추가해주자.

 

다음으로 인스펙터창을 다시 잘 보면 아래 그림처럼 Input Field tab 안에 On Value Change(string)이 있는걸 알 수 있다. 

맨 아래 우측에 있는 + 버튼을 누르고, Name InputField 객체를 드래그해서 올려주자. (원문에서는 PlayerNameInputField 를 드래그해서 올리라고 하는데, 오타인 것으로 보인다.)  

그 다음 No Fuction 부분을 클릭하여 메뉴를 열고 다음의 루트를 따라가서 클릭해주자.

 

씬을 저장하자. 

 

그 뒤 플레이 해보면

 

위 화면과 같이 플레이어 이름을 입력할 수 있게 된다.

 

3. 연결과정도 보여주기

 

위 과정으로 Panel을 만들어주고 이름을 Control Panel로 변경해주자.

 

컨트롤 패널의 Inspector 창으로 가서 Image에 커서를 위치한뒤 마우스 우클릭을 한 후 Remove component를 수행한다.

 

Canvas Renderer에도 같은 작업을 해준다. 

 

Button과 Name InputField를 드래그해서 Control Panel로 넣어준다. 

위에서 아래 그림으로 바뀌면 성공이다.

이제 Text를 만들어 주고, 이름을 Progress Label로 설정해주자.

 

Progress Label의 인스펙터 창을 보고 위 처럼 텍스트 내용과 하단의 Alignment를 수정해주자.

 

자 이제 Control Panel과 Progress Label을 프로그램 구동과 연결시켜줄 차례이다.

 

Launcher.cs 스크립트를 열어보자. 그리고 원문의 작업을 진행하자. 

 

퍼블릭 필드는 위 처럼 만들어서 넣어주면 된다.  

 

스크립트를 저장하자. 

 

Hierarchy에서 Launcher 객체를 클릭하고 인스펙터를 확인하면 다음과 같은 내용이 나온다.  

 

컨트롤 패널과 프로그래스 라벨에 각 객체를 끌어다가 배치해주자. 

 

결과적으로 위 그림과 같아져야 한다.  

 

이제 플레이 해보자. 

 

처음에는 이렇게 나오고 플레이 버튼을 누르면 아래처럼 나온다.

 

이번 챕터는 여기까지다.