Free download, runs in your browser

Dual Grid Tileset Template

A blank 15-piece dual grid template in four tile sizes, and a tester. Paint terrain with any dual grid tileset to check its edges and corners before you import it.

Dual grid tester
Drag to paint. Start on terrain to erase.

Download the template

Transparent PNGs, free for any project. Draw your terrain over the filled shapes and leave the bottom-left cell empty. The layout is the same one SpriteCook tilesets use, so the tester and your engine code work with both.

Blank dual grid tileset template, a 4x4 sheet of filled corner shapes with one empty cell
16 px tiles64×64 sheet32 px tiles128×128 sheet48 px tiles192×192 sheet64 px tiles256×256 sheetPiece guideThe layout with every corner mask labeled

Which piece goes where

Every tile in a dual grid sits on the corner where four map cells meet. It only needs to know which of those four cells are filled. Each filled corner adds a bit: top-left 1, top-right 2, bottom-left 4, bottom-right 8. That gives 16 combinations, and the all-empty one draws nothing, so 15 pieces cover every shape a map can make.

The number in each cell of the guide is that piece's mask. Turn on Tile edges in the tester to see the tiles sitting between the cells.

Dual grid tilesets, explained
Guide to the 15-piece dual grid layout, each cell labeled with its corner mask number from 1 to 15, and the bottom-left cell empty

Use it in your game

Keep your map as filled or empty cells. For each corner between cells, build the mask from the four cells around it and draw the matching piece there.

In Godot, a tileset made in SpriteCook exports (on paid plans) with a .tres TileSet that already has the terrain set up, so you paint in the Terrains tab. It also includes a SpriteCookDualGrid scene that draws the dual grid for you. Here's how.

Coding with an AI agent? The SpriteCook plugin includes a dual grid skill with this renderer, so your agent can wire it up for you. Agent setup.

dual-grid.ts
// Corner bits: top-left 1, top-right 2, bottom-left 4, bottom-right 8
let mask = 0
if (filled(x - 1, y - 1)) mask |= 1
if (filled(x,     y - 1)) mask |= 2
if (filled(x - 1, y    )) mask |= 4
if (filled(x,     y    )) mask |= 8
 
// Mask 0 is the bottom-left cell: empty in the template,
// the base terrain (like open water) in two-terrain sets.
const frameByMask = [12, 15, 8, 9, 0, 11, 14, 7, 13, 4, 1, 10, 3, 2, 5, 6]
const frame = frameByMask[mask]
 
// Draw sheet cell (frame % 4, floor(frame / 4)) on the corner (x, y),
// shifted half a tile up and left so it sits between the four cells.
AI-generated dual grid tileset of meadow grass and teal water in the 4x4 layout

Skip the drawing

Drawing 15 pieces that line up is slow work. SpriteCook's tileset generator draws all of them from a description, in this layout. The grass and water set shown here came from this prompt:

Emerald meadow grass and deep teal water. Plain softly textured grass, tiny low-contrast blades, clean grassy shoreline with a thin earth bank, subtle calm water ripples.
AI tileset generatorMake a custom base

More tileset tools

Tileset base generator

Build a 15-piece base with rounded or rough edges, then detail it.

AI tileset generator

Every piece drawn from a prompt, exported for Godot, Unity and Tiled.

The 15-piece autotile, explained

The short version of why 15 tiles are enough.

Godot autotile tileset

Load a SpriteCook tileset into Godot and paint a map.

Frequently asked questions

What is a dual grid tileset?+
A tileset drawn for a second grid that sits half a tile off your map grid. Each rendered tile covers the corners of four map cells, so the tile only has to know which of those four corners are filled.
Why does a dual grid tileset only need 15 tiles?+
Each tile looks at four corners, each filled or empty, which makes 16 combinations. One of them is all empty and draws nothing, which leaves 15. A regular autotile on one grid needs 47 tiles because it has to check all eight neighbors.
Which piece goes in which cell of the template?+
Follow the guide image on this page. The number in each cell is its corner mask, adding up top-left 1, top-right 2, bottom-left 4 and bottom-right 8. The bottom-left cell is the empty one.
What tile size should I use?+
The size your game already uses. The template comes in 16, 32, 48 and 64 pixel tiles. The sheet is four tiles wide, so 32 pixel tiles make a 128 by 128 sheet.
Can I test my own tileset?+
Yes. Upload a square 4x4 sheet in the same layout and paint with it in the tester. Sheets with spacing or grid lines around and between the tiles work too, like SpriteCook exports. Nothing gets uploaded to a server.
How do I use a dual grid tileset in Godot?+
If SpriteCook made the tileset, its Godot export (on paid plans) includes a .tres TileSet with the terrain already set up, so you paint in the Terrains tab, plus a SpriteCookDualGrid scene that draws the dual grid for you. For a sheet you drew yourself, set up the terrain by hand or use a small dual grid renderer. The renderer code is in the dual grid explainer.
Is the template free to use?+
Yes, in any project, commercial ones included. No attribution needed.
Can AI draw the whole tileset for me?+
Yes. The SpriteCook tileset generator draws all 15 pieces in this layout from a short description. On paid plans it also exports them for Godot, Unity and Tiled.