※이 기사는 UE4 PixelStreaming 가이드(도입편)의 계속입니다. 꼭 꼭 봐주세요.

UE4.21에서 EarlyAccess가 된 PixelStreaming은 웹상의 UI에서 서버의 UE4 앱을 조작 할 수 있습니다.
실제로 키보드와 마우스 입력은 항상 전송되며 서버 측에서 실행됩니다.

하지만 그런 조작으로는 조금 웹 시스템에 캡처하기가 어렵습니다.
그리고, 전체 화면에 UE4의 플레이어가 표시될 뿐이라고 하는 것도 조금 좋지요?
그래서 웹 시스템과의 연계를 쉽게하기 위해 UI를 사용자 정의하는 방법에 대해 설명합니다.

검증 환경

UE4 PixelStreaming 가이드(도입편)과 동일

참고 링크

UE4 측 설정

이번 테스트용 BP의 전체 이미지입니다.
(ThirdPersonTemplate을 기반으로합니다)

GameMode 쪽이 여러가지 편리함이 좋기 때문에, GameMode에 처리를 썼습니다


WebUI 측에서 보낸 이벤트는 OnPixelStreamingInputEvent라는 DelegateEvent를 통해 UE4 앱으로 전달됩니다.
여기에 붙인 이벤트의 인수 Descriptor에는 WebUI 측으로부터 송신 된 정보가 포함되어 있습니다 (String 또는 Json 문자열)

변수 Descriptor의 내용에 따라 처리를 분기합니다.
덧붙여 PixelStreamingInputComponent로 설정되어 있는 Json 인터페이스로부터는 String 밖에 취할 수 없기 때문에, 그 외의 값을 원할 때는 스스로 Validation 을 실시할 필요가 있습니다

WebUI 측 설정

WebUI 측은 자바 스크립트로 정보를 보냅니다.

지난번과 같이 설정하면 PixelStreaming/WebServers/SignallingWebServer 폴더를 복사하여 배치했다고 생각합니다.
복사하지 않은 경우 복사하여 가져와주세요.

그 중 player.htm은 PixelStreaming에 표시되는 웹 페이지의 소스입니다.

우선 버튼을 추가합시다.

player.htm

    <button type="button" onclick="execPrintString('Hello PixelStreaming');">Hello</button>

그런 다음 body 뒤에 스크립트를 추가합니다.
이 스크립트의 함수 emitUIInteraction 인수로 주어진 Json과 문자열은 BP 측 descriptor 인수로 전달됩니다.

player.htm

    <script type="text/javascript">
        function execPrintString(text) {
            var descriptor = {
                Command: 'PrintString',
                Value: text
            }

            emitUIInteraction(descriptor);
        }
    </script>

동작 점검

여기까지 제대로 되어 있으면, 이미지와 같은 구성이 되어 있을 것입니다
나머지는 앱을 Standalone 또는 Packaging하여 시작하고 버튼을 눌러보고 동작을 확인합시다.
PrintString 노드가 실행되어야 합니다.


이후에는 이것을 참고로 WebUI 측과 UE4 측에서 각각 원하는 요소를 추가해 갈 뿐입니다
꽤 쉬울까요?

덧붙여 이번은 Event를 송신했습니다만, 그 밖에도 콘솔 커멘드를 송신하는 함수도 있으므로, 상당히 자유도가 높습니다

작례

PixelStreaming의 UI 커스텀 결과를 동영상으로 해 보았다. 뒤에서 움직이고 있는 것이 서버측의 프로세스. HTML5의 지식이 있으면 여러가지 커스텀이 가능합니다 #위 4 #UE4Study 피 c. 라고 r. 코 m/KQ2W 응쿠 GH — 스미자키 타츠야 (@T_Sumisaki)