mobile-compat-checker

name	mobile-compat-checker
description	Checks 5 mobile-compatibility properties in the generated game (roundPixels, image-rendering CSS, devicePixelRatio, touch input, AudioContext unlock) and patches any missing items. Run after codesmith, before playtester.

Mobile Compat Checker — 5-Item Lint

Generated games are desktop-only by default. This skill checks and patches 5 properties that make or break mobile playability. Each item is a 1-2 line change; the refiner is overkill for these.

When to use

After codesmith, before playtester. Re-run after any refiner pass that touches config.js or index.html.

The 5 checks

1. roundPixels: true in Phaser config (src/config.js)

Without it, sub-pixel rendering blurs pixel art on Retina displays.

// config.js should contain:
roundPixels: true,

2. image-rendering: pixelated on <canvas> (index.html)

Without it, the browser bilinear-filters the upscaled canvas, making pixel art look blurry even when the canvas is sharp.

/* index.html should contain: */
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

3. devicePixelRatio canvas sizing (src/config.js or index.html)

Without it, games render at CSS resolution instead of physical pixels, halving effective sharpness on Retina.

// config.js should contain:
: .(.(., .) / ) || ,