47-tile terrain atlas

Generate a 47-tile autotile atlas, with a neighborhood lookup and a local map preview.

Landscape direction47-tile terrain atlas

GridCamera

Drag to paint. Shift-drag to erase.Loading atlas…

Inspect the 47-tile atlas

Each painted cell checks its eight neighbours and selects a tile. Point at a cell to highlight its source.

Generated terrain atlas with 47 neighbour-aware tiles

Make it yours

Give your agent the brief, author a workflow, or start by using the finished assets.

FX guide Workflow source

Build an FX workflow that generates a 47-tile terrain atlas from the visual direction of

1this meadow. Lock the cell geometry before generation, validate the delivered sheet, and produce a deterministic map preview. Keep the atlas lookup and the consumer separate from generation so I can paint new layouts locally. Plan offline before requesting a generation budget.

1 reference

Paste into your agent. Copy includes text and reference links; attach your own files to make it yours.

Shell

# From examples/terrain in the FX repository.
# Install the CLI first: npm install -g grida
uv sync
source .venv/bin/activate
python ../fetch_showcase_inputs.py .

grida fx plan workflow.py:build --max-usd 15

# Start the local service for the browser viewer.
grida fx start --background

# After reviewing the plan, choose a provider spending ceiling.
grida fx run workflow.py:build --live --max-usd 15 --open

The Python builder reads the included material direction and fixed topology template. The download retrieves the original meadow reference. Planning is offline; live runs use your provider account. The ceiling limits spending and does not guarantee completion.

JavaScript

const base = "https://fx-cdn.grida.co/showcase/showcases/412d71164da3e787e38babfa4d99c0497cac942bf796847b3ce6608a4c8c1835/terrain";
const sheet = await fetch(base + "/assets/lookup.json")
  .then((response) => response.json());

// Bits: NW, N, NE, W, center, E, SW, S, SE.
const [column, row] = sheet.lookup["111111111"];
const cell = 120;
ctx.drawImage(atlas, column * cell, row * cell,
  cell, cell, x, y, cell, cell);

Consume the recorded files directly. No engine or provider call is needed to display them. Rendering excerpts assume your application's canvas or media setup.

HTML

<video src="https://fx-cdn.grida.co/showcase/runs/9e7658de4aa6d43d8774a7d5ab76b3ea8c29f883a1acab2be7fdab29765f32ca/artifacts/a4621731541667a062a752405e41814ff0040069ef6f4bbda02ee5eaa73308ff.mp4"
  poster="https://fx-cdn.grida.co/showcase/runs/9e7658de4aa6d43d8774a7d5ab76b3ea8c29f883a1acab2be7fdab29765f32ca/artifacts/e103b0be751bf77a8a7e0c25925c341773f965aee4092f0f42760fb1d0023b42.webp"
  autoplay muted loop playsinline></video>

An optional local render from the recorded workflow outputs. The original assets remain unchanged.

From layout to terrain

Meadow terrain painted into the same 47-mask layout — The fixed 47-mask paint target and the returned image, before local assembly of the final atlas.

The fixed geometry of the 47-mask terrain paint target — The fixed 47-mask paint target and the returned image, before local assembly of the final atlas.

How it comes together

Generate a fixed set of 47 terrain tiles, validate the atlas layout, and use a neighborhood lookup to select each tile. The painter uses the delivered atlas and lookup directly.

01
Direct
Translate the meadow's visual direction into one terrain material.
02
Generate
Draw the fixed atlas of 47 tiles, one for each supported neighborhood mask.
03
Validate
Check sheet dimensions, cells, and the fixed layout.
04
Paint
Resolve occupied cells through the lookup and render a preview locally.

Take it from here

Real files from this run. Use them in your own renderer, prototype, or engine.

A good fit for

Block-based side-view terrain
A fixed atlas geometry and mask convention
Painting and changing layouts without regenerating art

Production notes

This is block terrain with repeated texture motifs. Arbitrary layouts have not been exhaustively reviewed.

Demo manifest

Keep exploring

Parallax background

Make it yours

From layout to terrain

How it comes together

Direct

Generate

Validate

Paint

Take it from here

A good fit for