Ensures crisp pixel art rendering in 2D game projects
When working on a pixel art game, ensure sprites render crisp without subpixel blurring. Blurry pixel art is the #1 visual bug in retro-style games.
Detect pixel art context. Look for signs this is a pixel art project:
Check rendering settings. Scan the codebase for:
context.imageSmoothingEnabled must be falsecanvas.style.imageRendering must be pixelated or crisp-edgesNEAREST, not LINEARimage-rendering: pixelated on any element displaying spritesimage-rendering: crisp-edges as fallback for Firefoxtransform: scale() with fractional values on sprite elementspixelArt: true in game config, or
this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST)PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
or texture.baseTexture.scaleMode = NEARESTtexture.magFilter = THREE.NearestFilter and
texture.minFilter = THREE.NearestFilterCheck scaling math. Verify:
Check CSS units. If sprites are positioned with CSS:
transform: translate() can cause subpixel positioning — use left/
top with integer values instead, or round transformsReport and fix. If issues are found, fix them directly:
imageSmoothingEnabled = false to canvas setupimage-rendering: pixelated CSS ruleimageSmoothingEnabled = false), just add it without asking.image-rendering: pixelated CSS rule
solves 80% of blurry pixel art issues. Start there.