Component·phaserthree·v1.0.0·MIT

Mobile Joystick

On-screen virtual joystick for touch input. Renders to a DOM element; exposes a 2D vector for gameplay. Engine-agnostic.

#mobile#touch#joystick#input

Install

npx gamecn add mobile-joystick

Source preview

Compatibility

Engines
phaser >=3.80.0 <4.0.0three >=0.160.0
Frameworksvanilla, react
Languagestypescript
Bundlersvite
Platformsweb, mobile-web

Files installed

  • {components}/MobileJoystick.ts
  • docs/gamecn/mobile-joystick.md(docs)

Notes

Usage

import { MobileJoystick } from "@/components/MobileJoystick";

const stick = new MobileJoystick({
  parent: document.getElementById("game")!,
  radius: 60,
  alwaysVisible: false,
});

// In your update loop:
function update(): void {
  const { x, y } = stick.getVector(); // each in [-1, 1]
  player.setVelocityX(x * speed);
  player.setVelocityY(y * speed);
}

// Cleanup
stick.dispose();

Behavior

  • Hidden by default; reveals at the touch point on pointerdown.
  • Tracks drag, clamped to radius.
  • Snaps back on pointerup.
  • Honors a deadzone (default 10%) to suppress drift at rest.

Options

Option Default Description
parent required Element receiving pointer events.
radius 60 Max drag distance in pixels.
knobColor #ffffff Knob CSS color.
ringColor rgba(255,255,255,0.25) Base ring color.
alwaysVisible false Show even when idle.
deadzone 0.1 Magnitude below which the vector reports zero.

Notes

  • Sets touch-action: none on the parent so swipes don't scroll. Restored on dispose().
  • Designed to coexist with desktop input — pair with the input-manager item for keyboard fallback.

Related