Draw fewer tiles - by using a Dual-Grid system!

Summary of the video

The video compares common autotiling/tileset approaches for game maps—specifically how many tile variations are needed to correctly match neighboring tiles (e.g., grass, dirt, paths). It explains why traditional tilesets can cause edge alignment issues and ambiguous tile placement, then introduces a Dual-Grid system that reduces the number of required tile configurations from 256 to 16 while improving visual alignment with the game world grid.

It also demonstrates how to implement the Dual-Grid system in Godot, using two overlapping/offset tilemaps and a custom script to select the correct tile variant based on neighbor rules. Additional features mentioned include randomization and animation (notably an animated shoreline). Finally, it briefly updates on the creator’s game development progress and a new project idea.

---

Artistic techniques / concepts shown

Autotiling / neighbor-based tile selection

• Tiles change appearance based on surrounding tiles to seamlessly blend edges and corners.

Tileset size tradeoffs

Example comparisons highlighted:

• 15-piece tileset
  • Fewer tiles, but edges drawn through tile centers can cause misalignment with the world grid.
  • Can lead to ambiguous edge classification (e.g., grass vs. dirt).
• 47-piece tileset
  • Better alignment to grid edges, but requires substantially more tiles.
• 16-piece subset
  • Smaller and more grid-aligned, but may be incompatible with certain art styles.
  • May struggle with equally rounded inner vs. outer corners.

Edge-roundness control

• Preference for perfectly rounded inner and outer corners, especially for paths.

Dual-Grid system

Uses two tile grids:

• World grid: tracks tile placement but does not render.
• Offset grid (shifted by half a tile): drives which tile edge variant should be shown.

Key outcome:

• Only 16 neighbor configurations are needed (instead of 256), because the system resolves the combinatorial explosion differently.

---

Implementation / process steps (Godot Dual-Grid)

Create two Tilemaps

• One tilemap represents the world grid (logic only).
• A second tilemap represents the display grid, offset by half a tile.

Use a custom tilemap script

• Predefine 16 neighbor configurations and map each configuration to a corresponding tile.
• Tiles are stored as atlas coordinates (represented as vectors).

Author/edit workflow

• Edit the “placeholder” tiles normally in Godot.
• When you press Play, the script generates the correct offset/derived tiles over them.

Runtime updates

• Update tiles dynamically by calling the script’s tile-update function.

Coordinate-handling logic

When referencing neighbors:

• Neighbor coordinates differ depending on whether the system is on the offset grid vs the world grid.
• This is handled by effectively applying sign changes (adding/subtracting a minus) to transform coordinate references.

Extra production features (in the creator’s games)

• Added randomization and animations.
• Example: an 11-frame shoreline animation using the dual-grid result to avoid excessive tile counts.

---

Quantitative results / efficiency claims

• Dual-grid reduces required tiles substantially:
  • 155 tiles drawn with the dual-grid system
  • vs. 507 tiles the creator would otherwise need
• Theoretical reduction:
  • 256 possible neighbor combinations → 16 configurations with the dual-grid approach

---

Tools / resources recommended

Learn more / verify the concept

• A talk by Oskar Stalberg
• A devlog by ThinMatrix

Regular autotiling workflow support

• Use a tool to generate the full set of tiles more efficiently.

---

Creators or contributors featured

• Oskar Stalberg (referenced for a talk on dual-grid)
• ThinMatrix (referenced for a devlog on dual-grid)
• The video creator (credited implicitly; not named in the subtitles)
• GitHub / Unity versions of the demo (referenced as resources, but no specific author names given in the subtitles)