Language:
Page Info
Engine Version:

プレイヤー Web ページをカスタマイズする

Pixel Streaming の Signaling and Web サーバーにはサンプル プレイヤー ページが用意されており、Unreal Engine アプリケーションからメディアをストリームして、マウス、キーボード、タッチ イベントをアプリケーションに送り返すように設定されています。(手順については、「Pixel Streaming 入門NEW! 」を参照) ニーズに合うようであれば、このデフォルト プレイヤー ページをそのまま使用できます。 

JavaScript や HTML など Web テクノロジーに関する十分な知識があり、独自の工夫を取り入れたい場合は、プレイヤー ページをカスタマイズして、Unreal Engine のコンテンツをリモートから操作する独自のカスタム UI を作成できます。ゲームプレイ イベントのトリガーやそれへの応答、Unreal Engine の動作をコントロールするコンソール コマンドの発行など、多くの操作を実行できます。

デフォルト プレイヤー ページをベースとして独自のカスタム プレイヤー ページを作成することをお勧めします。このページは Unreal Engine インストール フォルダの「Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/player.htm」にあります。このページに記載されている情報を読むことで、ページを拡張してプロジェクトのゲームプレイ ロジックと連携させる方法を把握できます。

デフォルト プレイヤー ページ

HTML5 UI でカスタマイズしたプレイヤー ページ

HTML ページ要件

カスタム HTML プレイヤー ページでは、いくつかの最低限の要件に従う必要があります。

  • /scripts/webRtcPlayer.js」ファイルを含める必要があります。このファイルはブラウザと WebRTC Proxy サーバー間の通信を処理します。サーバーからのメディア ストリームを受信して表示します。必要な場合を除き、この JavaScript ファイルは変更しないでください。

    <script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
  • /scripts/app.js」ファイルを同様に含めることを強くお勧めします。このファイルでは、キーボード、マウス、タッチのイベントを処理するイベント リスナーが設定されます。このページの以下のセクションで説明するように、プレイヤー ページで利用可能な複数の関数やフックも含まれます。JavaScript に関して十分な知識がある場合は、ニーズに合わせてこのファイルのコードをカスタマイズして、デフォルトの動作を変更できます。例えば、キーボード入力を無効にして、マウスとタッチ イベントはそのまま動作するようにする場合は、このファイルをカスタマイズして、キーボード イベントを処理するコードを見つけてコメントアウトする必要があります。

    <script type="text/javascript" src="scripts/app.js"></script>
  • このページでは ID が playerdiv 要素が必要です。この要素は、WebRTC Proxy サーバーからストリームされたビデオ フレームで置き換えられます。

    <div id="player"></div>
  • ページのロード時には、「app.js」ファイルにより提供される load 関数を呼び出す必要があります。例えば、これを実行するには、onload ハンドラを <body> タグに追加します。

    <body onload="load()">

プレイヤー ファイルの場所と URL

カスタム HTML プレイヤー ページを配置する場所と、クライアント ブラウザからアクセスする方法についてオプションがいくつかあります。

  • Signaling and Web サーバーの「root」フォルダ内に「custom_html」というフォルダを作成し、このフォルダ内にカスタム HTML プレイヤー ページを配置できます。Signaling and Web サーバーが動作するコンピュータの IP アドレスまたはホスト名にこのファイル名を追加することで、アクセスできるようになります。 例えば、「custom_html/myplayerpage.html」というファイルは http://127.0.0.1/myplayerpage.html でアクセスできます。

  • Signaling and Web サーバー用の「HomepageFile」パラメータをカスタマイズして、そのパスを、Signaling and Web サーバーの「root」フォルダに対して相対的なカスタム HTML プレイヤー ページのファイル名に設定できます。こうすることで、Signaling and Web サーバーが動作しているコンピュータの IP アドレスまたはホスト名にアクセスした際に、これにアクセスできるようになります。 例えば、ファイルを「Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/myfolder/myplayerpage.html」に保存する場合、「HomepageFile」パラメータを「myfolder/myplayerpage.html」に設定すると、URL にファイル名を指定することなく、ページにアクセスできます。http://127.0.0.1/

  • Signaling and Web サーバーの「AdditionalRoutes」パラメータを使用して、URL パスとコンピュータのローカル フォルダのマッピングをカスタマイズできます。

これらのパラメータの詳細については、「Pixel Streaming リファレンスNEW! 」も参照してください。

プレイヤー入力オプションをカスタマイズする

