Pixel Streaming システムを操作する

クイック スタート ガイドの説明に従って Pixel Streaming システムをセットアップした場合は、実行時、システムを管理するために Unreal Engine アプリケーションのゲームプレイ コードで特別な操作を行う必要はありません。ただし、Pixel Streaming プラグインを使用すると、Pixel Streaming システムを制御および操作して特定のエフェクトを用いることができます。このページでは、このような追加オプションについて説明します。

静止画

Unreal Engine アプリケーションで、レンダリングされたすべてのフレームをメディア ストリームにエンコードするには、いくつかの欠点があります。Unreal Engine を実行しているコンピュータのリソースが消費され、それらのすべてのフレームをネットワーク経由で送信すると、帯域幅が使い果たされてしまい、使用可能な帯域幅によっては、エンコードによってレンダリング画像の品質が低下する場合もあります。

GPU リソースとネットワーク帯域幅の使用を最小限に抑えるために、Pixel Streaming プラグインのすべてのフレームのエンコードと送信を一時的に無効にすることで、接続されたクライアントに単一の静的画像を表示することができます。次に例を挙げます。次に例を示します。

• クライアントがアプリケーションとアクティブにやり取りしておらず、仮想ワールドで何も動いていない場合、何らかの変更が発生するまで、最後にレンダリングされたフレームでアプリケーションを固定したい場合。

• ロード画面、メッセージ キャプションなどの画像をクライアントに表示したい場合。

  これを可能にするために、Pixel Streaming プラグインには、エンコードの一時停止と再開に使用できるブループリント ノードがあります。これらのノードは、ブループリント エディタの [Pixel Streaming Freeze Frame]カテゴリにあります。

  

• メディア ストリームを静止画像に置き換える場合は、Freeze Frame ノードを使用します。

  

  このノードは、テクスチャ アセットへのオプションの参照を受け入れます。これを提供する場合、接続されたクライアントには、プレイヤー ウィンドウで指定したテクスチャが表示されます。提供しない場合、接続されたクライアントには、このノードを呼び出したときに Unreal Engine アプリケーションによって生成された最後のレンダリング フレームが表示されます。

• すべてのフレームのストリーミングを再開する場合は、Unfreeze Frame ノードを使用します。

  

単一のフレームまたは画像テクスチャでフリーズしても、ブラウザからの入力には影響しません。デフォルトでは、プレイヤー ページはフリーズ中にキーボード イベントおよびマウス イベントを Unreal Engine に転送します。

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

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

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

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

   画像をクリックすると拡大表示されます。

   または、より広範な例 (プレイヤーが 3 キーを押したときに応答を送信) として次があります。

   画像をクリックすると拡大表示されます。

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

           function myHandleResponseFunction(data) {
               console.warn("Response received!");
               switch (data) {
                   case "MyCustomEvent":
                       ... // 1 種類のイベントを処理する
                   case "AnotherEvent":
                       ... // 別のイベントを処理する
               }
           }
   Copy full snippet

   function myHandleResponseFunction(data) { console.warn("Response received!"); switch (data) { case "MyCustomEvent": ... // 1 種類のイベントを処理する case "AnotherEvent": ... // 別のイベントを処理する } }

3. app.js によって提供される addResponseEventListener 関数を呼び出して、リスナー関数を登録します。この関数にイベント リスナーの固有の名前と独自の関数を渡します。次に例を示します。

       addResponseEventListener("handle_responses", myHandleResponseFunction);
   Copy full snippet

   addResponseEventListener("handle_responses", myHandleResponseFunction);

4. イベント リスナーを削除する必要がある場合は、removeResponseEventListener を呼び出して同じ名前を渡します。下記は例です。

       removeResponseEventListener("handle_responses");
   Copy full snippet

   removeResponseEventListener("handle_responses");

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

Pixel Streaming イベントに応答する

Pixel Streaming システムを使用すると、Pixel Streaming セッションの存続期間中に発生する選択されたイベントに対して、アプリケーションのゲームプレイ コードが応答できるようになります。これらのイベントには、ブループリント イベントとネイティブ C++ イベントの 2 種類があります。

ブループリント イベント

これらのデリゲートには、UE5 のブループリント エディタからアクセスできます。

これらのイベントに応答するには、Pixel Streamer Delegates クラスを使用して、それらにバインドします。通常、ゲームプレイの開始時にこのバインディングを設定します。たとえば、Event BeginPlay イベントへの応答としてこれを実行できます。バインディングを設定したら、バインドされたイベントがトリガーされるたびにカスタム イベントがトリガーされます。

1. ブループリント グラフ エディタで、任意のノードの実行ピンから右にドラッグし、Pixel Streamer Delegates > Get Pixel Streamer Delegates を選択します。

   

2. Return Value から右にドラッグし、Pixel Streamer Delegates カテゴリを展開します。イベントのバインディング、およびバインディングを解除するための多くの新しいオプションが表示されます。

   

3. 応答するイベントの [Bind... (バインド...)] オプション ([Bind Event to On All Connections Closed] など) を選択します。Event 入力を持つ新しいノードを取得します。入力実行ピンを Get Pixel Streamer Delegates の出力実行ピンに接続します。

   

4. トリガーするカスタム イベントが既にある場合は、そのタイトル バーにある Output Delegate ピンを、先程作成した Bind ノードの Event 入力に接続します。それ以外の場合は、Event 入力から、左にドラッグし、Add Event > Add Custom Event を選択して、新しいカスタム イベントを作成します。

   

5. Pixel Streaming イベントに応答して実行するブループリント ロジックにカスタム イベントを接続します。

たとえば、この実装では同じブループリントで定義されたカスタム関数を呼び出して、アプリケーションを初期状態にリセットします。

C++ イベント

開発者は、これらの Pixel Streaming デリゲートに独自のハンドラを登録できます。Unreal Engine での C++ デリゲートの使用に関する具体的な詳細については、「マルチキャスト デリゲート」のドキュメントを参照してください。Pixel Streaming デリゲートを使用している簡単な例は次のとおりです。

	#include "PixelStreamingPlayerId.h"
	#include "PixelStreamingDelegates.h"

	void FExample::OnStatChanged(FPixelStreamingPlayerId PlayerId, FName StatName, float StatValue)
	{
	//TODO: 変更された統計に対して何らかの処理を実行します。
	}

	void FExample::BindToDelegates()
	{
	// OnStatChangedNative デリゲートにバインドします。
	if(UPixelStreamingDelegates* Delegates = UPixelStreamingDelegates::GetPixelStreamingDelegates())
	{
	Delegates->OnStatChangedNative.AddRaw(this, &FExample::OnStatChanged);
	}
	};
Copy full snippet

#include "PixelStreamingPlayerId.h" #include "PixelStreamingDelegates.h" void FExample::OnStatChanged(FPixelStreamingPlayerId PlayerId, FName StatName, float StatValue) { //TODO: 変更された統計に対して何らかの処理を実行します。 } void FExample::BindToDelegates() { // OnStatChangedNative デリゲートにバインドします。 if(UPixelStreamingDelegates* Delegates = UPixelStreamingDelegates::GetPixelStreamingDelegates()) { Delegates->OnStatChangedNative.AddRaw(this, &FExample::OnStatChanged); } };