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

Unreal Engine 4.26

Unreal Engine 4.27

Unreal Engine 5.0

Unreal Engine 5.1

Unreal Engine 5.2

Unreal Engine 5.3

> プロジェクトの共有とリリース > Pixel Streaming > プレイヤー Web ページをカスタマイズする

Light Theme

Dark Theme

このベータ機能の使い方を学んでみましょう。ただ、リリース時の使用には注意してください。

ベータ機能は、機能の動作についての学習、パイプラインの計画、テストコンテンツの作成の機会を提供するものです。 実制作でベータ機能を使う場合は注意深く使用する必要があります。 まだ、リリースできる品質のパフォーマンス、安定性、各プラットフォームでのサポートについては開発中という段階だからです。アセットの後方互換性はサポートされ、これらの機能の API は安定状態です。

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

ストリームビデオとオーディオを再生する Web ぺージをカスタマイズする方法と、カスタマイズした Web ページと UE4 アプリケーション間でイベントを交換する方法を説明します。

Choose your operating system:

Windows

macOS

Linux

コンテンツ

HTML ページ要件
プレイヤーファイルの場所と URL
プレイヤー入力オプションをカスタマイズする
- ユーザー入力を無効にする
プレイヤーウィジェットスタイルをカスタマイズする
Pixel Streaming ブループリント API にアクセスする
プレイヤーページから UE4 に通信する
- emitCommand 関数を使用する
- emitUIInteraction 関数を使用する
UE4 からプレイヤーページに通信する
非アクティブの接続をタイムアウトするよう設定する

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

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 」ファイルを含める必要があります。このファイルは、ブラウザと Unreal Engine アプリケーション間の通信を処理します。サーバーからのメディアストリームを受信して表示します。必要な場合を除き、この JavaScript ファイルは変更しないでください。
```
<script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
```
同様に 「/scripts/app.js」 ファイルを含めることも強く推奨します。このファイルでは、キーボード、マウス、タッチイベントを処理するイベントリスナーが設定されます。また、プレイヤーページで利用可能な複数の関数やフックも含まれます。これらについては、このページの後のセクションで説明されています。JavaScript に関して十分な知識がある場合は、ニーズに合わせてこのファイルのコードをカスタマイズし、デフォルトのビヘイビアを変更できます。例えば、キーボード入力を無効にして、マウスとタッチイベントはそのまま動作するようにする場合は、このファイルをカスタマイズして、キーボードイベントを処理するコードを見つけてコメントアウトする必要があります。
```
<script type="text/javascript" src="scripts/app.js"></script>
```
このページには ID が「 player 」である div 要素が必要です。この要素は、UE4 アプリケーションからストリーミングされたビデオフレームに置き換えられます。
```
<div id="player"></div>
```
ページのロード時には、「 app.js 」ファイルによって提供される load 関数を呼び出す必要があります。例えば、これを実行するには onload ハンドラを <body> タグに追加します。
```
<body onload="load()">
```

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

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

Signaling and Web サーバーのルートフォルダ内に「 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 サーバーのルートフォルダに相対的なカスタム HTML プレイヤーページのファイル名に設定します。こうすることで、Signaling and Web サーバーを実行するコンピュータの IP アドレスまたはホスト名にアクセスした際に、これにアクセスできるようになります。
例えば、「myplayerpage.html」ファイルを「 Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/myfolder 」に保存する場合、「 HomepageFile 」パラメータを「 myfolder/myplayerpage.html 」に設定することで、「 http://127.0.0.1/ 」などと、URL 内にファイル名を指定しなくてもこのページにアクセスすることができます。
Signaling and Web サーバーの AdditionalRoutes パラメータを使用して、URL パスとコンピュータのローカルフォルダ間のマッピングをカスタマイズすることもできます。

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

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

「 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 が公開されています。これを使用して、プレイヤー HTML ページで送信されるカスタム UI イベントを処理して、Unreal Engine からプレイヤーページにイベントを発信することができます。

このブループリント API にアクセスするには、次の手順に従います。

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

現在の Player Controller への参照が必要な場合は、前述のとおり、 Game (ゲーム) > Get Player Controller (Player Controller の取得) ノードを使用します。
Get Component by Class ノードの出力ポートからドラッグして、 Pixel Streaming Input カテゴリを見つけます。

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

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

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

emitCommand では、コマンドのプリセットリストをゲームに送信したり、解像度を変更したり、コンソールコマンドを実行したり、エンコーダのビットレートを低減したりすることができます。下記の「 emitCommand 関数を使用する」を参照してください。
emitUIInteraction は任意の文字列や JavaScript オブジェクトをゲームに送信します。この関数を使用して、独自のカスタムコマンドをプレイヤー UI から送信します。これにゲームプレイロジック内で応答することで、アプリケーションで必要なエフェクトを生み出すことができます。下記の「 emitUIInteraction 関数を使用する」を参照してください。

