6
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ I suggest you ask the Internet. A Google Images search of "terrain tile texture grass sand" revealed something like this. That's just a sample, but the idea is this: check how others have done it, and get inspired by it. \$\endgroup\$ – Vaillancourt Sep 15 '17 at 23:24
32
\$\begingroup\$

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

4x4 array of tiles with borders at the edges.
(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

4x4 array of tiles with connections across shared edges.
(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

Tiles including all combinations of 2 foreground/background textures by 4 corners. or Alternative layout that keeps similar edges together
(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

3x3 box of tiles and 4 concave inner corners, plus a background tile.
(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 permutations of foreground/background edge and corner styles.
(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.

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

Alt blob layout as an 8x6 Alt blob layout as a 7x7

Sub-Blob

20 quarter-tile pieces.
(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:

Cross-fade between similar maps with and without full-tile corners.

Extended Autotile

9x9 grid of tile/subtile parts and two extra slots.
(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).


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-blank      +1     +1      +1     incl    incl   incl     +1     +1
Smallest foreground     2      1       1       2       2      1       1      1
Concave corners         N      N       Y       Y       Y      Y       Y      Y
Foreground diagonals    N      N       Y       Y       N      Y       Y      Y
Background diagonals    N      N       N       N       N      N       N      N

\$\endgroup\$
  • 3
    \$\begingroup\$ Yeah, that! You deserve your ten rep :) \$\endgroup\$ – Vaillancourt Sep 16 '17 at 0:58
  • 2
    \$\begingroup\$ Wow awesome, great answer! \$\endgroup\$ – serge Sep 16 '17 at 3:01
0
\$\begingroup\$

There are also hexagon tiles that can make some things easier. A great explanation how to use tiling hexagonal textures is on Curious Expedition game wiki: https://curious-expedition.fandom.com/wiki/Modding:Tiles#Tile_Sprites

\$\endgroup\$
  • 2
    \$\begingroup\$ This answer would be better if it explained how to set up combinations for tiling hexagon tiles, and what advantages they offer, rather than delegating this wholly to another site. If the linked page changes contents, changes URL, or becomes unavailable in the future, a user would have a hard time learning what you're trying to show them here. So please always ensure your answers can stand on their own — adding links for further reading/credit while still explaining in the question body, like the example above. You can use the edit button to add more detail. \$\endgroup\$ – DMGregory Apr 1 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.