Fix: Construct 3 Touch Input Not Working on Mobile

Here is how to fix Construct 3 touch input not working on mobile. Your game works perfectly with mouse clicks on desktop, but when you open it on a phone or tablet, tapping the screen does nothing. Buttons do not respond, the player does not move, and touch-based controls are completely dead. This is one of the most reported issues when deploying Construct 3 games to mobile, and it usually comes down to a missing plugin or the wrong event type.

The Symptom

You preview or export your Construct 3 project and open it on a mobile device. The game loads and renders correctly, but touching the screen has no effect. If you have on-screen buttons, tapping them does nothing. If your game uses “touch to move” or “tap to shoot” mechanics, none of those inputs register.

The game may work perfectly in the browser preview on desktop using mouse clicks. This discrepancy between desktop and mobile behavior is the key clue — it means the rendering and game logic are fine, but the input system is not configured for touch.

In some cases, touch works for certain elements but not others, or it works in portrait mode but fails in landscape. These partial failures point to viewport scaling or coordinate mapping issues rather than a missing plugin.

What Causes This

There are six common causes:

1. Touch plugin not added. This is the most frequent cause. Construct 3 does not include the Touch plugin by default — you must add it manually. Without the Touch object in your project, touch events simply do not exist. Mouse events only respond to mouse input, not to finger taps on touchscreens.

2. Using Mouse events instead of Touch events. Even with the Touch plugin added, if your event sheets use “Mouse > On click” instead of “Touch > On touch start,” those events will not fire on mobile devices. Mouse and Touch are separate input systems in Construct 3. The Touch plugin has a “Use mouse input” property that makes mouse clicks trigger Touch events on desktop, but there is no reverse — touches do not trigger Mouse events.

3. Viewport scaling issues. If the project’s fullscreen mode is set to “Off” and the viewport size does not match the device screen, touch coordinates may be offset from visual positions. You tap a button at the center of the screen, but the engine registers the touch at a completely different location because the canvas is not scaled to fill the screen.

4. Fullscreen mode not configured. Mobile browsers display toolbars, address bars, and navigation elements that reduce the available screen area. If your game does not request fullscreen or handle the reduced viewport, touch targets near the edges of the screen may be occluded by browser chrome.

5. Touch permission and manifest issues. When exporting as a mobile app (via Cordova or as a PWA), the app manifest and permission configuration may affect touch handling. Missing touch-related permissions or incorrect display mode settings can cause touches to be intercepted by the system rather than passed to the game.

6. iOS Safari quirks. Safari on iOS has unique behaviors: it intercepts two-finger touches for zoom by default, it delays single taps by 300ms for double-tap detection (on older versions), and it requires a user gesture to start audio context. These quirks can make touch feel broken or unresponsive, even when the basic touch handling is working.

The Fix

Step 1: Add the Touch plugin. In the Project panel, right-click on “Object types” and select “Add new object type.” Search for “Touch” and add it. The Touch object does not need to be placed on a layout — it is a project-wide plugin.

// After adding Touch plugin, configure its properties
// Select the Touch object in the Project panel
// Properties:
//   Use mouse input: Yes  (allows desktop testing)

Step 2: Replace Mouse events with Touch events. Go through your event sheets and replace Mouse conditions with Touch equivalents:

// WRONG: Mouse events don't work on mobile
Condition: Mouse > On click > Left clicked
Action:   Player > Set position to (Mouse.X, Mouse.Y)

// CORRECT: Touch events work on both mobile and desktop
Condition: Touch > On touch start
Action:   Player > Set position to (Touch.X, Touch.Y)

// For checking if currently touching (held down)
Condition: Touch > Is in touch
Action:   Player > Move at angle Touch.AngleAt(0) speed 200

Step 3: Configure viewport scaling. Open Project Properties and set the fullscreen mode to a scaling option that handles different screen sizes:

// Project Properties settings for mobile
// Viewport size: 480 x 854  (or your target resolution)
// Fullscreen mode: "Letterbox scale"
//   - Scales the game to fill the screen while maintaining
//     aspect ratio. Black bars appear on edges if needed.
//
// Alternative: "Scale outer"
//   - Scales the game to fill the screen, expanding the
//     visible area beyond the viewport size. No black bars.
//
// Avoid: "Off"
//   - No scaling. Touch coordinates will be misaligned
//     on screens that differ from the viewport size.

Step 4: Request fullscreen on user gesture. Mobile browsers require a user interaction before entering fullscreen. Add a “tap to start” screen:

// Title screen: enter fullscreen on first tap
Condition: Touch > On touch start
Condition: System > Is on mobile device
Action:   Browser > Request fullscreen > "letterbox-scale"
Action:   System > Go to layout > "Game"

Step 5: Handle iOS Safari issues. For iOS-specific touch problems, add the following to your exported game’s HTML. If using Construct 3’s built-in export, these are often handled automatically, but custom shells may need manual configuration:

/* Add to your custom CSS or style tag in the export shell */
/* Prevent iOS Safari from intercepting touches for gestures */
canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent pull-to-refresh on Chrome Android */
body {
  overscroll-behavior: none;
}

// Handle iOS audio context requirement
// Play a silent sound on first touch to unlock audio
Condition: Touch > On touch start
Condition: System > Trigger once
Action:   Audio > Play "silence.webm" (not looping, volume -100)

Step 6: Test with remote preview. Use Construct 3’s remote preview feature (Preview > Remote preview) to test on your actual mobile device while still in development. This avoids export-related issues and lets you iterate quickly on touch handling.

Why This Works

Each fix addresses a different layer of the mobile touch input pipeline:

Adding the Touch plugin registers the necessary event listeners on the HTML5 canvas element. Without it, Construct 3 never calls addEventListener('touchstart', ...) and the browser’s touch events are simply ignored by the engine.

Using Touch events instead of Mouse events ensures your event sheet logic responds to the correct input type. On mobile, the browser fires touchstart/touchend/touchmove events, not mousedown/mouseup/mousemove. While some browsers synthesize mouse events from touches, this synthesis is unreliable and often delayed.

Viewport scaling ensures that the CSS pixel coordinates reported by touch events map correctly to the game’s internal coordinate system. Without proper scaling, the canvas may be a different size than the screen, causing a mismatch between where you tap and where the engine thinks you tapped.

Fullscreen mode removes browser chrome that can intercept touches or reduce the available touch area. On mobile Safari, the address bar and bottom toolbar can capture touches intended for the game, especially near the top and bottom screen edges.

CSS touch-action: none tells the browser not to handle touches on the canvas element for its own gestures (pinch-to-zoom, scroll, pull-to-refresh). Without this, the browser may consume touch events before they reach the game.

"I lost an entire day to this. The game worked great on my laptop. The moment I opened it on my phone — nothing. Turns out I never added the Touch plugin. One click to add it and everything worked."

Related Issues

If touch input works but the game runs slowly on mobile, see our guide on Construct 3 low FPS and performance lag. If your exported game does not load at all on mobile, check exported game not running or blank screen. And if sprites are not showing despite touch working correctly, see sprite not showing on layer for visibility debugging.

Add the Touch plugin first. Always add the Touch plugin first.