Game <--> Browser Communication
You can send messages from the game to the browser and back using JSON communication.
This guide assumes you've followed Setup the browser widget. The example will use In-world browser as the example.
Communication with a viewport browser is the same except for where the difference is specified.
Sending a message from the browser to the game
We'll add a feature that on clicking a button in the browser, we'll print the text input provided in the browser in the game client.
[todo]
Sending a message from the game to the browser
We'll add a feature that will display the player's XYZ position in the browser.
First, make a blueprint structure called SPosition with the parameters X Y Z. We'll use this to serialize the vector into a JSON struct.
In your browser widget blueprint, add the following nodes. This will call the function setPlayerPosition in the browser every tick alongside the player's location as a struct.
In the index.html, update the code to the below.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Roboto', sans-serif;
font-size: 4rem;
background: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
jQuery(function()
{
// required initialisation
"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue5=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});
// register the listener for setting the player position
ue.interface.setPlayerPosition = function(position) {
const {x, y, z} = position;
if (x && y && z) {
$('body').text(`X: ${x.toFixed(2)} Y: ${y.toFixed(2)} Z: ${z.toFixed(2)}`);
} else {
console.error('Invalid position object:', position);
}
};
});
</script>
</head>
<body>
X: 0 Y: 0 Z: 0
</body>
</html>[this doesnt work its so buggy waiting for nick response for support]
Last updated
Was this helpful?