Skip to content
On this page

KeyboardControls

You can access this instance from RpgClientEngine


Get Control

  • Method: getControl(inputName)
  • Arguments:
    • {string} inputName. (Optional: false)
  • Return: { actionName: string, options: any } | undefined
  • Usage:

From the name of the entry, we retrieve the control information

ts
import { Input, inject, KeyboardControls } from '@rpgjs/client'

const controls = inject(KeyboardControls)
controls.getControl(Input.Enter)

if (control) {
   console.log(control.actionName) // action
}

undefined

  • Since: 4.2.0
  • Method: getControls()
  • Return: { [key: string]: BoundKey }
  • Usage:

Returns all controls


Apply Control

  • Method: applyControl(controlName,isDown)
  • Arguments:
    • {string} controlName. (Optional: false)
    • {boolean} isDown. (Optional: true)
  • Return: Promise
  • Usage:

Triggers an input according to the name of the control

ts
import { Control, inject, KeyboardControls } from '@rpgjs/client'

const controls = inject(KeyboardControls)
controls.applyControl(Control.Action)

You can put a second parameter or indicate on whether the key is pressed or released

ts
import { Control, inject, KeyboardControls } from '@rpgjs/client'

const controls = inject(KeyboardControls)
controls.applyControl(Control.Up, true) // keydown
controls.applyControl(Control.Up, false) // keyup

Stop Inputs

  • Method: stopInputs()
  • Return: void
  • Usage:

Stop listening to the inputs. Pressing a key won't do anything


Listen Inputs

  • Method: listenInputs()
  • Return: void
  • Usage:

Listen to the inputs again


Set Inputs

  • Enum: string Control
TagDescription
Control.Upup
Control.Downdown
Control.Leftleft
Control.Rightright
Control.Actionaction
Control.Backback
  • Enum: string Mouse
TagDescription
Event
clickClick
dblclickDouble Click
mousedownMouse Down
mouseupMouse Up
mouseoverMouse Over
mousemoveMouse Move
mouseoutMouse Out
contextmenuContext Menu
  • Enum: string Input
