Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

Pixel Streaming デモ ショーケースでは、ユーザーがデスクトップやモバイル デバイスのウェブ ブラウザでライブ ストリームを体感できるように、Unreal Engine コンテンツを設計する方法について示します。含まれるものは、以下の通りです。

• HTML プレイヤー ページ。ここでは Unreal Engine アプリケーションで生成されたメディア ストリームを再生し、エンジンをリモートでコントロールするためのカスタム UI 要素が用意されています。

• Unreal Engine プロジェクト。Pixel Streaming プラグインを使用してメディア ストリームを生成し、HTML プレイヤー ページから発行されたカスタム コマンドに対応するようにセットアップされています。

このサンプルをモデルとして使用して、Unreal Engine コンテンツと連携する独自のカスタム HTML5 プレイヤーを構築できます。

入門編

1. Epic Games Launcher の [Learn (ラーニング)] タブの Pixel Streaming ショーケースを見つけ、これを使用して、新しい Unreal Engine プロジェクトを開始します。

2. Windows エクスプローラーで使用するコンピュータのプロジェクトの場所を参照して、「 WebInterface 」フォルダを見つけます。

3. このフォルダのコンテンツを Unreal Engine インストール フォルダの「 Engine/Source/Programs/PixelStreaming/WebServers/SignallingAndWebServer/custom_html 」にコピーします。
   この「 custom_html 」フォルダが存在しない場合は、最初に作成します。

4. Unreal Editor で「 PixelStreamingDemo.uproject 」ファイルを開きます。

5. 「Pixel Streaming 入門」 ページに記載された次のプロセスを実行します。

   • プロジェクトをパッケージする、またはスタンドアローンゲームとして Unreal Editor から開始します。

   • WebRTC Proxy サーバーと Signaling and Web サーバーを開始します。

6. ウェブ ブラウザを開き、Signaling and Web サーバーでホストされている PixelDemo.htm プレイヤー ページに移動します。 例えば、以下の URL です。 http://<your-server-ip-address>/PixelDemo.htm

プレイヤー ページをコントロールする

Pixel Streaming システムが正しくセットアップされたら、サポート対象のウェブ ブラウザでカスタム`PixelDemo.htm` プレイヤー ページにアクセスし、次のセクションで説明するコントロールを使用して、実行している Unreal Engine アプリケーションで作業できます。

1. ページの左側にあるメニューで、現在のキャラクタ、スキン、環境、時刻を変更します。

2. ツールバーでは UI とビューアに対してさらにコントロールできます。

   コントロール	効果
   	左側のメニューの表示と非表示を切り替えます。
   	カメラの完全ズームイン状態と完全ズームアウト状態を切り替えます。
   720p, 1080p, 4k	サーバーで動作している Unreal Engine アプリケーションのレンダリング解像度を設定します。

   すべての GPU に 4K の解像度でビデオ フィードをエンコーディングする能力があるとはかぎりません。

   現時点では制限により、帯域幅を一定の値に制限すると、Unreal Engine アプリケーションを再起動するまで、この制限を引き上げることができません。

3. ビューア ウィジェット自体には Unreal Engine アプリケーションを直接マウスやタッチ コントロールで制御する機能が用意されています。

   コントロール	効果
   クリックしてドラッグ、またはタッチしてドラッグ	現在のキャラクタの周りをカメラが回転します。
   マウス ホイール	カメラをズームインおよびズームアウトします。
   	フルスクリーン モードに切り替えます。 Esc キーを押すと元に戻ります。

