Tiles: types, variations, transitions and animations

General discussion about LÖVE, Lua, game development, puns, and unicorns.
Post Reply
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Tiles: types, variations, transitions and animations

Post by 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
? :o

Transitions default:
transitions; License CC0 (с) darkfrei, 2023
transitions; License CC0 (с) darkfrei, 2023
tile-transitions-256x256-16.png (22.41 KiB) Viewed 2108 times
Variants of stone transitions:
stone-1-transitions; License CC0 (с) darkfrei, 2023
stone-1-transitions; License CC0 (с) darkfrei, 2023
stone-1-transitions-256x256-16.png (42.16 KiB) Viewed 2072 times
stone-2-transitions; License CC0 (с) darkfrei, 2023
stone-2-transitions; License CC0 (с) darkfrei, 2023
stone-2-transitions-256x256-16.png (45.59 KiB) Viewed 2072 times
Last edited by darkfrei on Fri Feb 03, 2023 10:28 am, edited 1 time in total.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

Very interesting article about tiles in Factorio Friday Facts: :o: :o: :o: 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-6; License CC0 (с) darkfrei, 2023
tile-transitions-256x256-6.png (14.73 KiB) Viewed 2048 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-6; License CC0 (с) darkfrei, 2023
tile-transitions-256x256-15.png (34.68 KiB) Viewed 2022 times
All 47 tiles (46 transitions + one origin)
tile-transitions-256x256-47.png
tile-transitions-256x256-47.png (95.26 KiB) Viewed 2020 times
Last edited by darkfrei on Thu Feb 02, 2023 1:55 pm, edited 1 time in total.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

And here is the result:
stone-1-transitions-47; License CC0 (с) darkfrei, 2023
stone-1-transitions-47; License CC0 (с) darkfrei, 2023
stone-1-transitions-256x256-47.png (110.89 KiB) Viewed 2016 times
Also with grass texture:
grass-texture; License CC0 (с) darkfrei, 2023
grass-texture; License CC0 (с) darkfrei, 2023
grass-256.png (131.37 KiB) Viewed 2016 times
grass-transitions-47; License CC0 (с) darkfrei, 2023
grass-transitions-47; License CC0 (с) darkfrei, 2023
grass-transitions-256x256-47.png (860.87 KiB) Viewed 2016 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

The names for tiles:
names-47-tiles.png
names-47-tiles.png (90.25 KiB) Viewed 2015 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
RNavega
Party member
Posts: 235
Joined: Sun Aug 16, 2020 1:28 pm

Re: Tiles: types, variations, transitions and animations

Post by 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?
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

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?
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
mapGrid-01.png (67.85 KiB) Viewed 1944 times
tiled-mapGrid-01.png
tiled-mapGrid-01.png (118.33 KiB) Viewed 1944 times
(move the map grid with the mouse)
Attachments
tileset-47-tiles-generator-01.love
CC0
(18.38 KiB) Downloaded 63 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

This version converts such files
2023-02-06-sprites.png
2023-02-06-sprites.png (13.06 KiB) Viewed 1880 times
into the sprite sheet:
tileset-tile-02.png
tileset-tile-02.png (23.87 KiB) Viewed 1880 times
Attachments
tileset-47-tiles-generator-02.love
CC0
(16.87 KiB) Downloaded 57 times
Last edited by darkfrei on Mon Feb 06, 2023 2:50 pm, edited 2 times in total.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Tiles: types, variations, transitions and animations

Post by darkfrei »

Result image:
tiled-mapGrid-02.png
tiled-mapGrid-02.png (88.36 KiB) Viewed 1878 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
tile-transitions-256x256-47-v2.png (54 KiB) Viewed 1161 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.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 18 guests