app.js」ファイルにはいくつかの JavaScript コンフィギュレーション パラメータが用意されていて、カスタム プレイヤー ページでオーバーライドすることで、プレイヤー ウィジェットがユーザー入力に相互に応答する方法をコントロールできます。inputOptions オブジェクトでは次のプロパティが公開されています。

プロパティ

デフォルト

説明

controlScheme

ControlSchemeType.LockedMouse

プレイヤーがウィジェットとやりとりする際に、プレイヤー ウィジェットがマウスをキャプチャし、ロックするかどうかを指定します。以下の値を受け入れます。

  • ControlSchemeType.LockedMouse - このコントロール スキームがアクティブであるとき、プレイヤー ウィジェットをクリックすると、マウス カーソルをキャプチャしてロックします。その後のマウスの動きは、Unreal Engine アプリケーションの入力コントローラーに迅速に渡されます。これにより、通常、ユーザーはマウスをドラッグするだけで、カメラを移動し回転できます。プレイヤー ウィジェットのコントロールからカーソルを解放するには、Esc キーを押します。

  • ControlSchemeType.HoveringMouse - このコントロール スキームがアクティブな場合は、マウス カーソルがプレイヤー ウィジェットの上に置かれます (それ以上の操作は行われません)。マウスの動きを Unreal Engine アプリケーションの入力コントローラーに送信するために、ユーザーはマウスの左ボタンをクリックしたままにする必要があります。

suppressBrowserKeys

true

この設定が有効であるとき、プレイヤー ウィジェットはファンクション キー (F1 から F12) および Tab キーを捉え、これらのキープレス イベントを Unreal Engine アプリケーションに渡します。これによって、ブラウザでこれらのキー操作に対する通常の処理が行われないようになります。 例えば、この設定がアクティブであると、F5 を押しても、ブラウザのプレイヤー ページが更新されないということです。代わりに、このイベントが Unreal Engine アプリケーションに渡され、一般的な機能である、シェーダの複雑さを可視化するビューの切り替えが実行されます。

fakeMouseWithTouches

false

このオプションが有効な場合、スマートフォンやタブレットなどタッチ スクリーンのあるデバイスでユーザーがストリームを表示すると、Unreal Engine アプリケーションにより、シングルフィンガー タッチ イベントがマウス クリック イベントおよびドラッグ イベントとして解釈されます。この設定を有効にすると、モバイル デバイスのユーザーは Unreal Engine アプリケーションを部分的にコントロールできます。アプリケーションの入力コントローラーが特にタッチ入力イベントを処理しない場合でもこのようなコントロールが可能です。

次のようにコード ブロックに含めることで、これらの値をプレイヤー ページで設定できます。「app.js」ファイルをページにロードした後、load 関数を呼び出す前に、このコードを必ず実行してください。

<script>
inputOptions.controlScheme = ControlSchemeType.HoveringMouse;
inputOptions.fakeMouseWithTouches = true;
</script>

ユーザーの入力を無効にする

1 つ以上のタイプの入力デバイスに対してユーザー入力を完全に無効にするには、プレイヤー ページの JavaScript 環境で次の関数を空の実装でオーバーライドします。

  • registerHoveringMouseEvents - inputOptions.controlScheme を ControlSchemeType.HoveringMouse に設定すると、すべての入力マウス イベントが無効になります。

  • registerLockedMouseEvents - inputOptions.controlScheme を ControlSchemeType.LockedMouse に設定すると、すべての入力マウス イベントが無効になります。

  • registerTouchEvents - モバイル デバイスとタブレットでタッチ イベントが無効になります。

  • registerKeyboardEvents - すべてのキーボード イベントが無効になります。

例えば、JavaScript の次のブロックをプレイヤー HTML ページに含めると、すべての入力を無効にできます。前に示したように、「app.js」ファイルをページにロードした後、load 関数を呼び出す前にこのコードを実行します。

<script>
registerHoveringMouseEvents = function() {}
registerLockedMouseEvents = function() {}
registerTouchEvents = function() {}
registerKeyboardEvents = function() {}
</script>

1 つ以上のタイプの入力をアクティブのままにするには、対象の入力タイプに対応する行をコメントアウトまたは削除します。

プレイヤー ウィジェット スタイルをカスタマイズする

カスタム HTML プレイヤー ページで Pixel Streaming プレイヤー ウィジェット、id="player"<div> 要素を定義しておきます。標準 HTML と CSS メソッドを使用して、このウィジェットにスタイリングを追加できます。

