Combinations for tiling two textures together

Question

Hi I need to create seamless ground with grass and dirt. I can make two textures connect seamlessly one to another. My question is how to figure out all the combinations, like (left, top, bottom, left-bottom, right-botton-left and so on)? Is there some kind of guide? Thank you in advance.

Answer 1

There's a solid overview of different popular tile combination patterns put together by Boris the Brave, building on some earlier work by Sean Howard.

I'll briefly summarize the main categories these authors identify in case the links break in future, along with a few additions of my own. I recommend you read the original articles for the full details.

Rug

(16 tiles)

Draws rectangular boxes of various sizes, but can't do concave shapes. Often used for UI message boxes or cliff faces in RPG tilesets.

If you use just the top-right 3x3 section, it's commonly called a "9-Slice" - you lose the ability to form shapes smaller than 2x2 tiles though.

Fence

(16 tiles)

Draws ribbons and networks of tiles connected along their shared edges.

Both Rug and Fence are examples of Wang Tiles with two edge types, they just differ in whether the corners are counted as "inside" or "outside"

Marching Squares

or
(16 tiles, +2 optional alternate diagonal tiles)

You may also see this style called Corner Tiles - they're the equivalent of Wang Tiles with matched corners instead of matched edges. In another answer I show how this layout can be extended to three different corner textures.

Inside/Outside

(14 tiles)

I see this subset of Marching Squares without the diagonals fairly frequently, but I haven't found an officially accepted name for it, so I mocked up the example above using Boris's tiles. Alexandre Vaillancourt's example in the other answer is another layout of this pattern.

The Blob

(48 tiles)

This tileset covers an exhaustive collection of corner and edge states, where a foreground corner is always bounded by two foreground edges, but a foreground edge is allowed to slip between two background corners. The center of a tile is always foreground for 47 of the tiles, plus one tile that's all background.

Caeles and others at OpenGameArt have investigated various ways of packing tilesets similar to this one - you can find several "blob" templates there.

Sub-Blob

(5 tile-equivalents: 20 quarter-tile pieces that can be assembled into full tiles)

Surprisingly, you can make all 47 non-blank (all-background) tile combinations in "the Blob" with just these 20 corner pieces, assembled in different combinations.

This is used in RPG Maker VX's autotiles and other autotiling systems to cut down on the amount of unique texturing needed to flexibly cover a wide array of shapes.

Note that the quarter-tile split puts some restrictions on how much you can bevel the corners, sometimes leading to a more blocky appearance than when using full tiles, as illustrated by Felix Trapper here:

Extended Autotile

(11 tile-equivalents: same 20 quarter-tiles as Sub-Blob, plus 4 dedicated corner tiles and some redundancy)

Here I'm borrowing the name given to this by the Rotorz tile system. It's also the style used by RPG Maker XP. The extra corner tiles can support a wider turning radius, or a diagonal split between foreground & background, which can help a map look more organic.

Note that this particular layout includes some redundant sub-tiles (shown darkened above). A tilemap rendering system using this layout could pseudo-randomly select a different version of the redundant sub-tiles for each place they appear, making tile repetition less obvious in large filled areas.

---

Here's a table summarizing what you get with each of the combinations:

	9-Slice	Rug	Fence	M.S.	I/O	Blob	S.Blob	Ex.A
Tile equivalents	9	16	16	16	14	48	5	11
...with all-background	+1	+1	+1	included	included	included	+1	+1
Smallest foreground	2x2	1x1	1x1	2x2	2x2	1x1	1x1	1x1
Concave corners	🚫	🚫	✅	✅	✅	✅	✅	✅
Foreground diagonals	🚫	🚫	✅	✅	🚫	✅	✅	✅
Background diagonals	🚫	🚫	🚫	+2	🚫	🚫	🚫	🚫