49
\$\begingroup\$

What is the pattern/design name of using a 3x3 tileset (usually in a tiled 2D game) that can be used to create larger areas of itself. For example, these:

enter image description here

(Image source)

I thought it was a "9 tree" or something like that but cannot find it, it is perhaps an uncommon reference.

\$\endgroup\$
  • 9
    \$\begingroup\$ I am counting 13 tiles per texture, not 9. \$\endgroup\$ – Philipp Jul 10 '16 at 19:32
  • 2
    \$\begingroup\$ @Philipp ah yea there it is. Was only interested in the 9 square though :) \$\endgroup\$ – lozzajp Jul 11 '16 at 7:16
  • \$\begingroup\$ i would have guessed a sprite....nice question, great/informative answers! \$\endgroup\$ – albert Jul 14 '16 at 1:04
40
\$\begingroup\$

A name that will give you actual results in Google is 9-slice.

Another way to call it and ask Google about it is 9-patch.

As per this chat discussion, 9-pane seems to also be used, but the almighty Google will not show you what you need, unless you're into windows or something.


Thanks to Kevin and Josh in chat for that.

\$\endgroup\$
  • \$\begingroup\$ 9 Patch was the one I had heard of, thanks for the other ones to have a look at too! \$\endgroup\$ – lozzajp Jul 10 '16 at 19:43
  • \$\begingroup\$ Heheh, research prior to the question =p \$\endgroup\$ – Elva Jul 10 '16 at 20:30
  • 5
    \$\begingroup\$ As a mobile developer i know 9-patch images only as single images with black lines indicating the stretchable part. They are probably named after these. But now I know why they are named like that :) \$\endgroup\$ – Ivo Beckers Jul 10 '16 at 22:24
  • 3
    \$\begingroup\$ I think this answer may be misleading. Most search results for 9-slice/9-patch are about a UI scaling technique which stretches parts of an image, not the tiling technique that selects & repeats particular tiles. I've elaborated on this distinction in an answer below. \$\endgroup\$ – DMGregory Jul 10 '16 at 22:43
  • 1
    \$\begingroup\$ I've also been familiarized with the name 9-grid. \$\endgroup\$ – Maurycy Jul 11 '16 at 8:18
62
\$\begingroup\$

I'd disagree with the accepted answer here.

I'd call this an autotile, and not a 9-slice

"9-Slice" (or 9-patch) is usually used to refer to a system where the content creator slices the image along 4 lines (not necessarily equally-spaced tiles). When rendering a rectangle, the corner slices are displayed at their native size, and the edges/center are stretched (not repeated) to cover the gap.

This is the sense in which Flash, Illustrator, Unity, etc. use the term, so there seems to be good consensus that 9-slice means stretching, not repeating. This is usually used for scaling UI elements like message windows & buttons - and a Google image search turns up this usage almost exclusively.

Diagram showing a 9-Slice asset in Flash (left) and how it looks when rendered on a larger rectangle (right)

Image from Adobe docs on 9-slice scaling

Diagram showing 9-Slice scaling in game{closure}

Image from the game{closure} docs on 9-slice options

The term I'm more familiar with to describe a set of tiles that can cover an area of any shape or size is "Autotile" (especially in the context of a system that works out/constructs the right tile permutation to use based on adjacency rules, so a level designer doesn't have to hand-pick each tile)

This terminology seems to have been popularized by RPGMaker, which has used a couple of variants on this idea over its generations.

An image search for autotile shows results which seem much closer to what the question describes, and other posts on GameDev.StackExchange describe this as "autotiling" as well.

Image describing basic & extended autotile layouts

Image from the docs for the Rotorz Tile System for Unity

\$\endgroup\$
  • \$\begingroup\$ That's good to know! \$\endgroup\$ – Vaillancourt Jul 10 '16 at 22:45
  • \$\begingroup\$ Is it typical for an implementation to squeeze all the inside corners into a single tile? This (and the "basic" version that doesn't have tiles for the sides) seems to depend on the "real" tiling unit being a quarter of the size of the tile. \$\endgroup\$ – Random832 Jul 11 '16 at 3:32
  • 1
    \$\begingroup\$ @Random832 Those quarter-tile units are how RPG Maker's version works, and quite a few implementations out there seem to be patterned off of this, either for interoperability with existing tiles or just because it's demonstrably useful. I think this reduces the number of tile permutations that need to be explicitly created & occupy space in the tileset. A rough count suggests you'd need about 47 tiles to get the same permutations without subdividing them into smaller units. \$\endgroup\$ – DMGregory Jul 11 '16 at 4:03
  • 3
    \$\begingroup\$ @DMGregory Not about 47 but exactly 47, I just checked a template I have for 8 direction autotile. \$\endgroup\$ – Maurycy Jul 11 '16 at 9:03
  • \$\begingroup\$ Wait, why do you need 47, and not just the 13 visible in the image in the original question? \$\endgroup\$ – Tin Man Jul 12 '16 at 20:06
-1
\$\begingroup\$

There are some other names; Wang tiles (dominoes), aperiodic tiling

https://en.wikipedia.org/wiki/Wang_tile

Also known as tile sets with map editors.

\$\endgroup\$
  • \$\begingroup\$ "Tile set" is a way more generic term and does not refer to the specific type of a tile set in question here. \$\endgroup\$ – Tyyppi_77 Jul 12 '16 at 10:18
  • \$\begingroup\$ Although most terrain tiles used in game tilesets could technically be called Wang tiles, since they'll only match without a seam when placed next to certain neighbouring tiles with corresponding edges, this is a very loose definition and doesn't specifically relate to the particular corner & edge patters OP asks about. (Any subset of the tileset shown, including anywhere from one tile to the whole image, is mathematically a set of Wang tiles). Wang tiles and especially aperiodic tiling mainly come up in the context of varying large areas of texture to hide repeats, or procedural generation. \$\endgroup\$ – DMGregory Jul 12 '16 at 13:29
  • 1
    \$\begingroup\$ Wang tiles is a mathematical term. \$\endgroup\$ – Per Alexandersson Jul 12 '16 at 22:10

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.