Phaser home
Log inCreate a game

← Expansion packsLogic

Phaser AE

On-screen touch controls

Free packv3.0.0-42DLogic

Round buttons and a thumb stick for phones and tablets. They press key codes rather than reporting a separate stick vector, so the game binds them beside its keyboard keys and has exactly one way to move, tested on every device.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 20, 2026

On-screen touch controls: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

The pack

controlsTouch

function controlsTouch(opts: ControlsTouchOptions = {}): Pack<{ touch: ControlsTouchApi }>

The touch-controls pack: on-screen buttons and a thumb stick that press key codes, so a phone drives the same bindings as a keyboard. Requires world:screen for the layer it draws on and typography for button labels. Headless it presses nothing and draws nothing.

Types

ControlsTouchApi

interface ControlsTouchApi

game.touch.

  • visible: boolean — Are the controls up. Set it to force them on a desktop (a demo, a screenshot) or off during a cutscene.
  • readonly stick: { x: number; y: number } — The stick's thumb offset, each axis −1..1, already past the deadzone. { x: 0, y: 0 } with no stick.
  • readonly held: ReadonlyArray<string> — Which codes are held by the controls right now.
  • button(spec: TouchButtonSpec): void — Add a button after attach — a level that adds a second action.
  • readonly touchDevice: boolean — True when the device reports touch, whatever visible says.

ControlsTouchOptions

interface ControlsTouchOptions

Manifest options.

  • buttons?: ReadonlyArray<TouchButtonSpec> — The buttons.
  • stick?: TouchStickSpec — The thumb stick, if there is one.
  • touchOnly?: boolean — Show the controls only on a touch device. Default true. A desktop player does not want a d-pad over their game, and a phone player cannot play without one, so the default is to ask the device.
  • alpha?: number — Opacity of the controls. Default 0.35 — visible enough to aim at, faint enough to see the game through.
  • layer?: LayerName — The layer they draw on. Default 'hud', or the last layer when there is no hud.

TouchAnchor

type TouchAnchor = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'

Where a control sits. The offset is measured from that corner, always inward.

TouchButtonSpec

interface TouchButtonSpec

A round on-screen button.

  • code: string — The key code it presses while held. Use one no keyboard has — 'Touch:jump' — and bind it alongside the real keys.
  • label?: string — A short label drawn on it (rendered with Typography).
  • anchor?: TouchAnchor — Which corner it is measured from. Default 'bottom-right'.
  • x?: number — Inward offset from the corner to the button's CENTRE, in screen pixels. Default 70, 70.
  • y?: number — Inward offset down (or up) from the corner.
  • r?: number — Radius in screen pixels. Default 34.
  • tint?: string — Fill colour. Default white.

TouchStickSpec

interface TouchStickSpec

A thumb stick: four codes, pressed by direction.

  • codes: { left?: string; right?: string; up?: string; down?: string } — The codes pressed while the thumb is that way.
  • anchor?: TouchAnchor — Which corner it is measured from. Default 'bottom-left'.
  • x?: number — Inward offset to the stick's centre. Default 70, 70.
  • y?: number — Inward offset.
  • r?: number — Radius of the ring, in screen pixels. Default 50.
  • deadzone?: number — Fraction of the radius the thumb must leave before a direction presses. Default 0.35 — below that a resting thumb jitters between left and right, which reads as the game fighting the player.
  • tint?: string — Fill colour. Default white.