LÖVE

1. the tile types (earth, water, stone, etc.),
2. images of them (one for all tiles, separated by the type, by variations, by animations or other),
3. transitions (from current to other tile types),
4. variations (same tile can have multiple images),
5. frames of animation (from 1 image to several with frame rate and/or changing image by condition),
6. the .lua file to describe them as prototypes,
7. and how to manage this prototypes in the game

1. Tile rotation
2. Combination of tiles

local tilesTransitions = {
	{c={1,0,0,0,0,0,0,0}, r=4}, -- top left vertex
	{c={1,1,1,0,0,0,0,0}, r=4}, -- top plank
	{c={1,1,1,1,1,0,0,0}, r=4}, -- top left edge
	{c={1,1,1,1,1,1,1,0}, r=4}, -- right U
	{c={1,1,1,1,1,1,1,1}, r=1}, -- O-tile
	{c={1,1,1,1,1,1,1,1}, r=1}, -- full
}

local tileTransitions15 = {
	{x=1, y=1, c={1,0,0,0,0,0,0,0}, r=4}, -- top left vertex
	{x=2, y=1, c={1,1,1,0,0,0,0,0}, r=4}, -- top plank
	{x=3, y=1, c={1,1,1,0,1,1,1,0}, r=2}, -- top and bottom planks
	{x=4, y=1, c={1,0,1,0,1,0,1,0}, r=1}, -- 4 vertices
	
	{x=1, y=2, c={1,0,1,0,0,0,0,0}, r=4}, -- 2 top vertices
	{x=2, y=2, c={1,1,1,0,1,0,0,0}, r=4}, -- top plank and bottom right vertex
	{x=3, y=2, c={1,0,0,0,1,0,0,0}, r=2}, -- top left and bottom right vertices
	{x=4, y=2, c={1,1,1,1,1,1,1,1}, r=1}, -- O-tile
	
	{x=1, y=3, c={1,0,1,0,0,0,0,0}, r=4}, -- tl, tr, br vertices
	{x=2, y=3, c={1,1,1,0,1,0,0,0}, r=4}, -- top plank and bottom left vertex
	{x=4, y=3, c={1,1,1,1,1,1,1,1}, r=1}, -- full
	
	{x=1, y=4, c={1,1,1,1,1,0,0,0}, r=4}, -- top left edge
	{x=2, y=4, c={1,1,1,0,1,0,1,0}, r=4}, -- top plank and bottom vertices
	
	{x=1, y=5, c={1,1,1,1,1,0,1,0}, r=4}, -- top left edge and bottom left vertex
	{x=2, y=5, c={1,1,1,1,1,1,1,0}, r=4}, -- U-form, left side open
}

RNavega wrote: ↑Thu Feb 02, 2023 5:00 pm Thanks a lot for all the mockups, that's very educational.

What kind of game are you looking to use such a flexible tile system?

 -- as {type, x, y}
 -- type as binary value in list 
 -- {	{x=-1,y=-1}, {x=0,y=-1}, {x= 1,y=-1}, {x= 1,y=0}, 
 --	{x= 1,y= 1}, {x=0,y= 1}, {x=-1,y= 1}, {x=-1,y=0}, }
 -- as 1, 2, 4, 8, 16, 32, 64, 128:
local spriteTiles48 = {
	{  0,16, 3}, -- full
	{  1,10, 3},
	{  4, 8, 3},
	{  5, 9, 3},
	{  7, 3, 1},
	{ 16, 8, 1},
	{ 17,12, 3},
	{ 20, 8, 2},
	{ 21,11, 2},
	{ 23,15, 1},
	{ 28, 4, 2},
	{ 29,14, 2},
	{ 31, 4, 1},
	{ 64,10, 1},
	{ 65,10, 2},
	{ 68,11, 3},
	{ 69,12, 2},
	{ 71,16, 1},
	{ 80, 9, 1},
	{ 81,12, 1},
	{ 84,11, 1},
	{ 85, 9, 2}, -- 4 vertices
	{ 87, 6, 1},
	{ 92,14, 1},
	{ 93, 7, 2},
	{ 95, 7, 1},
	{112, 3, 3},
	{113,16, 2},
	{116,15, 2},
	{117, 6, 3},
	{119,14, 3},
	{124, 4, 3},
	{125, 7, 3},
	{127,15, 3},
	{193, 2, 2},
	{197,13, 2},
	{199, 2, 1},
	{209,13, 1},
	{213, 5, 2},
	{215, 5, 1},
	{221, 1, 2},
	{223, 1, 1},
	{241, 2, 3},
	{245, 5, 3},
	{247,13, 3},
	{253, 1, 3},
	{255, 6, 2}, -- O-tile
	{256, 3, 2}, -- empty
}

Blob Center:

Center tile with no transitions.
Blob Top-Left Corner:

Top-left corner with transitions to the right and bottom, also a bottom-right tile.
Blob Top Edge:

Top edge with transitions to the left, bottom, right, bottom-right, and bottom-left tiles.
Blob Left Edge:

Left edge with transitions to the top, bottom, top-left, bottom-left, and top-right tiles.
Blob Top-Right Corner:

Top-right corner with transitions to the left and bottom, also a bottom-left tile.
Blob Right Edge:

Right edge with transitions to the top, bottom, top-right, bottom-right, and top-left tiles.
Blob Bottom-Left Corner:

Bottom-left corner with transitions to the right and top, also a top-right tile.
Blob Bottom Edge:

Bottom edge with transitions to the left, top, right, top-right, and top-left tiles.
Blob Bottom-Right Corner:

Bottom-right corner with transitions to the left and top, also a top-left tile.
Blob Inner Corner (Top-Left):

Inner corner with a value at the top-left.
Blob Inner Corner (Top-Right):

Inner corner with a value at the top-right.
Blob Inner Corner (Bottom-Left):

Inner corner with a value at the bottom-left.
Blob Inner Corner (Bottom-Right):

Inner corner with a value at the bottom-right.
Blob Inner Edge (Top):

Inner edge with a value at the top.
Blob Inner Edge (Left):

Inner edge with a value at the left.
Blob Inner Edge (Right):

Inner edge with a value at the right.
Blob Inner Edge (Bottom):

Inner edge with a value at the bottom.
Blob Dual Inner Corner (Top-Left):

Dual inner corner with values at both top-left corners.
Blob Dual Inner Corner (Top-Right):

Dual inner corner with values at both top-right corners.
Blob Dual Inner Corner (Bottom-Left):

Dual inner corner with values at both bottom-left corners.
Blob Dual Inner Corner (Bottom-Right):

Dual inner corner with values at both bottom-right corners.