From 8c4a5d99891f4fbca9a5127bc4583d6470e86ac0 Mon Sep 17 00:00:00 2001 From: William Belcher Date: Fri, 24 Feb 2023 10:18:58 +1000 Subject: [PATCH 1/2] Update links to docs images --- .../Accessing the Pixel Streaming Blueprint API.md | 6 +++--- .../Communicating from UE5 to the Player Page.md | 10 ++++++++-- .../Communicating from the Player Page to UE5.md | 13 ++++++++++--- Frontend/Docs/Customizing the Player Webpage.md | 11 ++++++++--- Frontend/Docs/HTML Page Requirements.md | 2 +- Frontend/Docs/Timing Out Inactive Connections.md | 4 +++- 6 files changed, 33 insertions(+), 13 deletions(-) diff --git a/Frontend/Docs/Accessing the Pixel Streaming Blueprint API.md b/Frontend/Docs/Accessing the Pixel Streaming Blueprint API.md index 9859cbea..d2886c82 100644 --- a/Frontend/Docs/Accessing the Pixel Streaming Blueprint API.md +++ b/Frontend/Docs/Accessing the Pixel Streaming Blueprint API.md @@ -1,5 +1,3 @@ -**TO DO**: Update this information to match the new front end. - ## Accessing the Pixel Streaming Blueprint API The Pixel Streaming Plugin that runs within the Unreal Engine exposes a Blueprint API that you can use in your gameplay logic to handle custom UI events sent by the player HTML page, and to emit events from the Unreal Engine to the player page. @@ -7,7 +5,9 @@ The Pixel Streaming Plugin that runs within the Unreal Engine exposes a Blueprin To access this Blueprint API, add the **PixelStreamingInputComponent** to an Actor in your level. Your application's **PlayerController** is a safe choice. You can do this by clicking **Add Component** in the Blueprint menu and selecting the **Pixel Streaming Input** component from the dropdown. -![Adding the Pixel Streaming component.](Resources\Images\pixelstreaming-add-component.jpg) +

+ Adding the Pixel Streaming component +

**_NOTE:_** Prior to UE 4.27, the PixelStreamingInput Component was automatically added when you loaded the Pixel Streaming plugin. This was problematic, and now requires users to add this to their project themselves, as seen above. diff --git a/Frontend/Docs/Communicating from UE5 to the Player Page.md b/Frontend/Docs/Communicating from UE5 to the Player Page.md index eb4cb659..97074eb1 100644 --- a/Frontend/Docs/Communicating from UE5 to the Player Page.md +++ b/Frontend/Docs/Communicating from UE5 to the Player Page.md @@ -9,7 +9,9 @@ To set this up: 1. In your Unreal Engine application, any time you want to emit an event to the player page, use the **Pixel Streaming > Send Pixel Streaming Response** node. Specify a custom string argument to the node to indicate to the player page what event has happened. - ![](Docs\Resources\Images\pixelstreaming-send-game-event.JPG) +

+ Send game event +

2. In the JavaScript of your player page, you'll need to write a custom event handler function that will be invoked each time the page receives a response event from the Unreal Engine application. It will be passed the original string argument that was sent by the **Send Pixel Streaming Response** node. For example: @@ -33,6 +35,10 @@ To set this up: **_Tip:_** If you want to pass more complex data, you can format the string you pass to the **Send Pixel Streaming Response** node as JSON. For example: -![Send Pixel Streaming response using JSON](Resources\Images\pixelstreaming-send-game-event-json.png "Send Pixel Streaming response using JSON") + +

+ Send Pixel Streaming response using JSON +

+ Then, in your JavaScript event handler function, use `JSON.parse(data)` to decode the string back into a JavaScript object. diff --git a/Frontend/Docs/Communicating from the Player Page to UE5.md b/Frontend/Docs/Communicating from the Player Page to UE5.md index 92abe560..8691d3a5 100644 --- a/Frontend/Docs/Communicating from the Player Page to UE5.md +++ b/Frontend/Docs/Communicating from the Player Page to UE5.md @@ -41,7 +41,9 @@ or If you pass a JavaScript object, the `emitUIInteraction` function converts it to a JSON string internally. It then passes the resulting string back to the Pixel Streaming Plugin in your Unreal Engine application, which raises an event on the input controller. In your application's gameplay logic, you bind your own custom event to handle these inputs, using the **Bind Event to OnPixelStreamingInputEvent** node. For example: -![Bind Event to OnPixelStreamingInputEvent](Resources\Images\pixelstreaming-uiinteractionrespond.JPG "Bind Event to OnPixelStreamingInputEvent") +

+ Bind Event to OnPixelStreamingInputEvent +

