Tiles: types, variations, transitions and animations

[darkfrei]

Hi all!

Is here a good, simple and fast way to organize

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

?

Transitions default:

transitions; License CC0 (с) darkfrei, 2023

tile-transitions-256x256-16.png (22.41 KiB) Viewed 2998 times

Variants of stone transitions:

stone-1-transitions; License CC0 (с) darkfrei, 2023

stone-1-transitions-256x256-16.png (42.16 KiB) Viewed 2962 times

stone-2-transitions; License CC0 (с) darkfrei, 2023

stone-2-transitions-256x256-16.png (45.59 KiB) Viewed 2962 times

[darkfrei]

Very interesting article about tiles in Factorio Friday Facts: https://www.factorio.com/blog/post/fff-199

Main idea: move the tile transitions from the tile to the neighbour tiles; But the tileset must be at least 47 tiles, not 16 as above.

You have 6 tiles, other can be combined from several of them with:

1. Tile rotation
2. Combination of tiles

Code: Select all

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
}

tile-transitions-6; License CC0 (с) darkfrei, 2023

tile-transitions-256x256-6.png (14.73 KiB) Viewed 2938 times

All transitions, but without rotating (15 tiles):

Code: Select all

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
}

tile-transitions-6; License CC0 (с) darkfrei, 2023

tile-transitions-256x256-15.png (34.68 KiB) Viewed 2912 times

All 47 tiles (46 transitions + one origin)

tile-transitions-256x256-47.png (95.26 KiB) Viewed 2910 times

[darkfrei]

And here is the result:

stone-1-transitions-47; License CC0 (с) darkfrei, 2023

stone-1-transitions-256x256-47.png (110.89 KiB) Viewed 2906 times

Also with grass texture:

grass-texture; License CC0 (с) darkfrei, 2023

grass-256.png (131.37 KiB) Viewed 2906 times

grass-transitions-47; License CC0 (с) darkfrei, 2023

grass-transitions-256x256-47.png (860.87 KiB) Viewed 2906 times

[darkfrei]

The names for tiles:

names-47-tiles.png (90.25 KiB) Viewed 2905 times

[RNavega]

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?

[darkfrei]

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?

It's just a try how to manage such system, you can see the map grid and the same map gid with transition tiles:

mapGrid-01.png (67.85 KiB) Viewed 2834 times

tiled-mapGrid-01.png (118.33 KiB) Viewed 2834 times

(move the map grid with the mouse)

[darkfrei]

This version converts such files

2023-02-06-sprites.png (13.06 KiB) Viewed 2770 times

into the sprite sheet:

tileset-tile-02.png (23.87 KiB) Viewed 2770 times

[darkfrei]

Result image:

tiled-mapGrid-02.png (88.36 KiB) Viewed 2768 times

And the position of each tile:

Code: Select all

 -- 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
}

tile-transitions-256x256-47-v2.png (54 KiB) Viewed 2051 times

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.