Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.

Update Docs to remove broken links #122

Merged
merged 2 commits into from
Feb 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Frontend/Docs/Accessing the Pixel Streaming Blueprint API.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
**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.

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)
<p align="center">
<img src="Resources\Images\pixelstreaming-add-component.jpg" alt="Adding the Pixel Streaming component">
</p>


**_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.
10 changes: 8 additions & 2 deletions Frontend/Docs/Communicating from UE5 to the Player Page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
<p align="center">
<img src="Resources\Images\pixelstreaming-send-game-event.JPG" alt="Send game event">
</p>

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:

Expand All @@ -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")

<p align="center">
<img src="Resources\Images\pixelstreaming-send-game-event-json.png" alt="Send Pixel Streaming response using JSON">
</p>

Then, in your JavaScript event handler function, use `JSON.parse(data)` to decode the string back into a JavaScript object.

17 changes: 12 additions & 5 deletions Frontend/Docs/Communicating from the Player Page to UE5.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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")
<p align="center">
<img src="Resources\Images\pixelstreaming-uiinteractionrespond.JPG" alt="Bind Event to OnPixelStreamingInputEvent">
</p>

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`.

Expand All @@ -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")
<p align="center">
<img src="Resources\Images\pixelstreaming-respond-searchsubstring.JPG" alt="Search for substring">
</p>

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)

<p align="center">
<img src="Resources\Images\pixelstreaming-respond-json.JPG" alt="Get a JSON field value">
</p>


**_Tip:_**
Expand Down
9 changes: 1 addition & 8 deletions Frontend/Docs/Customizing the Player Webpage.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +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](Resources\Images\pixelstreaming-default-interface.JPG)

_A customised Pixel Streaming player page:_
![PixelStreamingCustomPlayer](Resources\Images\pixelstreaming-custom-player.JPG)

Additionally, if you have cloned the Pixel Streaming Infrastructure repository and made upstream changes, you can fork the repo and make a pull request.
2 changes: 1 addition & 1 deletion Frontend/Docs/HTML Page Requirements.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
4 changes: 3 additions & 1 deletion Frontend/Docs/Timing Out Inactive Connections.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")
<p align="center">
<img src="Resources\Images\afk-warning.png" alt="AFK timeout warning">
</p>

If the user continues not to respond, the AFK system ultimately disconnects their session.

Expand Down