Seamless tileset drawing

Seamless tileset drawing

Drawing and digital painting tileset for 2D games and image synthesis.

Seamless tile repeats, and a seamless tileset goes further by connecting different tiles. Each edge, corner, and transition becomes part of a larger rhythm, where patterns flow across boundaries.

What are Tilesets?

Tilesets are the building blocks of 2D worlds.  

They are usually used for top-down or side-view platform games, where the scene is built from a repeating grid of small square images called tiles.

I’ve been particularly interested in the idea of texture synthesis. Where the tileset is not just a collection of discrete graphics, but something that can be recombined infinitely to form a larger, seamless image. In that sense, the whole tileset becomes a kind of generative texture that can expand endlessly without visible seams.

The idea of Autotile

In many 2D game engines, there’s some built-in system that takes a tilemap and automatically 'decides' which tile to use based on its neighbors.

A quick search for autotile brings up most of the relevant results, though some engines (like Godot) have since moved away from the exact term.

The idea of autotile comes from tile-based design and game development: it is a way to make tiles automatically fit together depending on what is around them. Instead of manually selecting edge, corner, and center tiles, the system determines which variation to use, so that the terrain connects smoothly.

Why drawing a tileset is challenging

Drawing a tileset sounds simple, until one realise that every tile must connect seamlessly with every possible neighbour. That means edges, corners, shading, and even brush texture need to align perfectly. Each tile is not just an image; it is part of a combinatorial system of relationships.

In pixel art, there’s a long tradition (and many excellent tools) for managing this complexity. But I wondered if I could extend this process to support other art styles - e.g. painterly, hand-drawn, or textured?

Introducing tile.graphics seamless tileset drawing tool

To explore this question, I have put together my first version of a seamless tileset drawing tool. Designed to make the process of drawing and testing tileset more intuitive.

I started with a 15-piece tileset, inspired by the well-explained video by jess::code comparing typical tilesets for autotile, which demonstrates how to use it with a dual grid system.

Here is what my seamless tileset drawing tool currently includes:

  • The same drawing tools from Draw Seamless Pattern V2
  • Drawing template and relationships based on a 16-piece tileset with 2x2 bitmask
  • The ability to drag and drop a seamless texture or pattern and load it per tile
  • A WFC-based (Wave Function Collapse) tileset preview, to quickly visualize how the tiles recombine

The first version of seamless tileset drawing tool is now online at: https://auto.tile.graphics

If this kind of generative or seamless design interests you, I’d love to hear what you think.