Sprite sheets and seamless textures for games
Games draw hundreds of small images every frame. Loading each as a separate file is slow, so they are packed into one big image, a sprite sheet, with a data file saying where each frame is. Backgrounds and floors do the opposite: one small tile repeated across the screen, which only works if its edges meet without a seam.
Sprite sheet or texture atlas?
- A sprite sheet in the strict sense is a grid of equal-sized frames, usually one animation. The engine only needs the frame width and height.
- A texture atlas is a sheet plus a data file (usually JSON) listing each frame's name and rectangle. Frames can differ in size, and you load them by name instead of by index.
The Sprite Sheet Generator makes both at once: a PNG grid and a JSON atlas in the TexturePacker "hash" format that Phaser, PixiJS and many other engines read directly.
Packing frames cleanly
- Name frames in order with zero-padded numbers (walk-01, walk-02 … walk-10) so they sort correctly.
- Make every frame the same size for animations, with the character in the same spot, or the animation will jitter.
- Add 1 or 2 pixels of padding between frames. Without it, scaling and texture filtering can pull a line of the next frame into view (texture bleeding).
- Use nearest-neighbour scaling for pixel art, never smooth scaling, so the pixels stay crisp. The generator's Pixel art scaling option does this; for the art itself see Image to Pixel Art.
- Keep sheets at or below 2048×2048 if you target older phones or WebGL 1. Power-of-two sizes are no longer required by modern GPUs, but they still avoid problems with mipmapping on older hardware.
- Trim transparent space around single images first; Make Background Transparent and the cropper help with frames drawn on a solid colour.
Loading the result
Keep the PNG and the JSON together with the names they download as. In Phaser 3: this.load.atlas('hero', 'hero.png', 'hero.json'), then reference frames by name. In Unity, import the PNG, set its Sprite Mode to Multiple and slice it by cell size in the Sprite Editor. In Godot, use an AnimatedSprite2D and add frames from the sheet by grid size.
Seamless textures
A texture tiles seamlessly when its right edge continues into its left edge and its bottom into its top. Photos never do that by accident. Two ways to fix it:
- Blend the edges. The tile is shifted by half its size so the seams sit in the middle, then the seam is blended away. This keeps the texture looking natural and works best on even surfaces: grass, gravel, stone, bark, sand, fabric, clouds.
- Mirror. The image is flipped into a 2×2 block, which always tiles perfectly but creates visible symmetry. Good for abstract backgrounds and patterns, less good for natural textures.
The Seamless Pattern Maker does both and shows the tile repeated so you can spot a seam before you download. Photograph textures in flat, even light, square on to the surface: a shadow or a bright spot will repeat across the whole floor. Even a perfect tile can show a visible repeating pattern over large areas; in a game, break it up with a few decals or a second texture.
Sizes
For 3D and game textures, stick to powers of two (256, 512, 1024, 2048) so the engine can generate mipmaps. For a website background, 200 to 600 pixels is plenty; compress it with the Image Compressor so it does not slow the page.