Playing an RTS with your thumbs
A finger has no right button, no hover and no Shift, and it covers what it touches. Designing real-time strategy controls for a phone means replacing each of those, not emulating them.
Real-time strategy is the genre most obviously built for a mouse. Box-select is a drag. Attack-move is a keyboard letter. Queueing orders is Shift. Right-click is the entire command vocabulary: move here, attack that, enter this. Take the mouse away and you have removed the interface, not just the hardware.
The usual response is emulation — a virtual trackpad, an on-screen cursor, a floating right-click button. It never feels right, because a finger is not a bad mouse. It is a different device with different properties, and it deserves a different command model.
Here is the one Steel Tide uses, and why each piece is shaped the way it is.
What a finger actually cannot do
Four constraints, and every touch decision follows from them:
- There is no second button. Selection and commanding have to share one gesture.
- There is no hover. Anything that a mouse would explain by hovering has to be explained some other way, or not need explaining.
- There are no modifier keys. Shift-queue, Ctrl-group and box-select all lose their trigger.
- A finger covers what it is touching. You cannot see the tile you are pressing, which quietly breaks anything that commits on release.
Replace, don't emulate
The core model is that a tap means "the obvious thing", and what is obvious depends on what is currently selected.
| gesture | result |
|---|---|
| tap your own unit | select it; tap again to take every unit of that type on screen |
| tap the map with something selected | move, attack or interact — whichever the target implies |
| tap an enemy with nothing selected | inspect it |
| long press (420 ms) | attack-move to that point |
| one-finger drag | pan the camera |
| two fingers | pinch to zoom, drag to pan |
| minimap tap or drag | jump the camera there |
| minimap long press | order the selection there |
That covers the great majority of what a player does in a match, with no buttons at all. The double-tap-to-take-all-of-a-type replaces the mouse's double-click and does the job of a drag-select most of the time, which is exactly why it is worth the gesture.
The few things that still need a button
Modifier-only actions get latched buttons in a bar at the bottom right — and the bar carries only what has nowhere else to live:
- ⊘ clears the selection. Touch has no Escape key, and while units are selected every tap on the map is an order. Without this there is no way to stop commanding and simply look at the map.
- ▣ switches drag from panning to box-select. It is sticky, so several selections in a row are cheap.
- ⇧ stands in for holding Shift: queue orders, add to the selection.
- ⚑ selects every mobile unit you own.
- ✓ / ✕ confirm or cancel a building placement, and appear only while placing.
Orders themselves — attack-move, stop, hold, unload, sell, upgrade — deliberately stay in the command card where they live on desktop. There should be one place to look for a command, on every device. A bar that grows to hold everything is a bar nobody reads.
Placing a building is two steps, on purpose
On a mouse, you place a building by clicking the tile. On a phone, your finger is on top of the tile, so committing on release means committing blind.
So placement is: drag or tap to aim the ghost, then confirm with ✓ — or tap the already-aimed tile a second time, for players who would rather not travel to the button. It is one extra action, and it is the difference between placing a factory and placing a factory somewhere near where you meant.
The HUD folds, it does not shrink
Scaling a desktop layout down produces a layout that is correct and unusable. A phone HUD has to be reorganised.
The sidebar stays, because an RTS needs a persistent build menu. Below 640 pixels of height it splits into two tabbed pages — Map (resources, power, minimap) and Command (objectives, selection, build cards, activity log) — and selecting something flips to the command page automatically, since that is why you selected it. The build grid drops to two columns so the wider column buys bigger targets rather than more of them. The clock is dropped so that menu, pause and speed always share one row. The activity feed moves out of the sidebar and becomes shadowed text over the map, which costs a narrow column nothing.
One variable controls the sidebar width, and the collapse toggle hangs off it, so a breakpoint changes both by changing one number.
Two details that only show up on real hardware: tooltips must ignore touch pointers entirely, because a tap fires the mouse compatibility events too and a tooltip raised by a finger has no "leave" to dismiss it. And the canvas backing store runs at up to twice CSS pixels on a touch device, so pixel art is not resampled into mush by a 3× phone panel.
It installs, and then it works offline
Because the whole thing is a web app, adding it to a home screen is the install. It launches fullscreen with no browser chrome, under the notch, with safe areas padded back out by the HUD.
A service worker precaches the shell — index, scripts, styles, icons, fonts — and versions it by fingerprint, so a new build never mixes with an old one. Sprites and music are tens of megabytes, so they are cached lazily as they are used rather than downloaded before the menu appears. Anything the dedicated server has to answer live is never cached at all.
The result is a genuine RTS you can install on a phone from a link, play offline against the AI on a plane, and pick up on a desktop afterwards at the same address.
What is still missing
Portrait is a rotate prompt rather than a layout — an RTS wants the horizontal space, and a portrait HUD would be a different design rather than the same one turned. Native packaging is the other open item: the assets should ship inside an app rather than through the media cache, which would also remove the first-run network dependency.
Everything else is already there. Open it on your phone and see how far the tap-and-long-press model gets you.