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.
At a glance
| Fact | Value | Source |
|---|---|---|
| Sprite sheet packing tool | TexturePacker | codeandweb.com |
| Aseprite CLI packing flag | –sheet-pack | aseprite.com |
| Phaser loader supports margin/spacing | margin, spacing params | docs.phaser.io |
Texture bleeding is neighboring frames on a sprite sheet showing thin lines or smears of the adjacent frame’s pixels. It happens when the GPU samples slightly outside a frame’s UV rect – during linear filtering, mipmap generation, or scaling – and picks up color from the sprite packed next to it. The fix is padding: leave empty (or extruded) pixels between frames so sampling never reaches into the next sprite.
If you build your web game with an AI coding agent, Playgama MCP lets an agent in Cursor, Claude Code, or Codex upload a build with the Playgama Bridge SDK integrated and publish a sandbox link to playtest rendering across devices.
Practical steps, in order: (1) When packing, add a margin around the whole sheet and spacing between frames – Aseprite’s sheet export and Phaser’s this.load.spritesheet(key, url, {frameWidth, frameHeight, margin, spacing}) both support this, per the Phaser loader docs. (2) Prefer extrusion over plain transparent padding – duplicate the edge row/column of pixels into the padding instead of leaving it transparent or black, since mipmaps average colors and transparent padding still bleeds a dark or empty fringe at small scale. (3) Use point/nearest filtering for pixel art so there’s no interpolation across frame edges at all. (4) Disable mipmaps for atlases viewed close to native size, since mipmap generation is a common bleeding source; if you need mipmaps, padding must be wide enough to survive several mip levels. (5) Keep sheet dimensions as powers of 2 where your engine or GPU benefits from it – this also helps avoid seam artifacts from imprecise texture coordinate conversion.
Tools like TexturePacker or Aseprite’s --sheet-pack CLI flag automate padding and packing so you don’t hand-place frames.
Sources
- Aseprite – Docs – Sprite-sheet
- Chapter 07: Optimizing Texture Rendering | MonoGame
- Loader | Phaser Help
- TexturePacker Documentation: Installation and Licensing
- Aseprite – Docs – Cli
- Playgama for developers
Related questions
Does padding waste texture memory?
A little – a few pixels per frame edge – but it’s cheap compared to visible seams. Packing tools optimize placement so total sheet size stays close to minimal.
Do I need padding for a Phaser sprite sheet (not an atlas)?
Yes if frames are packed tightly. Phaser’s spritesheet loader accepts margin and spacing values so you can pad without switching to a JSON atlas.
Why does bleeding get worse at smaller zoom or on mobile?
Lower resolution and mipmapping sample a wider area per pixel, pulling in more of the padding or neighboring frame – extrusion padding handles this better than transparent padding.
Last updated: 30 September 2026