7,371 posts
Cap the device pixel ratio, batch draw calls, keep textures power-of-two and compressed, avoid per-frame allocations, and use WebGL rather than full 2D canvas redraws for anything animated. Test on real mid-tier phones, not desktop dev tools.
Set the canvas's CSS size to fill its container, then set its actual width/height (backing store) to CSS size times devicePixelRatio for sharpness. Listen for resize and orientationchange, recompute a scale factor, and rescale your game's internal coordinate system on every change.
Run a stateless WebSocket server that assigns each connection a player ID, puts players into room objects held in server memory (or Redis for multiple servers), and matches players by queueing them and pairing on shared criteria before creating a room and broadcasting join events.
Use a viewport meta tag setting width=device-width, initial-scale=1, maximum-scale=1 and user-scalable=no plus CSS that locks the canvas to 100% of the viewport, disables touch gestures with touch-action: none, and removes default margins and overscroll.
Client prediction moves the local player immediately without waiting for the server; server reconciliation corrects that local state when the authoritative server update arrives, replaying unacknowledged inputs; interpolation smooths remote players' positions between the delayed snapshots you receive over WebSockets.
Create a native WebSocket object in your game's JavaScript code (not inside Canvas draw calls or a Phaser Scene's render loop), listen for open, message, close and error events, and feed incoming data into your game state so Phaser or your canvas render loop just reads updated values each frame.
Use a WebSocket server (Node.js, Elixir/Phoenix, or Go) holding authoritative game state per room, broadcasting deltas at a fixed tick rate, with clients rendering via Canvas or WebGL and reconciling with client-side prediction. Language matters less than a clean room/tick architecture.
Since Godot 4.3, web exports use the Web Audio API for sound by default; you can switch back to Godot's own audio system in export settings. iOS Safari adds extra constraints (audio needs a user gesture to start, WebGL/memory limits are tighter), so test on real iOS devices, not just desktop browsers.
Threaded Godot web exports require two HTTP headers: Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp. These response headers enable SharedArrayBuffer in the browser, which Godot needs for web worker threading. If your hosting provider cannot serve custom headers, disable threads in your export preset so the game runs everywhere.
Godot 4 HTML5 export runs on the browser's WebGL implementation, so use the GL Compatibility rendering method for your export. The Forward+ renderer used for high-end desktop/console builds is not available in web exports.