Customizable On-screen Joystick

 
import { insertCoin, myPlayer, onPlayerJoin, Joystick } from 'playroomkit';
 
// Start the game
await insertCoin();
 
let players = [];
// Create a joystick controller for each joining player
onPlayerJoin((state)=>{
  // Joystick will only create UI for current player (myPlayer)
  // For others, it will only sync their state
  const joystick = new Joystick(state, {
    type: "dpad",
    buttons: [
      {id: "jump", label: "Jump"}
    ]
  });
  players.push({state, joystick});
})
 
// In your game loop
players.forEach(({state, joystick})=>{
  // Update player position based on joystick state
  const dpad = joystick.dpad();
  if (dpad.x === "left"){
    // move player left
  }
  else if (dpad.x === "right"){
    // move player right
  }
 
  // Check if jump button is pressed
  if (joystick.isPressed("jump")){
    // jump
  }
});