skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

input-keyboard-mouse-touch

Implements keyboard, mouse, touch, drag-and-drop, and gamepad input handling in Phaser 4 games.

Updated May 7, 2021
Search Tags:#game development#drag and drop#keyboard#input handling#phaser#gamepad#touch events
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill input-keyboard-mouse-touch-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: input-keyboard-mouse-touch
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/input-keyboard-mouse-touch
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill input-keyboard-mouse-touch-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Handling user input in Phaser games involves many APIs—keyboard polling, pointer events, hit areas, drag-and-drop, and gamepads—and getting the details right (event levels, hit testing, multi-touch) is error-prone without a consolidated reference. ## Core Features & Use Cases - Keyboard Input: Create cursor keys, register individual keys with addKey/addKeys, poll with isDown or JustDown, listen for keydown events, and build key combos like the Konami code. - Pointer & Touch Input: Handle clicks, hover, mouse wheel, multi-touch pointers, pointer lock, and right-click via a unified Pointer API on Scenes and Game Objects. - Drag and Drop & Hit Areas: Make objects draggable, define drop zones, and configure geometric or pixel-perfect hit areas with setInteractive. - Gamepad Support: Poll analog sticks, buttons, and D-pad state, and respond to connect/disconnect events. - Use Case: Build a platformer where the player moves with WASD or arrow keys, jumps with spacebar, clicks UI buttons with hover cursors, drags inventory items into slots, and supports an Xbox controller. ## Quick Start Ask the AI to set up keyboard movement with cursor keys and a clickable, draggable sprite in a Phaser Scene.

Frequently Asked Questions about input-keyboard-mouse-touch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle keyboard input in Phaser?▼

Use this.input.keyboard.createCursorKeys() for arrow keys or addKey/addKeys for specific keys like WASD. Poll key.isDown in update() for held keys, or use Phaser.Input.Keyboard.JustDown(key) for one-time presses, and listen to 'keydown-SPACE' style events for specific keys.

How do I make a sprite clickable in Phaser?▼

Call sprite.setInteractive() to enable input using the texture frame as the hit area, then listen with sprite.on('pointerdown', callback). You can pass custom geometric shapes like Circle or Polygon, or enable pixel-perfect hit testing with an alpha tolerance.

How do I implement drag and drop in Phaser?▼

Call setInteractive() on the object and enable dragging with this.input.setDraggable(sprite) or the { draggable: true } config. Then handle 'dragstart', 'drag', and 'dragend' events, and create drop zones with zone.setRectangleDropZone() to receive 'drop' events.

Does Phaser support gamepad input?▼

Yes, enable it with input: { gamepad: true } in the game config, then access pads via this.input.gamepad.pad1 through pad4. You can poll buttons, D-pad, and analog sticks each frame or listen for 'connected', 'down', and 'up' events; note browsers require HTTPS and a user gesture.

Why are my Phaser pointer events not firing on a Game Object?▼

The most common cause is forgetting to call setInteractive() on the object before adding listeners. Containers additionally need setSize() or an explicit hit area shape, and this.input.topOnly being true means only the top-most object under the pointer receives events.

How do I detect multi-touch input in Phaser?▼

Phaser creates 2 pointers by default; call this.input.addPointer(n) or set input.activePointers in the game config for more, up to 10. Access individual touch pointers via this.input.pointer1 through pointer10, while this.input.mousePointer always refers to the mouse.

Related Skills

Explore More Software Engineering Skills→
Yakoub-aiYakoub-ai
17

phaser-coder

Implement Phaser 4 game features with TypeScript and class-based scenes.

Official
Advanced
kehwarkehwar

audio-and-sound

Manage audio playback, volume, and mute in Phaser 4 games.

Community
Advanced
fiandofiando
1

dev-phaser-ui-creation

Create game HUDs, buttons, dialogs, and DOM overlays with Phaser 3 UI components.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate