ISOMETRIC WATER

Generate animated pixel water for an isometric scene

PixelWall can generate original 2D pixel water as an editable frame sequence. Choose a water form, top-down or isometric view, a seed, a season, and a compact palette; the result stays inside the same document and command workflow used by the editor, browser API, and CLI.

Open the editor

What this can do

In either the web editor or desktop app, choose Water scene. Pick a preset and view, adjust shoreline and water seeds separately, and watch the live preview. Use 3× repeat to inspect edge continuity. Generate water scene saves your current project first, then opens the result in a new project tab with separate Banks, Water, Rocks, and Grass & Reeds layers.

The scene.water command replaces the active document's blank artwork while preserving its document ID and canvas dimensions. It creates 12 frames by default, with 125 ms timing, and gives each frame a deterministic result for the same inputs. waterSeed varies the animation independently from the shoreline seed, rippleDensity controls highlight activity, and phaseOffset shifts the loop phase for an isolated piece. Set details to 0 for a quieter base pass, then paint highlights, banks, rocks, foam, or props on top.

Isometric view projects the ground, water, banks, and props into a 2:1 diamond scene with a visible soil edge. The result is ordinary editable 2D pixels; it does not create a heightfield, camera, lighting model, walkable terrain, or exported isometric tilemap.

Animated isometric pixel stream with blue water, banks, rocks, and reeds.
Original 96 × 80 looping stream animation generated from the documented command inputs.

Run a water pass in the browser

  1. Make a blank canvas

    Create a document at the size you want to keep. scene.water replaces the blank artwork but retains the document ID and dimensions, so choose the final canvas before running the command.

  2. Inspect and apply

    Read the current revision, then apply one scene.water command. Keep expectedRevision when another person or tool could edit the document at the same time.

  3. Tune the scene

    Choose scene pond, river, stream, waterfall, or shoreline; view top-down or isometric; seed; season spring, summer, autumn, or winter; and an optional palette object containing named role overrides. Width and height are 8–256 pixels, frames 1–32, durationMs 1–65535, details 0–4, rippleDensity 0–1, and phaseOffset an integer from −65535 to 65535.

  4. Refine and save

    Inspect the generated frames, add hand-painted details or a separate tile layer, preview the loop, and save. Render individual PNG frames freely; GIF, atlas, sheet, and game-package exports still follow the normal Pro license rules.

const api = window.pixelwall;
const before = api.inspect();
await api.apply({
  expectedRevision: before.revision,
  label: "Generate isometric summer stream",
  commands: [{
    type: "scene.water",
    scene: "stream",
    view: "isometric",
    seed: 2048,
    waterSeed: 91,
    season: "summer",
    frames: 12,
    durationMs: 125,
    details: 2,
    rippleDensity: 0.65,
    phaseOffset: 0,
    palette: { water: "#3b82c4ff", foam: "#d9f4ffff" }
  }]
});
await api.save();
const preview = await api.preview({ scale: 6 });

Run the same pass with the CLI

The CLI consumes the same JSON command batch as the browser command API. Start from a document with the final dimensions, apply the batch, inspect the resulting frame count and timing, and render a frame for review.

  • scene accepts pond, river, stream, waterfall, or shoreline.
  • view accepts top-down or isometric. Isometric is a 2D pixel treatment, not a 3D export.
  • season accepts spring, summer, autumn, or winter. Winter adds frozen pond edges. seed makes the shoreline variation repeatable; waterSeed independently makes the animated ripples repeatable. rippleDensity accepts 0–1 and phaseOffset shifts the loop phase.
  • frames defaults to 12 and durationMs to 125; details accepts 0–4 scene detail levels. Palette overrides must be an object of known role names such as water, foam, bank, ice, or rock with valid six- or eight-digit hex colors.
node pixelwall.mjs new --width 96 --height 80 --name "Isometric Stream" --out water.pixelwall
node pixelwall.mjs apply water.pixelwall --commands isometric-water.json --out water-generated.pixelwall
node pixelwall.mjs inspect water-generated.pixelwall
node pixelwall.mjs render water-generated.pixelwall --frame 0 --scale 6 --out water-preview.png

Build an isometric foundation

Use Isometric guide and Iso snap to align banks, bridges, rocks, and props. Set Iso tile width, then open Isometric shapes to stamp editable ground diamonds, raised blocks, or ramps. Water generation creates a separate project; it does not regenerate a single water layer inside existing hand-built artwork.

Isometric support is useful for composition and pixel alignment today. Generated scenes are marked spatiallyTileable:false; matching animation seeds do not guarantee seamless edges between separate pieces. PixelWall does not yet provide a full isometric map editor, height-aware terrain, depth sorting, or an isometric tilemap export format; assemble those systems in your game or tilemap tool after exporting the ordinary frames.

Common questions

Does the generator copy or animate an existing water sprite?

No. It creates original 2D pixel patterns from the command parameters and seed. You can still import or paint your own references and use the generated loop as a starting point.

Can I use it for a complete isometric game map?

It can provide an animated water element and a useful isometric composition guide. It does not create terrain height, collision, depth sorting, or a complete isometric tilemap.

Will the same command produce the same water later?

Yes, when the document dimensions and command inputs, including seed, are the same. Keep the JSON batch with the project so another agent can reproduce and revise the pass.