ただし、ウィジェットのサイズを初期化し直す必要がある場合もあります。通常、これが起きるのは、ブラウザ ウィンドウのサイズが変更された場合 (ウィジェットが自動的に利用可能なスペースを埋めるように設定されている場合)、または入力ビデオ ストリームの解像度が更新された場合です。これが起きるとき、プレイヤー要素の style 属性は新しい値で上書きされます。つまり独自の HTML や JavaScript で設定した値を上書きする可能性があります。

これを回避するために、styleAdditional と呼ばれる特別なグローバル変数にカスタム CSS 値を設定できます。app.js がプレイヤーのサイズを変更し、スタイルをクリアする必要がある場合は常に、styleAdditional 変数に設定した値が、プレイヤー要素に割り当てられる新しいスタイル属性の最後に追加されます。例えば、次の値を設定すると、ユーザーがマウスをプレイヤー ウィジェットの上に置いたときに、マウス カーソルが手の形に変更されます。

styleAdditional = 'cursor:grab; cursor:-moz-grab; cursor:-webkit-grab';

Pixel Streaming ブループリント API にアクセスする

Unreal Engine 内で動作する Pixel Streaming プラグインはブループリント API を公開します。この API はゲームプレイ ロジックで使用して、プレイヤー HTML ページで送信されるカスタム UI イベントを処理し、Unreal Engine からプレイヤー ページにイベントを発信できます。

このブループリント API にアクセスする方法

  1. スタートアップで、Pixel Streaming プラグインは常にコンポーネントを現在の Player Controller に追加します。Player Controller から Actor (アクタ) > Get Component by Class (クラスごとにコンポーネントを取得) ノードを使用して取得できます。Component Class (コンポーネント クラス) 入力をクリックして、リストで PixelStreamingInputComponent を探します。 PixelStreamingInputComponent

    現在の Player Controller への参照が必要な場合は、前に示したとおり Game (ゲーム) > Get Player Controller (Player Controller の取得) ノードを使用します。

  2. Get Component by Class ノードの出力ポートからドラッグして、Pixel Streaming カテゴリを検索します。

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

プレイヤー ページから UE4 に通信する

app.js」ファイルには 2 つの JavaScript 関数が用意されています。HTML プレイヤー ページで呼び出して、ユーザーがイベントとコマンドをブラウザから Unreal Engine アプリケーションに送信できます。

  • emitCommand では、コマンドの事前設定リストをゲームに送信したり、解像度を変更したり、コンソール コマンドを実行したり、エンコーダのビットレートを低下したりすることができます。以下の「emitCommand 関数を使用する 」を参照してください。

  • emitUIInteraction は任意の文字列や JavaScript オブジェクトをゲームに送信します。この関数を使用して、独自のカスタム コマンドをプレイヤー UI から送信します。これにより、ゲームプレイ ロジックで応答して、アプリケーションで必要なエフェクトを生み出すことができます。以下の「emitUIInteraction 関数を使用する 」を参照してください。

emitCommand 関数を使用する

emitCommand 関数を呼び出す際は、関数に JavaScript オブジェクトを渡す必要があります。このオブジェクトには、次の文字列の 1 つに一致するキーを含む必要があります。

  • ConsoleCommand - このキーを使用して、コンソール コマンドをリモート Unreal Engine アプリケーションで実行します。このキーの値は、実行するコマンドと必要なパラメータを含む文字列です。例:

    let descriptor = {
        ConsoleCommand:'stat fps'
    }
    emitCommand(descriptor);
  • Resolution - このキーを使用して、Unreal Engine アプリケーションのレンダリング解像度をリセットします。このキーの値は Width および Height プロパティを含むオブジェクトです。例:

    let descriptor = {
        Resolution:{
            Width:1024,
            Height:768
        }
    }
    emitCommand(descriptor);
  • Encoder - このキーを使用して、エンコーダにメディア ストリームの品質をコントロールするコマンドを送信します。現時点では次の 1 つのコマンドをサポートしています。BitrateReductionこの値は、利用可能な帯域幅の測定値の何 % をビデオ エンコーダ ビットレートに割り当てるかを指定します。この値の設定が高すぎるとネットワークが輻輳し、パケットが失われることがあります。その結果、レイテンシーが増えて、クライアントでビデオにアーティファクトが発生します。デフォルトではこの値は 50 パーセントに設定されています。デプロイメントでレイテンシーとビデオ アーティファクトの問題が検出される場合は、この値をさらに小さくしてみてください。例:

    let descriptor = {
        Encoder:{
            BitrateReduction:20
        }
    }
    emitCommand(descriptor);