4. ページの右上にある [+] ボタンをクリックして、ストリームの追加コントロールを備えたオーバーレイの表示を切り替えます。これらの設定の多くはデフォルトの「 player.htm 」ページおよび 「入門編ガイド」 に記載されている設定と同じです。新しい設定は以下の通りです。

   コントロール	効果
   Prioritise Quality (品質の優先付け)	アクティブであるとき、Unreal Engine アプリケーションのレンダリング解像度は、HTML プレイヤー ページのプレイヤー ウィジェットのその時点のサイズに合うように自動的に調整されます。ブラウザ ウィンドウのサイズを小さくすると、プレイヤー ウィジェットのサイズも小さくなり、サーバーの Unreal Engine アプリケーションのレンダリング解像度が一致するように小さくなります。同様に、プレイヤー ページでフルスクリーン モードに入ると、Unreal Engine アプリケーションは、クライアントの画面の解像度に合うようにウィンドウをスケールアップします。
   Match Viewport Resolution (ビューポート解像度に合わせる)	アクティブであるとき、Pixel Streaming システムは、利用可能な接続の帯域幅が制限されているとき、Unreal Engine アプリケーションで生み出される秒あたりのフレーム数を自動的に制限します。 「Pixel Streaming リファレンス」 の Streamer.PrioritiseQuality 、 Streamer.LowBitrate 、 Streamer.HighBitrate および Streamer.MinFPS コンソール コマンドの説明を参照してください。

カスタム UI イベントを理解する

カスタム HTML プレイヤー ページ「 PixelDemo.htm 」は Pixel Streaming の Signaling and Web サーバーにより提供される「 scripts/app.js 」ファイルを使用して、マウス、キーボード、タッチ イベントをキャプチャして、Unreal Engine アプリケーションに中継します。さらに、一部の追加機能に独自のカスタム「 PixelDemo.js 」ファイルを使用します。

プレイヤー ページの多くの UI 要素は emitUIInteraction() 関数を呼び出すことにより実装され、異なる情報を Unreal Engine アプリケーションに渡します。内部での UI の各部のしくみを理解する方法

1. まず、「 PixelDemo.htm 」ファイルで理解したい UI アイテムを見つけ、どのボタンが押されたときに、どの JavaScript 関数がトリガーするように設定されているのかを確認にします。 例えば、左側のメニューの各アイテムで onConfigButton() という関数をトリガーし、2 つの数値を渡します。

   <li>
       <a href="#" onclick="onConfigButton(2,1)">Fortress</a>
   </li>

2. 「 PixelDemo.js 」ファイルの関数の定義を探します。 例えば、 onConfigButton() 関数はこれらの 2 つの数値を JavaScript オブジェクトの Category および Item フィールドにそれぞれ書き込み、JavaScript オブジェクトを emitUIInteraction() 関数に渡します。

   function onConfigButton(category, item) {
       let descriptor = {
           Category: category,
           Item: item
       };
       emitUIInteraction(descriptor);
       console.log(descriptor);
   }

3. Unreal Engine プロジェクトで、これらのイベントは Blueprints/Pawn/Orbit_Controller クラスにより応答します。 このクラスをダブルクリックして、イベント グラフに開きます。

4. Bind JSON Events 領域で、 emitUIInteraction() が接続ブラウザで呼び出されるたびに、 OnJSONEvent イベントのハンドラとして、 Bind Event to OnPixelStreamingInputEvent ノードを登録する方法がわかります。

   クリックしてフルサイズで表示

5. OnJSONEvent イベントがトリガーされるたびに、ブループリントは Get Json String Value を呼び出し、プレイヤー ページにより、 emitUIInteraction() 関数に渡された JavaScript オブジェクトに格納されたキーと値をチェックします。これらの値を使用してトリガーする他のイベントの種類を決定します。 例えば、イベントが Category フィールドに含まれる入力を受け取るとき、 Change Config Option イベントを呼び出します。

   クリックしてフルサイズで表示

   このイベントは Category フィールドの値をチェックして、キャラクタ、スキン、環境、時刻を変更するかどうかを決定するためにこの値を使用します。

   クリックしてフルサイズで表示

   これらのイベントのそれぞれで Item 値をチェックして、キャラクタ、スキン、環境、時刻のどのタイプをアクティブ化するかを決定します。

   クリックしてフルサイズで表示

Prioritise Quality (品質の優先付け) および Match Viewport Resolution (ビューポート解像度に合わせる) など、ページの右上にあるオーバーレイのコントロールは、少し動作が異なります。「 app.js 」ファイルは、ロードされたとき、イベント リスナーをこれらの HTML 要素に追加します。ユーザーがこれらの要素の 1 つを有効または無効にすると、「 app.js 」ファイルのリスナー関数は変更に直接対応するようにトリガーされます。