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

3 Answers 3

Reset to default
39
\$\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\$
6
  • \$\begingroup\$ 9 Patch was the one I had heard of, thanks for the other ones to have a look at too! \$\endgroup\$
    – lozzajp
    Commented Jul 10, 2016 at 19:43
  • \$\begingroup\$ Heheh, research prior to the question =p \$\endgroup\$
    – Elva
    Commented Jul 10, 2016 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
    Commented Jul 10, 2016 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 ♦
    Commented Jul 10, 2016 at 22:43
  • 1
    \$\begingroup\$ I've also been familiarized with the name 9-grid. \$\endgroup\$
    – Maurycy
    Commented Jul 11, 2016 at 8:18
66
\$\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\$
8
  • \$\begingroup\$ That's good to know! \$\endgroup\$
    – Vaillancourt ♦
    Commented Jul 10, 2016 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
    Commented Jul 11, 2016 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 ♦
    Commented Jul 11, 2016 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
    Commented Jul 11, 2016 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 Wizard
    Commented Jul 12, 2016 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\$
3
  • \$\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\$
    – user35344
    Commented Jul 12, 2016 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 ♦
    Commented Jul 12, 2016 at 13:29
  • 1
    \$\begingroup\$ Wang tiles is a mathematical term. \$\endgroup\$
    – Per Alexandersson
    Commented Jul 12, 2016 at 22:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .