Input Devices
Here are the input devices available in p5play:
kb
orkeyboard
for the keyboardmouse
for the mousecontro
orcontrollers
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'.
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]
.
Try it out! Connect a game controller and press any button on it for it to be detected by p5play.
Touch
Example coming soon!