Inputs
An input file in gamehoster-frontend/ is named by its event, and runs when that event fires. The
library attaches a DOM listener only for the family, mouse or keyboard, that has a file, so a game that reads
only the pointer costs no keyboard plumbing. Inside a body you read the pointer with
Gamehoster.Mouse and the keyboard with Gamehoster.Keys, and send a
command.
The input files
Each file is a small body. Gamehoster.Event carries the detail of the event that fired:
{ key, button }.
Mouse
| File | Fires on |
|---|---|
gamehoster-frontend-input-mouse-move.js | the pointer moves |
gamehoster-frontend-input-mouse-enter.js | the pointer enters the play area |
gamehoster-frontend-input-mouse-leave.js | the pointer leaves the play area |
gamehoster-frontend-input-mouse-button-left-press.js | the left button goes down (also middle, right) |
gamehoster-frontend-input-mouse-button-left-release.js | the left button comes up (also middle, right) |
Keyboard
| File | Fires on |
|---|---|
gamehoster-frontend-input-keyboard-any-press.js | any key goes down; the character is in Gamehoster.Event.key |
gamehoster-frontend-input-keyboard-any-release.js | any key comes up |
gamehoster-frontend-input-keyboard-down-press.js | the named key goes down (also up, left, right, space, enter) |
gamehoster-frontend-input-keyboard-down-release.js | the named key comes up |
gamehoster-frontend-input-keyboard-letter-press.js | any letter goes down; the letter is in Gamehoster.Event.key |
gamehoster-frontend-input-keyboard-number-press.js | any digit goes down; the digit is in Gamehoster.Event.key |
The named keys are the arrows (down, up, left, right),
space and enter, each with a -press and a -release file;
letter covers any letter and number covers any digit. The any file
fires alongside the specific one, so a game can handle everything in any and read the character
from Gamehoster.Event.key.
The mouse
Gamehoster.Mouse gives the pointer in several coordinate spaces at once, so a body reads it in
whichever space suits.
| Field | Holds |
|---|---|
x, y | pixels from the top-left |
width, height | the play-area size in pixels |
fx, fy | fraction from the top-left, 0 to 1 |
cx, cy | pixels from the centre |
nx, ny | square proportion from the centre; ±1 is half the shorter axis, so the longer axis runs past ±1 |
angle | angle from the centre |
dx, dy | movement this event |
| Member | Holds |
|---|---|
Gamehoster.Mouse.inside | true while the pointer is over the play area |
Gamehoster.Mouse.captured | true while pointer lock holds the cursor |
Gamehoster.Mouse.down(button) | true while that button is held |
Gamehoster.Mouse.pressed(button) | true the event it went down |
Gamehoster.Mouse.released(button) | true the event it came up |
Gamehoster.Mouse.drag | null, or a snapshot of the drag start point in every space plus .button |
Gamehoster.Mouse.capture() | take pointer lock |
Gamehoster.Mouse.release() | release pointer lock |
A button is 'left', 'middle' or 'right'. While a button is held,
Gamehoster.Mouse.drag is a snapshot of the point where the drag started, in every coordinate
space, plus the button. Read a drag delta as the current point minus the drag start.
if (Gamehoster.Mouse.drag) {
var turned = Gamehoster.Mouse.cx - Gamehoster.Mouse.drag.cx
aimBy(turned)
}
The keyboard
Gamehoster.Keys reads held and edge states of a key from any body.
| Member | Holds |
|---|---|
Gamehoster.Keys.down(key) | true while the key is held |
Gamehoster.Keys.pressed(key) | true the event it went down |
Gamehoster.Keys.released(key) | true the event it came up |
var thrusting = Gamehoster.Keys.down('up')
if (Gamehoster.Keys.pressed('space')) Gamehoster.Command('fire', {})
Mouse capture
Set mouseCapture in gamehoster-frontend-settings.json to use pointer lock. The
cursor locks on a button press. From then on mouse-move gives the delta
Gamehoster.Mouse.dx and Gamehoster.Mouse.dy with the cursor hidden and recentered.
Escape releases the lock, firing mouse-leave. Take and release the lock yourself with
Gamehoster.Mouse.capture() and Gamehoster.Mouse.release().
{
"mouseCapture": true
}