Input Devices

Here are the input devices available in p5play:

• kb or keyboard for the keyboard
• mouse for the mouse
• contro or controllers for game controllers

These input devices all use the same simple functions for getting the state of an input: presses, pressing, and released.

Input devices also store the state of all their inputs as properties. For example, kb.space stores how many frames the user has been pressing the space key. It gets reset when the user releases the input.

p5play makes it easy to trigger the same action via different input devices using boolean logic.

In the mini-example, the sprite turns red if you press the space key or click the mouse.

Keyboard

kb tracks nearly every key on the keyboard, including 'enter', 'backspace', and 'control'.

Note that letter input is not case sensitive. To check if a user is pressing shift use: kb.pressing('shift').

Since the WASD keys are commonly used to control the player character's movement, you can use the direction names 'up', 'down', 'left', and 'right' to detect WASD and arrow key presses.

Arrow keys can also be detected separately using 'arrowUp', 'arrowDown', 'arrowLeft', and 'arrowRight'.

In local two player games it's common for the second player to use the IJKL keys for movement. These keys can be referenced using 'up2', 'down2', 'left2', and 'right2'.

Using a non-QWERTY keyboard?

Mouse

The default mouse input is the 'left' button, a one finger click on trackpads. You can also use 'right' (two finger click) and 'center'.

mouse.x and mouse.y store the position of the mouse on the canvas.

mouse.visible is a boolean that determines whether the mouse is visible or not.

mouse.cursor can be set to a cursor style. The default is 'default', other options include 'grab', 'move', 'pointer', and 'wait'.

Sprite Mouse

Sprites with physics colliders have their own mouse object for detecting mouse inputs on the sprite. sprite.mouse objects are just like the mouse input object, except they have additional functions.

hovers and hovering detect when the user moves the mouse over a sprite.

dragging detects when the user clicks and holds a mouse button on the sprite while moving the mouse. Note that mouse.x is the x position of the mouse on the canvas and sprite.mouse.x is the x position of the mouse relative to the sprite.

Game Controllers

The contro object provides the input state of game controller buttons:

a, b, x, y, l (left bumper), r (right bumper), lt (left trigger), rt (right trigger), up, down, left, right (D-pad), lsb (left stick button), rsb (right stick button), start, and select

contro.leftStick and contro.rightStick represent the positions of the controller's analog sticks as objects with x and y properties. These values range from -1 to 1, with 0 indicating the center position.

Some controllers have analog triggers, and their positions are stored as numbers ranging from 0 to 1 in contro.leftTrigger and contro.rightTrigger.

The contro object (aka controllers) is an array that contains all the connected game controllers detected by your web browser. Access connected controllers by index. For example, contro[0] and contro[1] are the first and second controllers. Through JS magic, contro can be used to get the input states of contro[0].

Touch

Example coming soon!