Atlas Edge Extrusion

Extrude grid-tile edges and export updated atlas coordinates.

Thin lines or gaps between tiles appear when the GPU samples a texel just outside a tile's rectangle: linear filtering, mipmaps or a camera at a fractional position read the neighbouring tile or the empty gap. Extrusion fixes that by copying each tile's outermost pixels outward into a ring, so a sample that lands outside the tile still reads the tile's own colour. This page extrudes every tile of a grid sheet (2 px by default, 0–16) into padded-atlas.png, where tiles sit at margin = extrude and spacing = 2 × extrude. Check your engine first: Godot 4 TileSets already add 1 px of padding internally.

Drop image files hereProcess many files at once

No upload · processed on this device

Why lines appear between tiles

A tilemap draws every tile from a rectangle of the atlas. With nearest filtering and the camera on whole pixels each screen pixel reads one texel inside that rectangle and nothing bleeds. Linear filtering blends the four nearest texels, so a sample at the very edge takes up to half its colour from the texel next door; mipmaps average 2 × 2 blocks per level, so at smaller sizes the neighbour mixes in further; and a zoom or camera position that is not a whole number moves samples onto those edges.

Padding and extrusion are different fixes. Padding (TexturePacker's shape padding) leaves transparent pixels between the rectangles: the neighbour is no longer read, but the empty gap is, which shows as a dark or see-through line. Extrusion repeats the edge pixels outward (TexturePacker: "repeats the sprite's pixels at the border; sprite's size is not changed"), so whatever leaks in has the tile's own colour. For tiles that must meet edge to edge, extrusion is the one that hides the line.

Some engines already do it. Godot 4's TileSetAtlasSource.use_texture_padding is on by default and generates an internal texture with one extra pixel around each tile, so a Godot 4 TileSet usually needs nothing here. Tiled supports margin and spacing precisely so that extruded tilesets can be used, and Phaser's addTilesetImage takes tileMargin and tileSpacing. After extruding, those two numbers change, and forgetting that is the most common new problem.

Example: extruding a 203 × 186 sheet by 2 px

The sheet has 12 × 11 tiles of 16 × 16 with 1 px spacing. Pixel positions in the output:

source    203 × 186: 12 × 11 tiles of 16 × 16, margin 0, spacing 1
extrude 2 → each cell 16 + 2 × 2 = 20 px → padded-atlas.png 12 × 20 = 240 by 11 × 20 = 220
tile 13   column 1, row 1: source 17,17 → atlas x = 1 × 20 + 2 = 22, y = 22 (pixels 22–37)
ring      x 20–21 repeat the tile's column 0, x 38–39 repeat column 15; each 2 × 2 corner repeats the corner pixel
engine    margin 2, spacing 4 → Tiled margin 2 / spacing 4 · Phaser addTilesetImage(name, key, 16, 16, 2, 4) · Godot margins (2, 2), separation (4, 4)
padding   the same 4 px left transparent: a linear sample halfway between texel 37 and 38 is 50 % tile, 50 % nothing

The source sheet's own 1 px spacing disappears: the atlas is laid out again from the grid. metadata.json in the same ZIP keeps the source rects (tile 13 at 17,17), so use margin and spacing for the padded atlas.

Check the result

Open padded-atlas.png: it is columns × (tile + 2 × extrude) by rows × (tile + 2 × extrude), and tile 0 starts at (extrude, extrude).
Zoom into the ring around one tile: every ring pixel equals the nearest edge pixel of that tile.
In the engine, set margin = extrude and spacing = 2 × extrude, then pan and zoom the camera by fractional amounts across a tile border: no line should appear.

Troubleshooting

Symptom	Likely cause	How to check	Fix
Lines flicker only while the camera moves or zooms	Fractional positions plus linear filtering sample across tile borders	Stop the camera at a whole-pixel position: the lines disappear	Extrude the atlas, or use nearest filtering with whole-pixel camera positions
Lines appear only when the map is zoomed out	Mipmaps average blocks that include the neighbouring tile	Turn mipmaps off for the tileset texture: the lines vanish	Extrude more (2–4 px), or disable mipmaps for 2D tilemaps
After extruding, every tile shows part of its neighbour	The engine still uses the old margin and spacing	Tile 0 should start at (extrude, extrude) in the padded atlas	Set margin = extrude and spacing = 2 × extrude (extrude 2 → 2 and 4)
Dark fringes around transparent parts of tiles	The colour under fully transparent pixels is black and filtering blends it in; extrusion only adds pixels around tiles	Look at the RGB of transparent pixels near the edge	Fill the colour under transparent pixels with edge bleed
Gaps remain with nearest filtering and no mipmaps	The tiles themselves are placed apart: map positions or scale are not whole pixels	Check tile positions and the camera scale	Fix the map or camera; this is outside what an atlas can fix, and Nerulio cannot change it

Versions and sources

Measured for docs/TILE-LAB.md and tests/recipes-browser.py: a 2 × 1 sheet of 1 px tiles with 1 px extrusion gives a 6 × 3 atlas with the edge pixels isolated; a sheet with 8 px tiles, margin 1 and separation 2 gives a 36 × 24 atlas whose 6 × 64 tile pixels and 6 × 8 left-edge pixels equal the source; the output is byte-identical to the reference extrusion for a 32 × 32 sheet at padding 3 and for 1 × 1, 1 × 16 and 16 × 1 cells at padding 2 (Chromium and Firefox). The example positions were recomputed with the same layout function. Engine behaviour follows the Godot 4.7, Tiled, Phaser and TexturePacker documentation.

Official documentation used

Example

Example generated with this tool. ZIP tools show their preview; inspect the downloaded archive for every file.

Atlas Edge Extrusion

Extrude grid-tile edges and export updated atlas coordinates.

How it works

Add images
Adjust settings and review the result
Download a new file

Supported formats

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — Input decoding depends on browser support and optional engines.

What this tool does

Extrude grid-tile edges and export updated atlas coordinates.

Implementation and verified quality

advanced · nine-blit nearest edge extrusion. Quality qualification is in progress. Pro/Flagship quality has not been established.

Before you export

Grid tiles only. Output dimensions and UV positions change; no UV baking is performed.

Frequently asked questions

What are this tool’s limitations?

Grid tiles only. Output dimensions and UV positions change; no UV baking is performed.

Are my files uploaded?

This tool processes the files you open on your device without uploading them. Images you explicitly attach to community posts are uploaded separately. Optional engines and models are downloaded from third parties; those requests expose connection information such as your IP address.

Will my work be saved automatically?

No. Images and editing state stay in this tab; media output can use local temporary storage. Changing language preserves your work; reloading, closing the tab, or following a link to another page can clear it.