> ## Documentation Index
> Fetch the complete documentation index at: https://docs.summerengine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web and touch input skill for AI agents

> Browser and phone input: the first-click rule for sound and mouse capture, focus, touch buttons, a stick. A Summer Engine skill for AI agents.

`web-and-touch-input` is a skill from the [Summer skill library](/mcp/skills): 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.

| | |
| - | - |
| Status | Preview: not yet exercised in-engine by the Summer team |
| Domains | Gameplay, UI |
| Version | `1.0.0` |
| Engine version | `>=4.6` |
| Recommended set | Yes, installed by `--recommended` |

## 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:

```bash theme={null}
npx -y summer-engine@latest skills install web-and-touch-input --agent claude-code
```

Swap `claude-code` for your agent, such as `codex` or `cursor`. See [Skills](/mcp/skills#quick-start) 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.

| In this skill | Command |
| - | - |
| `summer_add_node` | `summer engine add-node` |
| `summer_batch` | `summer engine batch` |
| `summer_get_diagnostics` | `summer engine get-diagnostics` |
| `summer_input_map_bind` | `summer engine input-map-bind` |
| `summer_play` | `summer engine play` |
| `summer_save_scene` | `summer engine save-scene` |
| `summer_screenshot` | `summer engine screenshot` |
| `summer_set_prop` | `summer engine set-prop` |
| `summer_stop` | `summer engine stop` |
| `summer_write_file` | `summer engine write-file` |

## Related skills

* [`make-game`](/skills/make-game): Orchestrate 'make me a game': brainstorm, plan, scaffold, mechanics, art, audio, polish, verify, ship.
* [`character-movement`](/skills/character-movement): Player controllers for 2D and 3D, plus the standard third-person controller for Summer humanoids.
* [`ui-basics`](/skills/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`](https://github.com/SummerEngine/summer/blob/main/library/skills/web-and-touch-input/SKILL.md), rendered from `summer-engine@4.3.0` on npm.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.