Use Pointer Events (pointerdown/move/up) on a fixed-position overlay layer, track a base and knob element for the joystick, normalize the drag vector, and only render the controls when you detect a touch or mobile device so desktop users keep keyboard/mouse input.
At a glance
| Fact | Value | Source |
|---|---|---|
| Recommended input API for controls | Pointer Events | developer.mozilla.org |
| Where to detect device for UI | device type check | wiki.playgama.com |
Build touch controls as a separate UI layer, not baked into your canvas render loop: an absolutely-positioned overlay (HTML/CSS or engine UI canvas) that listens for pointerdown, pointermove and pointerup. Pointer Events cover mouse, touch and pen with one API, so your desktop and mobile code paths stay close together. For a virtual joystick, track a fixed ‘base’ element and a draggable ‘knob’; on move, clamp the knob’s offset to the base radius and output a normalized vector (x, y each -1 to 1) that your character controller reads every frame, exactly like a gamepad axis.
Only show the overlay when it’s needed. Rather than sniffing user agents, check the device type your platform SDK reports and toggle the controls layer – the Playgama Bridge adapts one HTML5 build to 25+ platforms and exposes device detection to show the joystick on touch devices.
How do you handle touch controls across different engines?
- Unity WebGL: build the UI with Unity’s UI system and read touch input directly; if you need browser-level device info, call out through a .jslib plugin as described in Unity’s browser scripting docs.
- Godot 4 web export: use Control nodes for the overlay and
JavaScriptBridgeif you need to query the browser for anything the engine doesn’t expose. - Plain JS/Canvas games: attach listeners to a DOM element positioned over the canvas so pointer coordinates map cleanly to game-world coordinates.
Always add a dead zone near the base center to avoid jitter, and release/reset the knob on pointerup and pointercancel (mobile browsers can fire cancel instead of up).
Sources
- MDN: Game development
- Unity manual: interacting with browser scripting
- Godot docs: exporting for the Web
- Playgama wiki: Device
- Playgama Bridge docs
Related questions
Should I use touch events or pointer events for mobile controls?
Prefer Pointer Events: they unify mouse, touch and pen into one event model, so the same listeners work across desktop and mobile without duplicating logic.
How do I stop the joystick from jittering when the finger barely moves?
Add a small dead zone around the base center – ignore offsets below a minimum radius before converting the drag into a movement vector.
How do I detect whether to show touch controls at all?
Check a reported device type (mobile, tablet, desktop, tv) from your platform SDK rather than user-agent sniffing, and toggle the overlay layer based on that value.
Last updated: 24 September 2026