API Reference
insertCoin({ InitOptions })
Tell Playroom to start! Playroom Kit will then handle room creation, players joining and also let players pick their names, colors and avatars. Once host taps "Launch", the promise resolves. At this point you can start your game.
// Show Playroom UI, let it handle players joining etc and wait for host to tap "Launch"
await insertCoin();
// Start your game!
InitOptions
is an object with the following properties:
option | type | default | explanation |
---|---|---|---|
streamMode | boolean | false | If true , Playroom will start in stream mode . |
allowGamepads | boolean | false | If true , Playroom will let players play game using gamepads connected to the stream device itself. This requires streamMode to also be true .The gamepads need to be connected to device where stream screen is running. No phones are required in this mode but are optionally allowed as an alternative controller if there aren't enough physical gamepads in the room. Players who join via phone in this mode see an on-screen Joystick. |
baseUrl | string | Current Page URL | The base URL used for generating room link that host shares with other players. |
avatars | Array<string> | Default Avatars | An array of URLs to images that players can pick as their avatar. This will override the default avatars system that Playroom provides. |
enableBots | boolean | false | If 'true' , Playroom initializes a bot using the provided botOptions. |
botOptions | Object | undefined | An object containing parameters for bot instantiation and configuration. |
getState(key: string): any
Returns the current value of the given key in the game state.
const winnerId = getState('winner');
setState(key: string, value: any, reliable: boolean = true): void
Sets the value of the given key in the game state. If reliable
is true
, the state is synced reliably to all players via Websockets. This is useful for game state that is critical to the game, like the winner.
If reliable
is false
, the state is synced via WebRTC, which is faster but less reliable. This is useful for game state that is not critical to the game, like the player's current position (you can always rely on next position update).
setState('winner', 'player1');
onPlayerJoin(callback)
Register a callback that will be called when a new player joins the room. The callback will be called with the player's PlayerState
object.
If a new player joins after the game has started, the callback is called with all existing PlayerState
objects, exclusively for the new player.
onPlayerJoin((player) => {
console.log(`${player.id} joined!`);
});
isHost()
Returns true
if the current player is the host.
if (isHost()) {
// Do something only the host should do, like reading player input and setting game state
}
isStreamScreen()
Returns true
if the current screen is the stream screen; a non-player screen that is shown when the game is in stream mode .
if (isStreamScreen()) {
// Do something only the stream screen should do, like showing a countdown
}
myPlayer()
or me()
Returns the current player's PlayerState
object.
const player = myPlayer();
console.log(`Hello ${player.getProfile().name}!`);
waitForState(stateKey: string): Promise<any>
Returns a promise that resolves to the state value only when the game state has the given key set, to any truthy value.
In other words, it waits until a game state is set. This is useful for waiting for the host to set the winner, for example.
// Wait for the winner to be set
const winnerId = await waitForState('winner');
// Do something with the winner
PlayerState
A PlayerState
object represents a player in the room. It has the following methods and properties:
id: string
The player's unique ID.
console.log(`Player ID: ${player.id}`);
getProfile(): PlayerProfile
Returns the player's profile, which has the following properties:
property | type | explanation |
---|---|---|
name | string | The player's name. |
color | Color | The player's color. |
photo | string | The player's avatar. This is a dataURL to an image. |
avatarIndex | number | The index of the player's picked avatar. This is an index into the avatars array passed to insertCoin . If no avatars array was passed, this is -1 . |
The Color
type is an object with the following properties:
property | type | explanation |
---|---|---|
r | number | The red component of the color, between 0 and 255. |
g | number | The green component of the color, between 0 and 255. |
b | number | The blue component of the color, between 0 and 255. |
hexString | string | The color as a hex string, e.g. #ff0000 for red. |
hex | number | The color as a hex number, e.g. 0xff0000 for red. |
getState(key: string): any
Returns the value of the given key in the player's state.
const score = player.getState('score');
setState(key: string, value: any, reliable: boolean = false)
Sets the value of the given key in the player's state.
If reliable
is true
, the state is synced reliably to all players via Websockets. This is useful for game state that is critical to the game, like the winner.
If reliable
is false
, the state is synced via WebRTC, which is faster but less reliable. This is useful for game state that is not critical to the game, like the player's current position (you can always rely on next position update).
player.setState('score', 10);
onQuit(callback)
Register a callback that will be called when the player quits the room.
player.onQuit(() => {
console.log(`${player.id} quit!`);
});
Joystick Controller
Joystick(state: PlayerState, options: JoystickOptions)
A component that renders a joystick controller. The joystick can be used to control the player's position in the game.
import { Joystick, myPlayer } from 'playroomkit';
new Joystick(myPlayer(), {
type: "dpad"
})
JoystickOptions
is an object with the following properties:
option | type | default | explanation |
---|---|---|---|
type | string | angular | The type of output joystick generates. Can be dpad or angular . |
buttons | Array<ButtonOptions > | [] | An array of buttons to render on the joystick. See below for ButtonOptions . |
zones | ZoneOptions | null | An object to define custom zones on the 4 sides of the joystick. See below for ZoneOptions . |
ButtonOptions
is an object with the following properties:
option | type | default | explanation |
---|---|---|---|
id | string | null | The ID of the button. This is used to identify the button in the isPressed method. |
label | string | "" | The button can have a text label. |
icon | string | null | The button can have an icon. This is a URL to an image. |
ZoneOptions
let's you define zones on Joystick that are triggered when player drags Joystick in that zone.
This behaves same as buttons above, isPressed
method can be used to detect if a zone button is active or not.
ZoneOptions
is an object with the following properties:
option | type | default | explanation |
---|---|---|---|
up | ButtonOptions | null | The zone on the top side of the joystick. |
down | ButtonOptions | null | The zone on the bottom side of the joystick. |
left | ButtonOptions | null | The zone on the left side of the joystick. |
right | ButtonOptions | null | The zone on the right side of the joystick. |
isPressed(id: string): boolean
Returns true
if the button with the given ID is pressed.
if (joystick.isPressed('jump')) {
// Jump!
}
isJoystickPressed(): boolean
Returns true
if the joystick is pressed.
if (joystick.isJoystickPressed()) {
// Do something?
}
angle(): float
Returns the angle of the joystick, in radians.
const angle = joystick.angle();
dpad(): { x: string, y: string }
Returns the direction of the joystick, as a string. The string can be one of the following:
up
down
left
right
Hooks for React
See the React API here.
Unity (C#) API
See the Unity API here.