Exporting for Web Games

Overview

Web games have unique constraints: limited bandwidth, no install step, and a wide range of device capabilities. Sprite sheets must be lean, JSON configurations small, and loading strategies smart. spritesynth exports with web optimization in mind, but how you prepare and serve assets matters.

Step 1: Export with Web-Friendly Settings

Export your character or tileset with standard sprite sheet format:

curl -o character-export.zip https://api.spritesynth.com/v1/characters/{character_id}/export-zip \
  -H "Authorization: Bearer YOUR_API_KEY"

Extract the ZIP. It contains PNG sprite sheets and a metadata.json with frame coordinates and timing.

Step 2: Optimize PNG Assets

Run exported PNGs through lossless compression before shipping:

# Using pngquant for palette-based compression
pngquant --quality=65-80 --speed=1 sprite-sheet.png --output sprite-sheet-optimized.png

For pixel art, palette-based PNG compression (256 colors or fewer) yields the best size reduction without quality loss.

Step 3: Load in Phaser or PixiJS

Use the exported JSON metadata to set up sprite sheets in your web framework:

// Phaser 3
this.load.spritesheet('hero', 'hero-sheet.png', {
  frameWidth: 32,
  frameHeight: 32
});

// PixiJS
const sheet = PIXI.BaseTexture.from('hero-sheet.png');
const frames = metadata.frames.map(f => new PIXI.Texture(sheet, f.frame));
const sprite = new PIXI.AnimatedSprite(frames);

Tips

• Use texture atlases — Combine multiple sprite sheets into a single atlas for fewer HTTP requests.
• Prefetch critical assets — Load player character and HUD elements before the level tiles.
• Serve compressed — Enable gzip or brotli compression on your web server for PNG and JSON files.
• Consider WebP — Convert sprite sheets to WebP for browsers that support it (40% smaller than PNG).