Usage with Godot

Using Playroom with Godot 3 & 4 (Web only)

Godot (opens in a new tab) is a free and open-source game engine. Godot has JavaScriptBridge (opens in a new tab) support (JavaScript (opens in a new tab) in Godot 3), which connects the engine with the browser's JavaScript. We can use this to use Playroom with Godot.

👷🏼‍♀️

Godot 4's web export is not production-grade yet. There are open bugs in Chromium (opens in a new tab) and in Godot (opens in a new tab) itself (opens in a new tab).

💡
Use Godot 3 for any production web games.

Setup

  • In your Godot 3 or 4 project, you need to enable Web Export. You can do this by going to Project > Export > Add and clicking Web.

  • With Web selected, add Playroom to the HTML > Head section:

<script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/playroomkit/multiplayer.umd.js" crossorigin="anonymous"></script>

You can close the export window now.

  • If you completed the above steps correctly, you should see a Run in browser menu option in when you click the Remote Debug button:

Run in browser

Using Playroom in GDScript

To initialize Playroom in your game ie. show the Playroom lobby, you need to call Playroom.insertCoin() in some script. insertCoin and other Playroom functions also support providing a callback function. You need to make your GDScript callback function available to the JS context.

Here is an example of how to initialize Playroom on a button press:

Godot 3

extends Button
 
var Playroom = JavaScript.get_interface("Playroom")
 
# Keep a reference to the callback so it doesn't get garbage collected
var jsBridgeReferences = []
func bridgeToJS(cb):
	var jsCallback = JavaScript.create_callback(cb)
	jsBridgeReferences.push_back(jsCallback)
	return jsCallback
 
# Called when the "Play Multiplayer" button is pressed.
func _on_pressed():
	var initOptions = JavaScript.create_object("Object");
	Playroom.insertCoin(initOptions, bridgeToJS("onInsertCoin"));
 
# Called when the host has started the game
func onInsertCoin(args):
	print("Coin Inserted")
	Playroom.onPlayerJoin(bridgeToJS("onPlayerJoin"))
 
# Called when a new player joins the game
func onPlayerJoin(args):
	var state = args[0];
	print("new player: ", state.id)
	print(state.getProfile().name)
	
	# Listen to onQuit event
	state.onQuit(bridgeToJS("onPlayerQuit"))
 
func onPlayerQuit(args):
	var state = args[0];
	print("player quit: ", state.id)

The above code will show the familiar Playroom lobby when the button is pressed. Players can host and join rooms without any code on your side.

When the host starts the game, the onInsertCoin callback will be called. The onPlayerJoin callback will be called for all existing and new players, so you can add characters for them. When a player quits the game, the onPlayerQuit callback will be called, so you can remove their character.

⚠️

Do note that Playroom will not work in the Godot editor. You need to export your game and run it in the browser.

💡

You can use the Run in browser option in the Remote Debug menu to quickly build and open your game in the browser.

💡

If you host the game on your own server, Godot 4 requires the following headers to be present, add these in your .htaccess or however your server lets you:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Simple Demo

See the full source code (opens in a new tab) for this demo. Here is source code (opens in a new tab) for the Godot 4 version.

Next Steps

FAQs and Tips

How to display player's profile picture in Godot?

PlayroomPlayer.GetProfile().photo is formatted as data:image/svg+xml,{svg encoded for url}. Churrosaur from our Discord community shared this code snippet to display the player's profile picture in Godot:

func _parse_dataurl(data_url : String) -> Image:
	var url_data = data_url.split(",")[1] # clips the preface 
	var svg_data = url_data.uri_decode() # String.uri_decode() - parses uri
	
	var image = Image.new()
	var error = image.load_svg_from_string(svg_data) # loads svg from string
	if error != OK:
			push_error("Couldn't load the image.")
			
	return image

How to display QR code for joining the game inside Godot?

You can use JavaScriptBridge.eval(window.location.href) to get current url (which includes room code) and then use any QRCode library like this (opens in a new tab) to display QR code in Godot.

Thanks to Churrosaur from our Discord community for sharing this tip.