You need to bind this event once, typically at the start of your game. Each time any player HTML page connected to an instance of your Unreal Engine application calls the `emitUIInteraction`function, your custom event is automatically invoked, regardless of the input passed to `emitUIInteraction`. @@ -50,11 +52,16 @@ The custom event you assign (for example, the **UI Interaction** node in the ima For example, the following Blueprint tests to see whether the input given to `emitUIInteraction` contains the string "MyCustomCommand", and calls a custom function to handle the event: -![Search for substring](Resources\Images\pixelstreaming-respond-searchsubstring.JPG "Search for substring") +

+ Search for substring +

If you originally passed a JavaScript object to `emitUIInteraction`, you can retrieve the value of any key from that JSON object using the **Pixel Streaming > Get Json String Value** node. For example, the following Blueprint tests for a key named LoadLevel. If that key is present, it calls a custom function to handle the event: -[![Get a JSON field value](Resources\Images\pixelstreaming-respond-json.JPG "Get a JSON field value")](pixelstreaming-respond-json.JPG) + +

+ Get a JSON field value +

**_Tip:_** diff --git a/Frontend/Docs/Customizing the Player Webpage.md b/Frontend/Docs/Customizing the Player Webpage.md index 1a36b00c..5b3bdf91 100644 --- a/Frontend/Docs/Customizing the Player Webpage.md +++ b/Frontend/Docs/Customizing the Player Webpage.md @@ -21,8 +21,13 @@ We recommend using the default player page as a starting point for creating Additionally, if you have cloned the Pixel Streaming Infrastructure repository and made upstream changes, you can fork the repo and make a pull request. _The default Pixel Streaming player page:_ -![PixelStreamingDefaultPlayer](Resources\Images\pixelstreaming-default-interface.JPG) -_A customised Pixel Streaming player page:_ -![PixelStreamingCustomPlayer](Resources\Images\pixelstreaming-custom-player.JPG) +

+ PixelStreamingDefaultPlayer +

+ + +

+ PixelStreamingCustomPlayer +

diff --git a/Frontend/Docs/HTML Page Requirements.md b/Frontend/Docs/HTML Page Requirements.md index 990450d6..371f8948 100644 --- a/Frontend/Docs/HTML Page Requirements.md +++ b/Frontend/Docs/HTML Page Requirements.md @@ -30,4 +30,4 @@ You have a few options for where you can place your custom HTML player page, an For example, if you save a file to `Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/myfolder/myplayerpage.html`, and you set the `HomepageFile` parameter to `myfolder/myplayerpage.html`, the page would be accessible without needing to provide a file name in the URL: `http://127.0.0.1/`. * You can also use the **AdditionalRoutes** parameter for the Signaling and Web Server to customize the mapping between URL paths and local folders on your computer. -For additional details on these parameters, see also the [Pixel Streaming Reference](sharing-and-releasing-projects/pixel-streaming/pixel-streaming-reference). +For additional details on these parameters, see also the [Pixel Streaming Reference](https://docs.unrealengine.com/5.1/en-US/unreal-engine-pixel-streaming-reference/). diff --git a/Frontend/Docs/Timing Out Inactive Connections.md b/Frontend/Docs/Timing Out Inactive Connections.md index 968630ec..ddfeb545 100644 --- a/Frontend/Docs/Timing Out Inactive Connections.md +++ b/Frontend/Docs/Timing Out Inactive Connections.md @@ -6,7 +6,9 @@ In some kinds of Pixel Streaming deployments, you may want to automatically disc You can configure your Pixel Streaming player page to detect when a user appears to be away from keyboard (AFK)—that is, when the user has not interacted with the player widget within a customizable time interval. The AFK system warns the user: -![AFK timeout warning](Resources\Images\afk-warning.png "AFK timeout warning") +

+ AFK timeout warning +

If the user continues not to respond, the AFK system ultimately disconnects their session. From d2c3a5c15d98b627048dc146d80246821cb56dae Mon Sep 17 00:00:00 2001 From: William Belcher Date: Fri, 24 Feb 2023 10:27:12 +1000 Subject: [PATCH 2/2] Remove references to removed images --- .../Communicating from the Player Page to UE5.md | 4 ++-- Frontend/Docs/Customizing the Player Webpage.md | 14 +------------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/Frontend/Docs/Communicating from the Player Page to UE5.md b/Frontend/Docs/Communicating from the Player Page to UE5.md index 8691d3a5..7077e9c6 100644 --- a/Frontend/Docs/Communicating from the Player Page to UE5.md +++ b/Frontend/Docs/Communicating from the Player Page to UE5.md @@ -4,8 +4,8 @@ The `app.js` file provides two JavaScript functions that you can call in your HTML player page to allow the user to send events and commands from the browser to the Unreal Engine application: -* You can use `emitCommand` to send console commands back to Unreal Engine. For example, `stat fps` to show the frame rate. See [Using the emitCommand Function below](#usingtheemitcommandfunction). -* `emitUIInteraction` sends any arbitrary string or JavaScript object to the game. Use this function to send your own custom commands from your player UI, which you can respond to in your gameplay logic to produce any effect you need in your application. See [Using the emitUIInteraction Function below](#usingtheemituiinteractionfunction). +* You can use `emitCommand` to send console commands back to Unreal Engine. For example, `stat fps` to show the frame rate. See [Using the emitCommand Function below](#using-the-emitcommand-function). +* `emitUIInteraction` sends any arbitrary string or JavaScript object to the game. Use this function to send your own custom commands from your player UI, which you can respond to in your gameplay logic to produce any effect you need in your application. See [Using the emitUIInteraction Function below](#using-the-emituiinteraction-function). ### Using the emitCommand Function diff --git a/Frontend/Docs/Customizing the Player Webpage.md b/Frontend/Docs/Customizing the Player Webpage.md index 5b3bdf91..ed30bcc2 100644 --- a/Frontend/Docs/Customizing the Player Webpage.md +++ b/Frontend/Docs/Customizing the Player Webpage.md @@ -18,16 +18,4 @@ However, with a little creativity and some knowledge of web technologies like J We recommend using the default player page as a starting point for creating your own custom player page. You'll find this page at `PixelStreamingInfrastructure\SignallingWebServer\Public\player.html` under your Unreal Engine installation folder. Then, use the information on this page to learn how to extend your page and tie it in with your Project's gameplay logic. -Additionally, if you have cloned the Pixel Streaming Infrastructure repository and made upstream changes, you can fork the repo and make a pull request. - -_The default Pixel Streaming player page:_ - -

- PixelStreamingDefaultPlayer -

- - -

- PixelStreamingCustomPlayer -

- +Additionally, if you have cloned the Pixel Streaming Infrastructure repository and made upstream changes, you can fork the repo and make a pull request. \ No newline at end of file