Pixel Streaming システムを操作する

クイック スタート ガイド に説明されているように、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 ノードを使用します。

  

  このノードは、Texture アセットへのオプションの参照を受け入れます。これを提供する場合、接続されたクライアントには、プレイヤー ウィンドウで指定したテクスチャが表示されます。提供しない場合、接続されたクライアントには、このノードを呼び出したときに 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 キーを押したときにレスポンスを送るものです)。

クリックして画像を拡大

1. プレイヤー ページの 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": ... // 別のイベントを処理します } }

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

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

   addResponseEventListener("handle_responses", myHandleResponseFunction);

3. イベント リスナーを削除する必要がある場合は、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 イベントへの応答としてこれを実行できます。バインディングを設定したら、バインドされたイベントがトリガーされるたびにカスタム イベントがトリガーされます。

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

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

   

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

   

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

   

4. 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); } };