Blueprint Setup for Sending and Receiving JSON Messages from the Frontend in Unreal Engine
Step 1: Open Your Unreal Engine Project
Open your Unreal Engine project and navigate to the Content Browser.
Step 2: Create a New Blueprint
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.
Step 3: Open the Blueprint Editor
Double-click your new Blueprint (
ZEZ_PC
) to open the Blueprint Editor.
Step 4: Add Pixel Streaming Input Component
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.
Step 5: Create the Event BeginPlay Node
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.
Step 6: Bind Event to On Input Event
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.
Step 7: Create a Custom Event
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.
Step 8: Set Up Descriptor Variable
Drag off from the Event Pin of your custom event (
HandlePixelStreamingInput
) and search for theSet
node to create aDescriptor
variable.Make sure to create a new variable of type
String
calledDescriptor
. This variable will store the input data.
Step 9: Get JSON String Value
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.
Step 10: Connect the Get JSON String Value Node
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 theDescriptor
variable’s input pin.This setup assigns the extracted message value to the
Descriptor
variable.
Step 11: Add a Branch Node
Drag off from the Exec pin of the
HandlePixelStreamingInput
custom event and search for aBranch
node.The Branch node acts like an "if" statement in traditional programming, allowing you to execute different logic paths based on a condition.
Step 12: Set Up the Condition for the Branch Node
For now, you can use the Success pin of the
Get JSON String Value
node as the condition for theBranch
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.
Step 13: Add a Print String Node (Optional)
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 andFailure
for the False path.
Step 14: Handling the Message in Unreal Engine
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.
Step 15: Send Pixel Streaming Response Node
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.
Step 15: Connect the Descriptor to the Response
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.
Step 16: Compile and Save
After connecting everything, click the Compile button at the top left of the Blueprint Editor, then click Save.
Step 17: Explanation of Every Node:
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.
Last updated