Use this skill when handling user input in Phaser 4. Covers keyboard keys, mouse clicks and movement, touch events, pointer handling, drag and drop, hit areas, interactive objects, and gamepad support. Triggers on: keyboard, mouse, touch, pointer, drag, drop, click, input, gamepad, cursor keys.

Input: Keyboard, Mouse, Touch, and Gamepad Phaser provides a unified input system accessed via this.input in any Scene. It supports keyboard polling and events, mouse/pointer interaction with Game Objects (click, hover, drag), multi touch, mouse wheel, and gamepad input. Input can be handled through event listeners or by polling state each frame. Key source paths: src/input/InputPlugin.js , src/input/Pointer.js , src/input/keyboard/KeyboardPlugin.js , src/input/keyboard/keys/Key.js , src/input/keyboard/keys/KeyCodes.js , src/input/keyboard/combo/KeyCombo.js , src/input/gamepad/GamepadPlugin.js , src/input/gamepad/Gamepad.js , src/input/events/ , src/input/keyboard/events/ Related skills: ../sprites and images/SKILL.md, ../events system/SKILL.md, ../scenes/SKILL.md Quick Start (basic keyboard + pointer input) Core Concepts The Input Plugin (this.input) Accessed via this.input in any Scene. It is an EventEmitter that handles all input for that Scene. Key properties: this.input.enabled (boolean) toggle input processing for the Scene this.input.topOnly (boolean, default true ) only emit events from the top most Game Object under the pointer this.input.keyboard the KeyboardPlugin instance this.input.gamepad the GamepadPlugin instance this.input.mouse the MouseManager reference this.input.activePointer the most recently active Pointer this.input.mousePointer the mouse Pointer (pointers[0], distinct from pointer1 which is the first touch) this.input.pointer1 through this.input.pointer10 individual pointer references this.input.dragDistanceThreshold (number, default 0) pixels a pointer must move before drag starts this.input.dragTimeThreshold (number, default 0) ms a pointer must be held before drag starts this.input.pollRate (number, default 1) how often pointers are polled; 0 = every frame, 1 = only on movement Key methods: addPointer(quantity) add extra pointers for multi touch (default is 2; max 10) setHitArea(gameObjects, hitArea, hitAreaCallback) set custom hit area on Game Objects setHitAreaCircle(gameObjects, x, y, radius, callback) setHitAreaEllipse(gameObjects, x, y, width, height, callback) setHitAreaRectangle(gameObjects, x, y, width, height, callback) setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback) setHitAreaFromTexture(gameObjects, callback) use the texture frame dimensions setDraggable(gameObjects, value) enable or disable dragging makePixelPerfect(alphaTolerance) returns a callback for pixel perfect hit testing Pointers A Pointer object encapsulates both mouse and touch input. By default Phaser creates 2 pointers. Use this.input.addPointer(quantity) for more (up to 10 total). Key properties: x , y position in screen space (read from position.x , position.y ) worldX , worldY position translated through the most recent Camera downX , downY position when button was pressed upX , upY position when button was released isDown (boolean) true if any button is held primaryDown (boolean) true if primary button (left click / touch) is held button (number) which button was pressed/released (0=left, 1=middle, 2=right) buttons (number) bitmask of currently held buttons (1=left, 2=right, 4=middle, 8=back, 16=forward) wasTouch (boolean) true if input came from touch velocity (Vector2) smoothed velocity of pointer movement angle (number) angle of movement in radians distance (number) smoothed distance moved per frame movementX , movementY relative movement when pointer is locked deltaX , deltaY , deltaZ mouse wheel scroll amounts locked (boolean) whether pointer lock is active camera the Camera this Pointer last interacted with Key methods: leftButtonDown() , rightButtonDown() , middleButtonDown() , backButtonDown() , forwardButtonDown() check specific buttons leftButtonReleased() , rightButtonReleased() , middleButtonReleased() check recent release getDistance() distance between down position and current/up position getDistanceX() , getDistanceY() horizontal/vertical distance getDuration() ms between down and current time or up time getAngle() angle between down and current/up position updateWorldPoint(camera) recalculate worldX/worldY for a given camera positionToCamera(camera, output) translate pointer position through a camera Interactive Game Objects (setInteractive) Call gameObject.setInteractive() to enable input on a Game Object. This uses the texture frame as the hit area by default. Common Patterns Keyboard Input (cursors, addKey, isDown, JustDown) Cursor keys return an object with up , down , left , right , space , shift Key objects: addKey creates a Key object for any key: addKeys creates multiple keys at once: Polling vs events: Key object properties: isDown / isUp (boolean) keyCode (number) altKey , ctrlKey , shiftKey , metaKey (boolean) modifier state when pressed duration (number) ms held in previous down up cycle timeDown , timeUp (number) timestamps repeats (number) repeat count while held emitOnRepeat (boolean) if true, fires 'down' event on each repeat enabled (boolean) can this key be processed Prevent browser default behavior: Common KeyCodes: BACKSPACE(8) , TAB(9) , ENTER(13) , SHIFT(16) , CTRL(17) , ALT(18) , ESC(27) , SPACE(32) , LEFT(37) , UP(38) , RIGHT(39) , DOWN(40) , A Z(65 90) , ZERO NINE(48 57) , F1 F12(112 123) . Access via Phaser.Input.Keyboard.KeyCodes.SPACE etc. Mouse/Pointer Click and Hover Scene level pointer events (fire anywhere on the canvas): Game Object pointer events (require setInteractive): Right click handling: Pointer lock (FPS style mouse capture): Drag and Drop Game Object level drag events are also available: Drag thresholds: Three Levels of Pointer Events Pointer events fire at three levels (see [reference](references/REFERENCE.md three levels of pointer events) for details): 1. Game Object : gameObject.on('pointerdown', (pointer, localX, localY, event) = {}) 2. Scene per object : this.input.on('gameobjectdown', (pointer, gameObject, event) = {}) 3. Scene global : this.input.on('pointerdown', (pointer, currentlyOver) = {}) Input Debug, topOnly, and Multi touch Config Multi touch: set config.input.activePointers to reserve pointer slots at startup, or call this.input.addPointer(num) at runtime. Access via this.input.pointer1 through pointer10 . Gamepad Input Enable gamepads in the game config: Access via this.input.gamepad . Gamepads are available as pad1 through pad4 : Polling gamepad state in update(): Gamepad events: Vibration (experimental, hardware/browser dependent): Key Combos Listen for a sequence of keys: createCombo(keys, config): keys : a string (each character is a key) or an array of key codes / Key objects config.resetOnWrongKey (boolean, default true) reset progress if wrong key is pressed config.maxKeyDelay (number, default 0) max ms between key presses; 0 = no limit config.resetOnMatch (boolean, default false) reset combo after a successful match config.deleteOnMatch (boolean, default false) remove combo after first match For detailed configuration options, API reference tables, and source file maps, see [the reference guide](references/REFERENCE.md).

input-keyboard-mouse-touch