[7월 21일]
● UI 에디터의 구성
| UI 에디터 요소 | 설명 |
| 모델 리스트 | * 메이커에서 제공하는 다양한 UI Preset 활용 가능 |
| UI 경로 정보 | * 선택된 UI Entity의 경로 정보를 얻어오는 기능 |
| 캔버스 | * UI 엔티티의 배치 및 편집을 작업하는 공간 * (실행 시 캔버스에 배치된 레이어대로 화면에 출력) |
| 기본 도구 | * 이미지 & 버튼 등의 UI Entity 배치 가능 |
| UI Group 편집창 | * UI Group의 선택 / 추가 / 삭제 기능 제공 |
- UI Entity를 위해 UI를 편집하기 위해서는 가장 먼저 조작할 UI Entity가 필요하다.
[UI Entity 생성법]
- 기본 UI 모델을 선택해 배치하는 방법
- UI Preset을 활용하는 방법
● 기본 UI Entiy
- 기본 UI Entity는 기본 도구를 통해 배치할 수 있다.
- 이미지, 버튼, 스크롤뷰, 텍스트, 입력텍스트의 5가지 요소가 존재한다.
- 각 Entity들은 해당 요소를 포함하는 Component를 가지고 있다.
- 각 Entity를 조합하여 특정 기능을 수행하는 UI 제작이 가능하다.
| UI 모델 이름 | 기능 설명 | 포함된 컴포넌트 |
| 이미지 | * UI에 원하는 이미지를 출력합니다. * 아이콘이나 UI창 이미지에 활용됩니다. |
|
| 버튼 | * 클릭 또는 터치 시 특정 액션이나 기능을 수행하도록 합니다. |
|
| 스크롤뷰 | * 많은 양의 동일한 성질의 정보나 기능들을 리스트 형태 또는 그리드 형태로 정렬합니다. * ex) 인벤토리, 상점 등 |
|
| 텍스트 | * UI에 텍스트를 띄울 수 있습니다. |
|
| 입력 텍스트 | * 게임 실행 중 유저가 텍스트를 입력할 수 있습니다. * ex) 검색 창, 아이디/비밀번호 입력 창 등 |
|
● UI Preset
- UI Preset은 자주 사용하는 UI들, 스크립트가 포함되어 있다.
● 스크립트를 이용한 UI Entity 제어
- UI Entity를 생성했다면 UI Entity에 접근하여 Entity를 제어해야 한다.
- UI Entity는 월드에서의 Entity로의 접근법과 동일하게 접근할 수 있다.
- 클라이언트 공간에서만 존재하는 UI 엔티티는 서버에서의 접근이 불가능하다.
- 따라서 UI Entity 또는 Entity의 Component를 받아올 경우 꼭 클라이언트에서만 참조해야 한다.
● 상황과 조건에 따른 UI 노출 처리
- UI Entity는 화면의 입출력을 담당하는 Entity이기에 상황과 조건에 따라 UI를 띄우거나 숨길 수 있어야 한다.
- Entity 함수인 setEnable 을 통해 알림 팝업 및 토스트 메시지를 띄우는 기능을 구현할 수 있다.
- 여러 개의 토스트 메시지를 한 번에 띄우거나 숨겨야 하는 경우 Entity의 노출 처리를 효율적으로 관리할 수 있는 계층구조를 활용할 수 있다.
● UI Group 활용 방법
- MOD는 UI의 효율적인 관리를 위해 UI Group으로 연관 기능이 있는 UI 엔티티끼리 묶어 관리한다.
- UI Group의 노출 및 숨김 역시 SetEnable으로 설정한다.
- UI Group의 상시 노출을 설정하고자 하는 경우에는 DefaultShow 속성의 값을 true로 설정해준다.
● UITransformComponent
- 배치한 텍스트 박스의 위치와 크기를 설정할 수 있음
● SpriteGUIRendererComponent
- 텍스트 박스의 배경색, 배경, 리소스 경로 등 텍스트 박스를 예쁘게 꾸며볼 수 있다.
● 텍스트 박스에 이미지 추가하기
회고 : 게임 구현도 중요하지만, UI 구현 역시 상당히 중요하다는 것을 느낄 수 있는 시간이었다.
*해당 게시글은 Supporters Hackathon 참여자에게 제공되는 MOD 학습 강의와 기본 학습 교안의 내용을 기반으로 작성되었음을 알립니다.
