Controls for a game
A joystick, a pad of arrows and round buttons, for playing a game on a touch screen. Each finger holds its own control, so one thumb steers while the other fires.
joystick and actionButton
const stick = joystick()
const fire = actionButton("A")
let x = 200, y = 200, shots = 0
function update(dt) {
x += stick.x * 300 * dt // each from -1 to 1, and 0 when you let go
y += stick.y * 300 * dt
if (fire.pressed) shots += 1 // true once for each press
}
function draw() {
background("midnightblue")
circle(x, y, 20, "gold")
text("Shots " + shots, 20, 30, "white", 20)
}| JavaScript | Python | What it is |
|---|---|---|
joystick() | joystick() | A stick for a thumb, which springs back when you let go. stick.x and stick.y are each from -1 to 1 in the scene's own directions: y goes down the picture, so y += stick.y * speed goes where the thumb pushes. stick.angle is the way it is pushed (in radians) and stick.distance how far, from 0 to 1 |
dpad() | dpad() | A pad of arrows. pad.left, pad.right, pad.up and pad.down are true while pressed, and pad.x and pad.y are -1, 0 or 1. A thumb slides from one arrow to the next; between two, both are pressed |
actionButton("A") | action_button("A") | A round button: fire.pressed is true once for each press and fire.held while it is down, as for any button |
The options of a joystick:
| Option | What it does |
|---|---|
floating | true: the stick appears where the thumb lands, anywhere in its box. Give the box a width and a height |
asKeys (as_keys) | true: it holds the arrow keys down for the scene. See below |
size | How big it is |
onChange (on_change) | A function called with x and y when the stick moves |
The options of a pad of arrows and of a round button:
| Option | What it does |
|---|---|
ways | On a dpad, ways: 4 presses one arrow at a time, never two |
asKeys (as_keys) | On a dpad, true holds the arrow keys down for the scene, and "wasd" those keys |
key | On an actionButton, key: "space" holds that key down for the scene while the button is pressed |
A game written for the keyboard, on a phone
dpad({ asKeys: true }) holds the arrow keys down for the scene. So a game that asks whether the left arrow is down is played by touch with not a line changed:
dpad({ asKeys: true })
actionButton("jump", { key: "space" })
let x = 200, y = 0, vy = 0
function update(dt) {
if (keys.has("ArrowLeft")) x -= 300 * dt // the keyboard, or the pad
if (keys.has("ArrowRight")) x += 300 * dt
if (keys.has(" ") && y === 0) vy = 500
vy -= 1200 * dt
y = Math.max(0, y + vy * dt)
if (y === 0) vy = 0
}
function draw() {
background("midnightblue")
circle(x, height - 200 - y, 20, "gold")
}Where to put them
For a game, put the controls in a strip along the bottom and draw in the room that is left:
group({ at: "bottom", plate: false }, () => {
dpad()
spacer()
actionButton("A")
})
function draw() {
const area = room() // the rectangle no control is on
rect(area.x, area.y, area.width, area.height, "steelblue")
}Laying out a panel has more about strips and room().