tools-gamedev

Tools > Guides > Overworld autotile shores

Fix overworld autotile shoreline corners + mixed 16/32px sizes

Short answer: sort 16px grass and grove from 32px features (one layer per size), fill the 16-tile blob base to 47 corner variants by quadrant compositing, and ship the sizes as data. Takes about 10 minutes to check on your own set. The helper below tells you which tile any shoreline touch needs — and the free Vol 0 sample underneath is the real base set.

Guide date: 2026-09-28. Engines covered: Tiled 1.10 + Godot 4.x + Unity 2D. Engine docs: Tiled docs · TileSet · Unity Sprite Editor. Gap sources: Tiled#149 (per-layer tile size, 42 comments, open since 2012) · Godot#31003 (3x3 autotile outer diagonals, open since 2019). Worked-example facts are our own pack files at products/game-dev-2d/tileset-overworld-pack/ (judge PASS 2026-09-28); the recipe works on any seller's set cut to the same grid. Buyer search words: "overworld tileset", "tiled autotile", "godot tilemap 16x16".

Cover of Overworld Tileset Pack Vol 2: grass/water overworld map plus packed sheet plus 16-to-47 corner-fill strip with Tiled, Godot 4 and Unity lines
The real cover (630×500, vendored from the pack's preview/cover.png). Top: the 10×10 demo map it paints. Middle: the packed sheet (255×84, 1 draw call). Bottom: the corner-fill strip — 16 bases become 47 filled grass/water tiles, no missing shoreline diagonals.

The 3-step recipe

  1. Sort tiles by pixel size — one layer per size. Keep 16×16 grass (16 bases) and 16×16 grove (12: sand, dirt paths, cliff top/face, tree, pine, bush, flowers, rock) separate from 32×32 features (8: big oak, pine cluster, cliff block, pond, log bridge, cabin, rock arch, shrine stone). Do not scale one to match the other — scaling bleeds hard pixel edges. In the map file keep the map at 16px and give the features layer its own 32px size properties (Grass16 + Grove16 + Feat32 in our overworld_demo.tmj). The editor opens and displays it; native per-layer re-render is still the editor's unsolved ask (Tiled#149), so treat this as a portable data convention.
  2. Fill the 16-tile blob base to 47 shoreline corners. The 16 bases are the 4-bit edge combinations (tile id = neighbour mask: N=1 E=2 S=4 W=8). Paint a diagonal-only shoreline touch — two grass areas meeting at one corner pixel over water — and the base shows a water notch: there is no tile for it. The fix is 31 quadrant-composited variants (stamp top-left / top-right / bottom-left / bottom-right quadrants from different donor bases) so every outer diagonal (Godot#31003 gap) paints a clean shore. Check: hash all 47 outputs and require 47 unique — a repeated hash means two corners share a donor pair. Our bench note records ~120 min by hand vs ~3 min generated (40×); time one hand run on your own set before believing any ratio.
  3. Pack to one sheet, then gate before you trust it. Shelf-pack everything on one RGBA sheet (ours 255×84) with a manifest (per-tile name + rect + frame order + per-layer sizes + autotile record). Verify every rect sits inside the sheet and none overlap — that is the no-bleed guarantee. Then re-parse every data file: region sizes match the manifest, zero bad image refs, Godot TileSet ASCII-only. Paint a 10×10 test map (grass + grove + features) and hunt shorelines: every outer corner shows grass or water edge, never background. That test is free and works on any seller's set.
Symptom → fix (check in this order)
SymptomCauseFix
Diagonal holes in grass/water shores16-tile base has no outer-diagonal tile31 quadrant composites (16→47); hash-check 47 unique
32px cabin/trees drift on 16px mapOne tile size per map (Tiled#149)One layer per size; Feat32 layer carries its own 32px properties
Blurry tiles in GodotDefault smoothingFilter: Nearest + Reimport, integer scale only
TMX opens with missing imageImage filename mismatchKeep shipped folder layout so ../ refs resolve
Import "works nowhere"Wrong engine path/versionTiled 1.10 open .tmj; Godot 4 open .tres with res://assets/... paths; Unity PPU 16 + Point per guide
Full grass/water overworld render with trees, pond, cabin, bridge and cliffs painted from the 10x10 demo map
The real map (shot-map.png, vendored): the 10×10 demo map — Grass16 + Grove16 + Feat32 — rendered from shipped tiles. If your map looks like this after step 3, your shores survived.
Packed sheet grid of overworld grass, grove and feature tiles on a dark card
The real sheet (shot-sheet.png, vendored): 36 input tiles shelf-packed to 255×84 + manifest with 36 name+rect+order entries, verified no-overlap. One draw call.
Eight large 32px overworld features: big oak, pine cluster, cliff block, pond, log bridge, cabin, rock arch, shrine stone
The real features (shot-feats.png, vendored): 8 chunky 32px set-pieces that read next to 16px grass. Thick outlines — thin lines vanish at this pairing.
Six-frame overworld autotile paint sweep with water wash and corner highlight from the shipped tiles
Real motion (demo.gif, 6 frames, vendored): autotile paint sweep with water wash and corner highlight, rendered from shipped output — not a mockup.

Free helper: blob-mask → tile picker

Click which orthogonal neighbours are grass (N/E/S/W). Then tick any diagonal-only shoreline touches (NE/SE/SW/NW). The helper shows the 4-bit mask, the Vol 0 base tile, whether the touch needs a Vol 2 composite — and a copy-paste Tiled snippet. Everything runs locally — nothing leaves your device.

Orthogonal neighbours (grass = pressed)
Diagonal-only touches (corner pixel only, edges open)