Blueprint Setup for Sending and Receiving JSON Messages from the Frontend in Unreal Engine
Last updated
Last updated
Open your Unreal Engine project and navigate to the Content Browser.
Right-click in the Content Browser, go to Blueprint Class, and choose PlayerController as the parent class. Name it something like ZEZ_PC.
You can skip it if you already have your own custom player controller.
Double-click your new Blueprint (ZEZ_PC) to open the Blueprint Editor.
In the Components panel on the left, click the Add Component button.
Search for and add the PixelStreamingInput component.
This component will handle the inputs coming from the Pixel Streaming client, allowing the Blueprint to receive messages sent from the frontend.
In the Event Graph (the main scripting area of the Blueprint Editor), right-click and search for Event BeginPlay.
This node triggers when the PlayerController is initialized, ensuring that the setup logic runs as soon as the game starts.
First, grab the Pixel Streaming Input component you added earlier.
In the Event Graph, drag and drop the Pixel Streaming Input component from the Components panel into the graph.
From the Pixel Streaming Input variable, drag off the pin and search for Bind Event to On Input Event.
Connect the Exec pin from the Event BeginPlay node to the Bind Event to On Input Event node.
Drag off from the red Event pin on the Bind Event to On Input Event node.
In the search box that appears, type "Add Custom Event" and select it.
This will automatically create a new custom event in your Event Graph.
Naming the Event:
Name this custom event something descriptive, like HandlePixelStreamingInput.
This custom event will now be triggered whenever the Pixel Streaming Input component detects input from the frontend.
Explanation:
The custom event HandlePixelStreamingInput is where you will define the logic for processing the incoming input data. Whenever the Pixel Streaming Input component receives a message from the frontend, this custom event will be executed.
Drag off from the Event Pin of your custom event (HandlePixelStreamingInput) and search for the Set node to create a Descriptor variable.
Make sure to create a new variable of type String called Descriptor. This variable will store the input data.
Drag off from the Pixel Streaming Input component and search for Get JSON String Value.
In this node, set the Field Name to "message". This could be any name based on what you will be sending from the frontend.
This node extracts the value associated with the "message" key from the incoming JSON data.
Connect the Target pin of the Get JSON String Value node to the Pixel Streaming Input component.
Connect the String Value pin of the Get JSON String Value node to the Descriptor variable’s input pin.
This setup assigns the extracted message value to the Descriptor variable.
Drag off from the Exec pin of the HandlePixelStreamingInput custom event and search for a Branch node.
The Branch node acts like an "if" statement in traditional programming, allowing you to execute different logic paths based on a condition.
For now, you can use the Success pin of the Get JSON String Value node as the condition for the Branch node.
This checks if the value extraction was successful. If true, it will execute the logic connected to the True pin; if false, it will execute the logic connected to the False pin.
To debug or confirm the process, you can add a Print String node after both the True and False pins of the Branch node.
For example, you could print Success for the True path and Failure for the False path.
After the Print String Node:
After confirming the message content with a Print String node, you can implement further logic based on the received message. This might involve moving an object, changing the game state, updating UI elements, or any other interaction in Unreal Engine.
The logic after the Print String node should be customized according to what you want to achieve with the message received from the frontend.
You can create a custom trigger and attach that trigger to this node. Search for the Send Pixel Streaming Response node.
This node allows you to send a response back to the frontend. You can customize the message sent back here.
You can enter any value in description field present on Send Pixel Streaming Response node. This is the message that you will receive on the frontend.
This sends the content of the Descriptor (the message received) back to the frontend as a confirmation or a result.
After connecting everything, click the Compile button at the top left of the Blueprint Editor, then click Save.
Event BeginPlay: This node is the starting point for any logic that should be executed when the PlayerController is initialized.
Bind Event to On Input Event: This node binds a specific event to input received from the Pixel Streaming client. It makes sure that whenever input is received, the custom event (HandlePixelStreamingInput) is triggered.
Custom Event (HandlePixelStreamingInput): This is the event triggered by incoming input. It processes the input and can execute various actions based on the input data.
Descriptor Variable: This variable stores the input data extracted from the incoming message. It allows for easy manipulation and reference within the Blueprint.
Get JSON String Value: This node extracts a specific value from a JSON string received as input. In this case, it looks for the "message" field and stores its value in the Descriptor variable.
Branch: A conditional logic node that allows different code paths based on whether a condition is true or false.
Print String: A debugging tool that prints a string to the output log, useful for checking whether certain parts of the Blueprint logic are executed.
Send Pixel Streaming Response: This node sends a message back to the frontend, allowing the application to communicate results, confirmations, or other data back to the client.
You can also download our sample project from our github below.
