Customizable On-screen Joystick

Playroom includes a customizable on-screen joystick controller that can be used by players as input. It also supports additional buttons that can be used for actions such as jumping, shooting, etc. Joystick can also be controlled by W,A,S and D keys of the keybord.

Here is a usage example, check out the API Docs for more details:

 
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"}
    ],
    keyboard: false // Disable W,A,S and D keys which controls joystick
  });
  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
  }
});

Here are a few examples of the joystick UI:

D-Pad

Angular with Buttons

Angular with Button and Zone

FAQs

I want angular value as 0-360 degrees

You can convert radians to degrees and then add 90 to get the value in degrees.

function radToDeg(rad){
  return rad * 180 / Math.PI + 90;
}
 
console.log(radToDeg(joystick.angle()));

I want to convert angular value to X, Y components that go between -1 and 1

You can use Math.cos and Math.sin to get the X and Y components.

function radToXY(rad){
  return {
    y: Math.cos(rad),
    x: Math.sin(rad)
  };
}
 
console.log(radToXY(joystick.angle()));

Matchmaking Gamepads