Parallax Background Pipelines

Overview

Parallax scrolling creates depth by moving background layers at different speeds relative to the camera. A typical setup has 3 layers: far (sky, mountains — moves slowest), mid (hills, trees — moderate speed), and foreground (bushes, rocks — moves fastest). spritesynth's tileset generation can produce seamless, tiling backgrounds for each layer.

Step 1: Generate the Far Layer (Sky & Mountains)

The farthest layer needs the fewest details and the widest tiles:

curl -X POST https://api.spritesynth.com/v1/generations/tileset \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "description": "seamless sky gradient, distant mountains, clouds, pastel colors, side view",
    "type": "sidescroller",
    "tile_size": 32
  }'

Use pastel colors and low contrast for the far layer — it should visually recede. Set tile width to match your screen width (e.g., 256px) so the sky scrolls slowly.

Step 2: Generate the Mid Layer (Hills & Trees)

The middle layer carries the main environmental identity:

curl -X POST https://api.spritesynth.com/v1/generations/tileset \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "description": "seamless rolling hills, pine trees, medium green, side view, game background",
    "type": "sidescroller",
    "tile_size": 32
  }'

Mid-layer tiles should tile horizontally without visible seams. Test by generating a 2×2 grid in the editor — the edges must match.

Step 3: Generate the Foreground Layer (Details)

The foreground adds interactive elements and visual interest:

curl -X POST https://api.spritesynth.com/v1/generations/tileset \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "description": "seamless bushes, tall grass, rocks, ferns, dark green, side view, foreground",
    "type": "sidescroller",
    "tile_size": 32
  }'

Foreground tiles can include more detail and darker colors. This layer also works well for decorative elements that overlap the gameplay area.

Step 4: Export for Game Engine

Export each layer's tileset separately:

curl -o far-layer-export.zip https://api.spritesynth.com/v1/tilesets/{tileset_id}/export \
  -H "Authorization: Bearer YOUR_API_KEY"

curl -o mid-layer-export.zip https://api.spritesynth.com/v1/tilesets/{tileset_id}/export \
  -H "Authorization: Bearer YOUR_API_KEY"

curl -o foreground-export.zip https://api.spritesynth.com/v1/tilesets/{tileset_id}/export \
  -H "Authorization: Bearer YOUR_API_KEY"

In your game engine, assign different scroll speeds per layer: far (0.1x), mid (0.3x), foreground (0.6x) relative to the camera.

Tips

• Seamless tiling is critical — Generate tilesets with seamless in the prompt. Verify tile edges in the editor before exporting.
• Match color palettes across layers — The far layer's palette should be a lighter, desaturated version of the mid layer. The foreground should be darker and more saturated.
• Width matters more than height — Parallax backgrounds scroll horizontally. Focus on horizontal tiling quality; vertical seams are less visible.
• Layer sizing — Far layer: 1-2 tiles wide. Mid layer: 2-4 tiles wide. Foreground: 4-8 tiles wide. More tiles = faster apparent scroll speed.