Unreal Engine コンソール コマンドには強力な権限があるため、emitCommand 関数によりセキュリティ リスクが生じることがあります。この関数を機能させるには、Unreal Engine アプリケーションを起動する際、または Standalone Game オプションで Unreal Editor から起動する際に、コマンドラインで「-AllowPixelStreamingCommands」パラメータを指定する必要もあります。

emitUIInteraction 関数を使用する

emitUIInteraction 関数を呼び出す際に、関数に単一の文字列または JavaScript オブジェクトを渡すことができます。例:

emitUIInteraction("MyCustomCommand");

または

let descriptor = {
    LoadLevel:"/Game/Maps/Level_2"
    PlayerCharacter:{
        Name:"Shinbi"
        Skin:"Dynasty"
    }
}
emitUIInteraction(descriptor);

JavaScript オブジェクトを渡す場合、emitUIInteraction 関数はそれを内部で JSON 文字列に変換します。続いて、結果の文字列が Unreal Engine アプリケーションの Pixel Streaming プラグインに渡されます。これにより、入力コントローラーにイベントが発生します。アプリケーションのゲームプレイ ロジックで、Bind Event to OnPixelStreamingInputEvent ノードを使用して、独自のカスタム イベントをこれらの入力を処理するようにバインドします。例:

通常は、このイベントをゲーム開始時に 1 回バインドする必要があります。Unreal Engine アプリケーションのインスタンスに接続されたプレイヤー HTML ページが emitUIInteraction 関数を呼び出すたびに、カスタム イベントが自動的に呼び出されます。emitUIInteraction に渡される入力は関係ありません。

割り当てるカスタム イベント (例えば、前の画像にある UI Interaction ノード) には Descriptor と呼ばれる出力があります。これは、emitUIInteraction 関数によって Unreal Engine アプリケーションに送信された文字列を取得する際に使用できます。その値を使用して、emitUIInteraction が呼び出されるたびにゲームプレイ コードが応答する方法を決定できます。

例えば、次のブループリントは emitUIInteraction に対する入力が文字列「MyCustomCommand」を含むかどうかを確認するためにテストし、イベントを処理するためのカスタム関数を呼び出します。

元の JavaScript オブジェクトを emitUIInteraction に渡す場合、Pixel Streaming > Get Json String Value (JSON 文字列値の取得) ノードで JSON オブジェクトからキーの値を取得できます。例えば、次のブループリントでは LoadLevel というキーをテストします。そのキーが存在する場合は、そのキーによってイベントを処理するためにカスタム関数が呼び出されます。

ネスト構造のキーを取得する必要がある場合、JavaScript で一般的なドット記法がキーで使用されます。例えば PlayerCharacter.NamePlayerCharacter.Skin です。

UE4 からプレイヤー ページに通信する

接続されたすべてのプレイヤー HTML ページにカスタム イベントを発信するように、Unreal Engine アプリケーションを設定できます。これらには、プレイヤーの JavaScript 環境で応答できます。これにより Web ページ UI をゲームプレイ イベントに応じて変更できます。

設定方法

  1. 使用する Unreal Engine アプリケーションで、イベントをプレイヤー ページに発信する場合は常に、Pixel Streaming > Send Pixel Streaming Response (Pixel Streaming 応答を送信) ノードを使用します。プレイヤー ページに発生したイベントの内容を示すには、ノードにカスタム文字列引数を指定します。

  2. プレイヤー ページの JavaScript で、ページが Unreal Engine アプリケーションから応答イベントを受信するたびに、起動されるカスタム イベント ハンドラ関数を記述する必要があります。Send Pixel Streaming Response ノードにより送信された、オリジナルの文字列引数を渡します。例:

    function myHandleResponseFunction(data) {
        console.warn("Response received!");
        switch (data) {
            case "MyCustomEvent":
                ...// handle one type of event
            case "AnotherEvent":
                ...// handle another event
        }
    }
  3. app.js で提供される addResponseEventListener 関数を呼び出すことで、リスナー関数を登録します。この関数にイベント リスナーの固有の名前と独自の関数を渡します。例:

    addResponseEventListener("handle_responses", myHandleResponseFunction);
  4. イベント リスナーを削除する必要がある場合は、removeResponseEventListener を呼び出して同じ名前を渡します。例:

    removeResponseEventListener("handle_responses");

より複雑なデータを渡す必要がある場合は、Send Pixel Streaming Response ノードに渡す文字列を JSON 形式にフォーマットできます。例: JSON を使用した Pixel Streaming 応答の送信 次に、JavaScript イベント ハンドラ関数で JSON.parse(data) を使用し、文字列をデコードして JavaScript オブジェクトに戻します。