emitCommand 関数を使用する

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

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 - このキーを使用して、メディアストリームの品質を制御するコマンドをエンコーダに送信します。現時点では、 BitrateReduction コマンドのみをサポートしています。この値は、利用可能な帯域幅の測定値の何 % をビデオエンコーダビットレートに割り当てるかを指定しますこの値の設定が高すぎるとネットワークが輻輳してパケットが失われることがあり、その結果レイテンシーが増加して、クライアントでビデオにアーティファクトが発生します。デフォルトではこの値は 50% に設定されています。デプロイメント時にレイテンシーおよびビデオアーティファクトの問題が生じる場合は、この値をさらに低く設定してみてください。例：
```
let descriptor = {
    Encoder: {
        BitrateReduction:20
    }
}
emitCommand(descriptor);
```

Unreal Engine コンソールコマンドには強力な権限があるため、 emitCommand 関数によりセキュリティリスクが生じることがあります。この関数を機能させるには、Unreal Engine アプリケーションを起動する際、または Unreal Editor から [Standalone Game (スタンドアローンゲーム)] オプションを使用して起動する際に、コマンドラインで -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 ノードを使用して、これらの入力を処理するように独自のカスタムイベントをバインドします。例：

このイベントは、通常はゲーム開始時に一度だけバインドする必要があります。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.Name や PlayerCharacter.Skin です。

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

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

これを設定するには、次の手順を実行します。

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

クリックしてフルサイズで表示
プレイヤーページの 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
    }
}
```
app.js で提供される addResponseEventListener 関数を呼び出すことで、リスナー関数を登録します。この関数にイベントリスナーの固有の名前と独自の関数を渡します。次に例を示します。
```
addResponseEventListener("handle_responses", myHandleResponseFunction);
```
イベントリスナーを削除する必要がある場合は、 removeResponseEventListener を呼び出して同じ名前を渡します。次に例を示します。
```
removeResponseEventListener("handle_responses");
```

より複雑なデータを渡す必要がある場合は、 Send Pixel Streaming Response ノードに渡す文字列を JSON 形式に変換できます。次に例を示します。

次に、JavaScript イベントハンドラ関数内で JSON.parse(data) を使用して文字列をデコードし、JavaScript オブジェクトに戻します。

非アクティブの接続をタイムアウトするよう設定する

Pixel Streaming のデプロイメントの際は、状況によっては一定期間非アクティブのユーザーの接続を自動的に切断したい場合があります。例えば、利用可能な Unreal Engine アプリケーションの数に制限があり、マッチメイキングを行うサーバーによってこれらのインスタンスへのアクセスが制御されている場合などは、新たな接続リクエストに対して利用可能なアプリケーションインスタンスを確保するために、非アクティブの古い接続を切断しなければならないことがあります。

Pixel Streaming プレイヤーページの設定を変更して、ユーザーがプレイヤーウィジェットと一定期間 (カスタマイズ可能) やり取りしていないこと、つまり「AFK」 (Away From Keyboard：キーボードから離れている) を検出させることができます。AFK システムによって次のような警告が表示されます。

ユーザーが引き続き応答しない場合は、AFK システムによって最終的にはセッションが切断されます。

ユーザーによりプレイヤーパネルと何らかのやり取りがあった場合、AFK タイマーはリセットされます。これには、マウスを動かしたりドラッグしたり、マウスボタンを押したり、キーボード上のキーを押したり、モバイルデバイス上でイベントをタッチしたりといったアクションだけでなく、 emitCommand および emitUIInteraction 関数で設定したカスタムインタラクションが含まれます。

AFK システムを利用するには、プレイヤーページの JavaScript 内で次の 3 つのプロパティを設定します。この設定は、「 app.js 」ファイルをロードした後に、 load 関数を呼び出す前に行ってください。


プロパティ	説明
`afk.enabled`	AFK システムでユーザーインタラクションを確認するかどうかを指定します。デフォルト値は「 `false` 」です。非アクティブな接続をタイムアウトさせるには、これを「 `true` 」に設定します。
`afk.warnTimeout`	ユーザーがキーボードから離れた状態を維持できる最大期間 (秒) を設定します。これを過ぎると、プレイヤーウィジェットに警告のオーバーレイが表示されます。デフォルト値は「 `120` 」秒、つまり 2 分間です。
`afk.closeTimeout`	「 `afk.warnTimeout` 」の期間が過ぎて、ユーザーに接続切断についての警告メッセージが発せられた後に、実際にユーザーの接続が自動的に切断されるまでの期間 (秒) を設定する変数です。途中でユーザーがプレイヤーウィジェットとやり取りした場合は切断されません。デフォルト値は「 `10` 」秒です。

オーバーレイの内容をカスタマイズする場合は、プレイヤーページで updateAfkOverlayText() 関数の定義を変更します。実装では、 afk.overlay.innerHTML プロパティを、AFK タイムアウト値を超えた場合にプレイヤーウィジェットに表示させる HTML に設定します。

タグ

Guide

Beta

Pixel Streaming

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。

調査に参加する

閉じる

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

ストリーム ビデオとオーディオを再生する Web ぺージをカスタマイズする方法と、カスタマイズした Web ページと UE4 アプリケーション間でイベントを交換する方法を説明します。

HTML ページ要件

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

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

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

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

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

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

emitCommand 関数を使用する

emitUIInteraction 関数を使用する

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

非アクティブの接続をタイムアウトするよう設定する

ストリームビデオとオーディオを再生する Web ぺージをカスタマイズする方法と、カスタマイズした Web ページと UE4 アプリケーション間でイベントを交換する方法を説明します。

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

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

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

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