TagDescription
breakPause
backspaceBackspace / Delete
tabTab
clearClear
enterEnter
shiftShift
ctrlControl
altAlt
pause/breakPause / Break
caps lockCaps Lock
escapeEscape
conversionConversion
non-conversionNon-conversion
spaceSpace
page upPage Up
page downPage Down
endEnd
homeHome
leftLeft Arrow
upUp Arrow
rightRight Arrow
downDown Arrow
selectSelect
printPrint
executeExecute
Print ScreenPrint Screen
insertInsert
deleteDelete
n00
n11
n22
n33
n44
n55
n66
n77
n88
n99
:Colon
semicolon (firefox), equalsSemicolon (Firefox), Equals
<Less Than
equals (firefox)Equals (Firefox)
ßEszett
@At
aA
bB
cC
dD
eE
fF
gG
hH
iI
jJ
kK
lL
mM
nN
oO
pP
qQ
rR
sS
tT
uU
vV
wW
xX
yY
zZ
Windows Key / Left ⌘ / Chromebook Search keyWindows Key / Left Command ⌘ / Chromebook Search Key
right window keyRight Windows Key
Windows Menu / Right ⌘Windows Menu / Right Command ⌘
numpad 0Numpad 0
numpad 1Numpad 1
numpad 2Numpad 2
numpad 3Numpad 3
numpad 4Numpad 4
numpad 5Numpad 5
numpad 6Numpad 6
numpad 7Numpad 7
numpad 8Numpad 8
numpad 9Numpad 9
multiplyMultiply
addAdd
numpad period (firefox)Numpad Period (Firefox)
subtractSubtract
decimal pointDecimal Point
divideDivide
f1F1
f2F2
f3F3
f4F4
f5F5
f6F6
f7F7
f8F8
f9F9
f10F10
f11F11
f12F12
f13F13
f14F14
f15F15
f16F16
f17F17
f18F18
f19F19
f20F20
f21F21
f22F22
f23F23
f24F24
num lockNum Lock
scroll lockScroll Lock
^Caret
!Exclamation Point
#Hash
$Dollar Sign
ùGrave Accent U
page backwardPage Backward
page forwardPage Forward
closing paren (AZERTY)Closing Parenthesis (AZERTY)
*Asterisk
~ + * keyTilde + Asterisk Key
minus (firefox), mute/unmuteMinus (Firefox), Mute/Unmute
decrease volume levelDecrease Volume Level
increase volume levelIncrease Volume Level
nextNext
previousPrevious
stopStop
play/pausePlay/Pause
e-mailEmail
mute/unmute (firefox)Mute/Unmute (Firefox)
decrease volume level (firefox)Decrease Volume Level (Firefox)
increase volume level (firefox)Increase Volume Level (Firefox)
semi-colon / ñSemicolon / ñ
equal signEqual Sign
commaComma
dashDash
periodPeriod
forward slash / çForward Slash / ç
grave accent / ñ / æGrave Accent / ñ / æ
?, / or °?, / or °
numpad period (chrome)Numpad Period (Chrome)
open bracketOpen Bracket
back slashBackslash
close bracket / åClose Bracket / å
single quote / øSingle Quote / ø
`Backtick
left or right ⌘ key (firefox)Left or Right Command Key (Firefox)
altgrAltGr
< /git >< /git >
GNOME Compose KeyGNOME Compose Key
çç
XF86ForwardXF86Forward
XF86BackXF86Back
alphanumericAlphanumeric
hiragana/katakanaHiragana/Katakana
half-width/full-widthHalf-Width/Full-Width
kanjiKanji
toggle touchpadToggle Touchpad
  • Method: setInputs(inputs)
  • Arguments:
    • {object} inputs. (Optional: false)
  • Usage:

Assign custom inputs to the scene

The object is the following:

  • the key of the object is the name of the control. Either it is existing controls (Up, Dow, Left, Right, Action, Back) or customized controls
  • The value is an object representing control information:
    • repeat {boolean} The key can be held down to repeat the action. (false by default)
    • bind {string | string[]} To which key is linked the control
    • method {Function} Function to be triggered. If you do not set this property, the name of the control is sent directly to the server.
    • delay {object|number} (since v3.2.0) Indicates how long (in milliseconds) the player can press the key again to perform the action
      • delay.duration
      • delay.otherControls {string | string[]} Indicates the other controls that will also have the delay at the same time
ts
import { Control, Input, inject, KeyboardControls } from '@rpgjs/client'

const controls = inject(KeyboardControls)
controls.setInputs({
            [Control.Up]: {
                repeat: true,
                bind: Input.Up
            },
            [Control.Down]: {
                repeat: true,
                bind: Input.Down
            },
            [Control.Right]: {
                repeat: true,
                bind: Input.Right
            },
            [Control.Left]: {
                repeat: true,
                bind: Input.Left
            },
            [Control.Action]: {
                bind: [Input.Space, Input.Enter]
            },
            [Control.Back]: {
                bind: Input.Escape
            },

            // The myscustom1 control is sent to the server when the A key is pressed.
            mycustom1: {
                bind: Input.A
            },

            // the myAction method is executed when the B key is pressed
            mycustom2: {
                bind: Input.B,
                method({ actionName }) {
                    console.log('cool', actionName)
                }
            },

            // The player can redo the action after 400ms
            mycustom3: {
                bind: Input.C,
                delay: 400 // ms
            },

            // The player can redo the action (mycustom4) and the directions after 400ms
            mycustom4: {
                bind: Input.C,
                delay: {
                    duration: 400,
                    otherControls: [Control.Up, Control.Down, Control.Left, Control.Right]
                }
            }
        })