Pixel Streaming システムを操作する

Unreal Engine アプリケーションで、ランタイム時に 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]カテゴリにあります。

    Pixel Streaming Freeze Frame functions

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

    Freeze Frame node

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

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

    Unfreeze Frame node

単一のフレームまたは画像テクスチャでフリーズしても、ブラウザからの入力には影響しません。デフォルトでは、プレイヤー ページはフリーズ中にキーボード イベントおよびマウス イベントを 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":
                    ... // 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 形式に変換できます。次に例を示します。

Send Pixel Streaming response using JSON

Pixel Streaming イベントに応答する

Pixel Streaming システムは、アプリケーションのゲームプレイ コードが Pixel Streaming セッションの存続期間中に発生する選択されたイベントに応答する方法を提供します。これらのイベントはブループリントと C++ と 2 種類あります。

ブループリント イベント

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

イベント

説明

On All Connections Closed

Unreal Engine アプリケーションのこのインスタンスが Cirrus Signalling Server に接続するときに発行されます。

On All Connections Closed

Unreal Engine アプリケーションのこのインスタンスが Cirrus Signalling Server から切断するときに発行されます。

OnNewConnection

Unreal Engine アプリケーションのこのインスタンスに新しいクライアントが接続されたときに発行されます。

On All Connections Closed

Unreal Engine アプリケーションのこのインスタンスに接続されたクライアントが切断したときに発行されます。

On All Connections Closed

Unreal Engine アプリケーションのこのインスタンスに接続された最後のクライアントが切断したときに発行されます。このイベントが発行されると、アプリケーションのメディア ストリームを表示するクライアントはなくなります。このイベントは、新しいクライアントが参加する準備として、アプリケーションを初期状態にリセットするゲームプレイ ロジックに使用することもできます。

OnStatChanged

FPixelStreamingPlayerIdFName, float (プレイヤー ID、統計名、統計値) のフォーマットで、異なるピクセルストリーミング統計情報を報告します。

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

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

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

    Pixel Streamer Delegates nodes

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

    Bind Delegate

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

    Custom Event

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

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

Respond to the custom event

C++ イベント

デベロッパーはこれらの Pixel Streaming デリゲートに独自のハンドラを登録することができます。Unreal Engine で C++ デリゲートを使用する具体的な詳細について「マルチキャスト デリゲート」を参照することをお勧めします。Pixel Streaming デリゲートのシンプルな使用例です。

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

    void FExample::OnStatChanged(FPixelStreamingPlayerId PlayerId, FName StatName, float StatValue)
    {
    //TODO: Do something with the stat that changed.
    }

    void FExample::BindToDelegates()
    {
    // Bind to the OnStatChangedNative delegate.
    if(UPixelStreamingDelegates* Delegates = UPixelStreamingDelegates::GetPixelStreamingDelegates())
    {
    Delegates->OnStatChangedNative.AddRaw(this, &FExample::OnStatChanged);
    }
    };
Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル