본 포스트는 베르님의 Make the 어몽어스를 정리한 포스트입니다.
https://www.youtube.com/watch?v=ISSCUVEzjq8&list=PLYQHfkihy4Aw6QjsZqwwbD4ihpwvm7N0U&index=4
1. 리소스 다운로드
이번 시간에는 전반적인 온라인 UI 구성에 대한 내용을 정리해보겠습니다. 먼저 베르님이 공유해주신 리소스를 다운 받아 import 시켜줍니다.
https://drive.google.com/file/d/1J6sa6V99Dn-yMypcX9f5sV-om0mYM218/view
UI / Online UI / Sprites
Main Menu UI 게임 오브젝트는 잠시 비활성화 시킵니다.
Hierarchy 창에서 create empty를 통해 새로운 오브젝트를 만든 다음 이름을 Online UI로 설정합니다. 그리고 해상도 변경 고려를 위해 앵커를 stretch-stretch로 설정한 후 left, right, top, bottom을 모두 0으로 맞춥니다.
2. 닉네임 입력 필드
Hierarchy 뷰에서 Online UI 게임 오브젝트를 우클릭하여 UI>Input Field를 선택하여 입력 필드를 생성합니다.
다음으로 이전에 다운받았던 Sprites 폴더의 pattern005를 이미지 소스로 설정한 후 사이즈와 위치를 적당히 맞춰줍니다.
다음으로 Text 부분에서 글자 색상과 크기를 변경하고 가운데 정렬을 해준 다음 PlaceHolder에 들어있는 글자를 지웁니다. 추가로 게임을 실행 시킨 후 사용자가 입력할 수 있는 글자 수의 제한을 주기 위해 InputField에서 Character Limit을 설정합니다.
3. 방 만들기 및 입장 UI 배치
방 만들기 UI는 다음과 같이 구성되어 있습니다.
- 이미지 (원): 이미지 소스에 이번에 다운 받은 Sprites에서 해당하는 이미지를 설정한 후 크기를 조정합니다.
- 이미지 (직선): 추가 변경 없이 크기와 위치를 조정합니다.
- Text: HOST를 입력하고 color를 흰색으로 변경한 후 크기와 위치를 조정합니다.
- 버튼: 이전에 사용하였던 Sprites 폴더에서 Pattern001을 이미지 소스에 적용시키고, Text를 '방 만들기'로 변경한 후 크기와 위치를 조정합니다.
다음으로 Hierarchy 창에서 Host를 Duplicate한 다음 이미지와 text, button을 변경하여 방 입장에 관련된 UI를 배치합니다.
(+ 추가로 원래 게임에서는 방 코드를 입력하여 방에 입장하는 방식을 사용하는데, 이는 호스트의 IP 주소와 같은 민감한 정보를 숨기기 위한 방법입니다. 하지만 이 방식은 별도의 서버가 필요하므로, 로컬 서버의 고정된 포트를 이용해 접속하도록 구현합니다.)
마지막으로 뒤로가기 버튼을 추가한 후 Hierarchy 창에서 모든 버튼을 선택하여 Highlighted Color를 초록색으로 변경해줍니다.
4. 메인 메뉴 UI에서 온라인 UI 연결하기
지금까지 온라인 UI 배치가 모두 끝났습니다. 이제 메인 메뉴에서 온라인 UI로 넘어가기 위한 연결을 할 차례입니다.
먼저 온라인 UI를 비활성화하고 다시 메인 메뉴 UI를 활성화합니다. 메인 메뉴 UI에서 온라인 버튼을 찾아 누른 다음 새 On Click() 이벤트를 두 개 넣어줍니다. 그리고 첫 이벤트에는 Main Menu UI 비활성화를 나머지 이벤트에는 Online UI 활성화시키도록 만듭니다.
동일한 방식으로 Online UI에 있는 뒤로가기 버튼에는 On Click() 이벤트에 반대로 Main Menu UI 활성화 이벤트와 Online UI 비활성화 이벤트를 추가해줍니다.
여기까지 설정을 한 후 Main menu UI만을 활성화 시킨 후 게임을 실행해보면 정상 작동하는 것을 확인할 수 있습니다.
