Skip to main content
web-and-touch-input is a skill from the Summer skill library: a guide your AI agent reads when the task matches, so it builds the good version on the first try. Browser and phone input: the first-click rule for sound and mouse capture, focus, touch buttons, a stick.

​
When your agent uses it

  • The game plays in the browser and sound, mouse capture or keys do not work until something is clicked
  • The game should be playable on a phone or tablet with touch controls
  • Adding a virtual joystick, on-screen buttons or touch camera controls

​
Install

summer setup installs every skill for your agent. To add only this one:
Swap claude-code for your agent, such as codex or cursor. See Skills for every option.

​
The skill

A browser game is played with a keyboard and mouse on a computer, and with fingers on a phone. Build one set of input actions and drive it from both.

​
1. One set of actions

Bind every control as an input action (summer_input_map_bind): move_left, move_right, move_up, move_down, jump, action, pause. Game code only reads actions (Input.get_axis("move_left", "move_right"), Input.is_action_just_pressed("jump")), never raw keys, so touch controls can press the same actions.

​
2. The browser rules

  • Sound and mouse capture need a first click or key. Browsers block audio and pointer lock until the person interacts. Start music and call Input.mouse_mode = Input.MOUSE_MODE_CAPTURED from the title screen’s “Click to play” handler, never in _ready().
  • Escape releases the mouse in the browser on its own. Treat losing capture as a pause, and recapture on the next click.
  • Focus: the game only gets keys after it has been clicked. The title screen’s “Click to play” covers this.
  • Keep keys browser-safe: avoid Ctrl/Cmd shortcuts, F5, and Tab for gameplay.

​
3. Touch controls, only on touch screens

Add a TouchControls CanvasLayer (layer 10) and show it only when DisplayServer.is_touchscreen_available() is true:
  • Buttons: a TouchScreenButton per action, with its action property set to the input action name (for example jump). It presses the same action as the keyboard. Make them large (at least 96 px), semi-transparent, and placed in the bottom corners, away from the HUD.
  • Movement: for left/right only, two TouchScreenButtons (move_left, move_right). For free movement, a virtual stick: a Control in the bottom-left that reads InputEventScreenTouch and InputEventScreenDrag within its area and calls Input.action_press("move_right", strength) and Input.action_release(...) from the drag direction (dead zone about 0.2).
  • Camera look (3D): drags on the right half of the screen rotate the camera; keep them separate from the stick’s touch index.
  • Scale: anchor the layer to the viewport corners so it works in portrait and landscape.

​
4. Verify

Run the game and check the keyboard controls and the title screen’s first click. Set input_devices/pointing/emulate_touch_from_mouse on temporarily to try the touch buttons with the mouse, then turn it off again.

​
From a shell

No Summer MCP tools in this session? Run each one as a command; when summer --version is missing or below 4.0, use npx -y summer-engine@latest in place of summer. Fields are flags in kebab-case (--scene-path res://main.tscn) or one --input '<json>', and summer ops describe <op> prints the exact input. The summer-cli skill has the rest.
  • make-game: Orchestrate ‘make me a game’: brainstorm, plan, scaffold, mechanics, art, audio, polish, verify, ship.
  • character-movement: Player controllers for 2D and 3D, plus the standard third-person controller for Summer humanoids.
  • ui-basics: Build UI: HUDs, menus, health bars, dialogue boxes, Control trees, anchors, containers and themes.
Source: library/skills/web-and-touch-input/SKILL.md, rendered from summer-engine@4.3.0 on npm.