Answers for developers, publishers and site owners on monetizing and distributing web games.
336 posts
Zip your entire game folder so index.html sits at the root of the archive, not inside a subfolder. Keep file counts and total size under each portal's limits, use relative paths, and compress (Brotli/Gzip) where the portal requires it before upload.
In Phaser, use this.load.spritesheet() for a grid of equal-size frames, and this.load.atlas() (or atlasXML) for a TexturePacker JSON/image pair with frames of different sizes. In PixiJS, call Assets.load() with the atlas JSON URL; PixiJS reads the linked image automatically.
No single tool reliably turns a prompt into a finished, portal-ready HTML5 game. Realistic AI use today: coding agents (Claude Code, Cursor, Codex) write and edit game code in standard web engines, and asset generators produce art or audio - you still assemble, test and optimize the build yourself.
Mobile browsers create the AudioContext in a suspended state and only let it start after a genuine user gesture. Call context.resume() inside the click/tap event handler itself, then start playback - don't wait for a later async callback to do it.
Text-to-audio tools such as Suno generate music, and research models like Meta's MusicGen and AudioGen generate music and sound effects from text prompts. Before using output in a game, check each tool's terms of service - some restrict competing uses or AI training reuse.
Mobile (and most desktop) browsers suspend audio until the user has interacted with the page - a click, tap or key press. This is a built-in autoplay policy, not a bug. Start or resume your AudioContext inside that first input event, or start audio muted until unmuted.
Serve MP3 as the safe default for browser compatibility and add an OGG (Vorbis/Opus) source for smaller size where supported. Keep sound effects short and compressed, load audio through the Web Audio API where available, and always gate playback behind a user gesture.
Snap the AI output to a real pixel grid first, downscale with nearest-neighbor (not bilinear/bicubic), then set CSS image-rendering: pixelated (or crisp-edges) so the browser doesn't smooth it again when it scales the canvas.
Use glTF binary (.glb) for models - it is Three.js's native, best-supported format. Compress textures to KTX2/Basis Universal and geometry with Draco or meshopt. Avoid raw OBJ/FBX/uncompressed PNG textures in production builds; they load slower and bloat memory.
Run AI-generated meshes through a decimation/simplification pass (meshoptimizer or gltfpack), compress geometry with Draco or meshopt, and cut texture resolution and vertex count until the whole scene fits your download-size budget and still loads fast in a browser tab.