Choose your operating system:
Windows
macOS
Linux
리모트 컨트롤 프리셋(Remote Control Preset) 으로 단일 패널에서 모든 UI 파라미터 혹은 함수를 수집, 정리하고 리모트 컨트롤 API 에 노출합니다. 해당 파라미터 및 변수를 리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 플러그인에서 제공하는 컴패니언 웹 애플리케이션의 위젯에 연결해 엔진을 원격으로 조종할 수 있습니다. 이 웹 애플리케이션에는 추가 코드 생성 및 포맷 없이도 인터페이스를 커스터마이징 할 수 있도록 자체 UI 에디터가 포함됩니다.
웹 애플리케이션이므로 여러 클라이언트를 동시에 실행할 수 있습니다. 한 클라이언트에서 프로퍼티를 수정하면 웹 서버를 통해 다른 클라이언트에도 전부 적용됩니다. 리얼타임 환경에서 협업형 워크플로를 구축할 때도 유용합니다.
이 페이지에서는 언리얼 에디터의 프로퍼티 및 함수를 리모트 컨트롤 API에 노출하는 법과 컴패니언 리모트 컨트롤 웹 애플리케이션의 위젯에 연결하는 법을 다룹니다.
필요 플러그인
리모트 컨트롤 프리셋 및 리모트 컨트롤 웹 애플리케이션을 시작하려면 프로젝트에 다음 플러그인을 추가하세요.
리모트 컨트롤 API
리모트 컨트롤 API(Remote Control API) 플러그인은 데이터 및 **리모트 컨트롤 프리셋**에 대한 WebSocket 연결을 주관하는 웹 서버를 제공합니다.
프로젝트에서 플러그인을 활성화하려면 아래 단계를 따르세요.
-
언리얼 에디터에서 프로젝트를 실행하세요.
-
에디터의 메인 메뉴에서 편집(Edit) > 플러그인(Plugins) 을 선택해 플러그인 창을 여세요.
-
플러그인 창에서 메시징(Messaging) 카테고리에 있는 리모트 컨트롤 API 플러그인을 찾으세요. 활성화됨(Enabled) 체크박스를 클릭하세요.
-
엔진을 재시작하세요.
리모트 컨트롤 웹 인터페이스
리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 는 NodeJS를 사용하여 컴패니언 웹 애플리케이션에 추가 코드 없이 원격으로 엔진을 조작할 수 있는 게이지, 슬라이더, 색 선택 툴 등 기본 위젯을 제공합니다.
프로젝트에 웹 애플리케이션을 연결하려면 아래 단계를 따르세요.
-
사용 중인 장치에 버전 8 이상의 NodeJS 설치 작업을 수행하세요.
-
언리얼 에디터에서 프로젝트를 실행하세요.
-
에디터의 메인 메뉴에서 편집 > 플러그인**을 선택해 플러그인** 창을 여세요.
-
플러그인 창에서 메시징 카테고리에 있는 리모트 컨트롤 웹 인터페이스 플러그인을 찾으세요. 활성화됨 체크박스를 클릭하세요.
-
엔진을 재시작하세요.
-
웹 애플리케이션이 실행되었는지 확인하세요. 에디터의 메인 메뉴에서 창(Window) > 개발자 툴(Developer Tools) > 출력 로그)(Output Log) 를 선택한 뒤, "remote control web" 필터를 적용해 다음과 비슷한 성공 로그가 출력되는지 알아보세요.
LogRemoteControlWebInterface: [성공] 리모트 컨트롤 웹 인터페이스 실행 중 - 웹앱 시작됨, 포트: 7000
프로퍼티를 리모트 컨트롤 패널 및 리모트 컨트롤 API에 노출하기
언리얼 에디터(Unreal Editor) 의 리모트 컨트롤 패널(Remote Control Panel) 에서 레벨의 다양한 오브젝트에 대한 프로퍼티를 수집하여 손쉽게 이용할 수 있습니다. 함수를 패널에 추가하고, 추가한 패널에서 호출할 수도 있습니다. 리모트 컨트롤 패널 에 노출된 프로퍼티 및 함수는 리모트 컨트롤 API 에도 노출됩니다. 작업자가 리얼타임 환경에서 조작해야 하는 항목을 쉽게 정리할 수 있습니다.
리모트 컨트롤 프리셋 을 추가하고 리모트 컨트롤 패널 을 열려면 아래 단계를 따르세요.
-
콘텐츠 브라우저(Content Browser) 에서 우클릭한 뒤, 기타(Miscellaneous) 항목을 찾아보세요. 리모트 컨트롤 프리셋 을 선택하세요.
-
리모트 컨트롤 프리셋 에셋(Remote Control Preset Asset) 을 더블 클릭해 리모트 컨트롤 패널 을 여세요.
-
편집 모드 체크박스를 클릭하세요.
-
에셋(Assets) 의 디테일 패널 을 보면 감은 눈 혹은 뜬 눈 아이콘이 있습니다.
-
눈 아이콘은 프로퍼티의 리모트 컨트롤 패널 추가 여부를 결정합니다.
-
뜬 눈 아이콘은 프로퍼티가 리모트 컨트롤 패널에 추가되었다 는 뜻입니다.
-
감은 눈 아이콘은 프로퍼티가 리모트 컨트롤 패널에 추가되지 않았다 는 뜻입니다.
-
눈 아이콘을 클릭하면 프로퍼티가 리모트 컨트롤 패널에 추가되거나 제거됩니다.
-
-
프로퍼티가 리모트 컨트롤 패널에 있으면 디테일 패널과 인터페이스가 같습니다.
-
리모트 컨트롤 프리셋 을 우클릭한 뒤, 저장 을 눌러 변경사항을 유지하세요.
리모트 컨트롤 패널 사용하기
리모트 컨트롤 패널을 정리하고 엘리먼트의 이름을 변경해 리모트 컨트롤 API의 레퍼런스를 쉽게 구분할 수 있습니다. 다음 표는 프로젝트의 용도에 맞게 패널을 커스터마이징할 수 있는 UI를 다루고 있습니다.
액션 |
UI 엘리먼트 |
설명 |
---|---|---|
그룹 생성 |
|
다수의 그룹을 생성해 비슷한 프로퍼티와 함수끼리 정리합니다. |
함수 추가 |
|
단순한 프로퍼티가 아닌 기능을 표시할 패널에 함수를 추가합니다. 함수의 파라미터를 커스터마이징하고 패널에서 실행할 수 있습니다. |
프로퍼티 또는 함수 제거 |
|
프로퍼티 혹은 함수를 패널에서 제거해 리모트 컨트롤 API에서 보이지 않도록 합니다. |
프로퍼티 초기화 |
|
프로퍼티의 값을 기본값으로 초기화합니다. |
엘리먼트 이동 |
|
패널의 엘리먼트를 끌어다 옮겨 프로퍼티, 함수, 그룹을 변경합니다. |
엘리먼트 이름 변경 |
|
프로퍼티, 함수 혹은 그룹의 이름을 변경해 레퍼런스를 명확히 하고 함수 호출을 간단하게 합니다. |
리모트 컨트롤 웹 애플리케이션 사용하기
리모트 컨트롤 패널의 프로퍼티 및 함수를 웹 애플리케이션에 연결하세요. 웹 애플리케이션은 언리얼 세션에서 실행한 리모트 컨트롤 프리셋을 읽습니다. Chrome, Firefox, Safari 브라우저를 공식 지원합니다.
웹 애플리케이션에서 프로퍼티 값을 변경하는 동안 에디터에서 변경된 내용을 보려면 편집 > 에디터 개인설정(Editor Preferences) 을 실행한 뒤, 일반(General) 의 퍼포먼스(Performance) 에서 백그라운드일 때 CPU를 덜 사용(Use Less CPU when in Background) 을 비활성화하세요.
웹 애플리케이션을 실행하고 인터페이스를 커스터마이징하려면 아래 단계를 따르세요.
-
엔진을 실행하는 동일한 장치에서 웹 브라우저를 열고 URL 127.0.0.1:7000 에 접속하세요. 리모트 컨트롤 API를 다른 장치에 표시하는 자세한 방법은 리모트 컨트롤 퀵스타트 를 참조하세요.
프로젝트에 사용할 리모트 컨트롤 웹 인터페이스 를 변경할 수 있습니다. 에디터의 메인 메뉴에서 편집 > 프로젝트 세팅… 을 선택해 프로젝트 세팅 창을 실행하세요. 프로젝트 세팅 창에서 플러그인 항목의 리모트 컨트롤 웹 인터페이스 를 선택해 해당 설정을 살펴보세요. 기본 포트를 변경할 수 있습니다.
-
페이지를 불러올 때 공백 상태인 리모트 컨트롤 애플리케이션을 살펴보세요. 웹 애플리케이션에서 탭(Tab) 을 생성해 위젯 추가를 시작하세요.
-
웹 애플리케이션은 그리드 기반입니다. 선호하는 화면 레이아웃을 구성할 수 있습니다. 오른쪽 화면에서 패널 레이아웃을 선택할 수 있습니다. 패널마다 여러 개의 위젯을 포함합니다.
-
패널 내부의 + 버튼을 클릭해 위젯 설정(Set Widget) 창을 여세요.
-
위젯 설정 창에는 프리셋에 표시된 사용 가능 프로퍼티 목록이 표시됩니다.
-
프로퍼티를 선택하세요.
-
창 오른쪽의 사용 가능 위젯(Available Widgets) 항목에는 웹 애플리케이션 UI에 속한 프로퍼티 구현에 사용되는 모든 위젯이 표시됩니다.
-
사용 가능 위젯 밑에는 최소값(Minimum) , 최대값(Maximum) 등 위젯을 추가로 커스터마이징할 수 있는 위젯 옵션(Widget Options) 항목이 있습니다.
-
-
여러 위젯을 한 패널에 모아 웹 애플리케이션 UI를 단순화할 수 있습니다. 색 선택 툴처럼 동일한 위젯 유형을 사용하는 여러 프로퍼티가 있을 경우, 동일한 위젯 인터페이스를 사용하되 위젯 목록의 프로퍼티를 선택해 변경사항이 적용될 대상을 변경할 수 있습니다.
-
웹 애플리케이션에서 여러 개의 탭을 이용할 수 있습니다. 리얼타임 환경에서 작업자를 위한 다양한 뷰를 만드는 데 도움이 됩니다.
-
탭의 라벨을 변경하고 아이콘 라이브러리에서 아이콘을 선택해 탭을 구별할 수 있습니다.
-
탭을 새 인터페이스의 시작 지점으로 사용하기 위해 복사할 수도 있습니다.
-
-
언리얼 에디터**에서 해당되는 리모트 컨트롤 프리셋**을 저장해 변경사항을 웹 애플리케이션에 저장하세요. 나중에 웹 애플리케이션을 다시 실행하면, 레이아웃이 에셋을 마지막으로 저장할 때와 동일하게 설정됩니다.
-
플레이(Play) 를 눌러 웹 애플리케이션의 편집 모드를 종료하세요.
웹 애플리케이션에서 동시에 여러 리모트 프리셋을 사용할 수 있지만, 리모트 컨트롤 프리셋 은 한 번에 하나만 열 수 있습니다. 창의 왼쪽에 사용 가능한 리모트 프리셋이 나타납니다.