Answers for developers, publishers and site owners on monetizing and distributing web games.
336 posts
Bind pointerdown, pointermove, pointerup and pointercancel instead of separate mouse and touch listeners. Pointer Events fire for mouse, touch and pen from one API, carry a pointerId for multi-touch, and need touch-action: none in CSS to stop the browser from scrolling or zooming the canvas.
WebGL 1 requires power-of-two texture dimensions to generate mipmaps and use REPEAT/MIRRORED_REPEAT wrapping; non-POT textures only support CLAMP_TO_EDGE and no mipmaps. WebGL 2 removed most of this restriction, but POT textures remain the safe, portable choice, especially for mobile.
Put persistent facts - build commands, folder layout, engine version, "always do X" rules - into CLAUDE.md for Claude Code and into .mdc files under .cursor/rules for Cursor, or use one shared AGENTS.md that both can read.
To render crisp pixel art in HTML5 Canvas without anti-aliasing blur, set ctx.imageSmoothingEnabled = false on the 2D context before drawing. Scale your sprites using whole integer factors, and apply the CSS rule image-rendering: pixelated to the canvas element so any browser-level upscaling stays completely sharp without interpolation blur.
Load the sprite sheet as one image, then each frame call drawImage() with the 9-argument form: source x/y/width/height picks the current frame from the sheet, destination x/y/width/height places it on the canvas. Clear the canvas and advance the frame index on a timer or via requestAnimationFrame.
Download size is the compressed bytes the browser fetches over the network before your game starts; GPU VRAM is the uncompressed memory textures, meshes and buffers occupy on the graphics card once decoded. A small download can still blow the VRAM budget on low-end devices.
Describe the sound as a physical event: source object, action, material, environment and duration, then name a reference genre. Generate several takes, pick the cleanest, and check the tool's terms before shipping - some SFX licences explicitly forbid using the audio to train AI models.
Describe mood, instruments, tempo and exact bar length, and explicitly ask for a continuous loop with no intro, outro, or fade. But the loop itself is enforced in code: set AudioBufferSourceNode.loop = true, not by the AI tool.
Provide both files and let the browser pick: use <audio><source> with WebM/Opus listed before MP3, or test with Audio.canPlayType() before loading. In Web Audio code, try decoding the Opus file and catch the error to load MP3 instead.
Texture bleeding happens when neighboring frames leak into each other from filtering or mipmapping. Fix it by adding padding (extruded edge pixels) between frames when packing, keeping sheet dimensions power-of-2 where your engine benefits from it, and disabling mipmaps or point/nearest filtering when frames sit close together.