Runtime tileset generation possible?

[Stigma]

So basically i want to be able to have individual sprites, on my project, and on runtime i want to use spritebatches for efficient drawing. I know games like space station 13 and factorio that "glue" together the individual quads on initialize.

This enables for using only the quads thay are actually in use, disabling those that wont be used yet, making smaller tilesets and therefore less struggle for the GPU.

Any ideas how i should be approaching this?

[grump]

Tileset generation: Create an ImageData object of the final size of your tile sheet. Iterate over required tiles, use ImageData:paste() to copy tile data to your sheet. The completed sheet can then be used to create a texture/image with love.graphics.newImage().

This is easiest done when all tiles have the same size. For tiles with varying sizes you may have to think about how to arrange the tiles in the sheet in order to not waste too much space. BSP is a good algorithm to pack tiles efficiently.

Remember to leave border around the tiles if you plan to have zoom in/out functionality.

[zorg]

If you really want to make sure everything is literally seamless if you do want to scale or rotate, then you need to fill those borders with the colors of the inner rows/colums, not just leave them transparent for example, otherwise seams might appear. (In other words, extrude each of the 4 sides by 1 pixel; implementation left to the reader )

[grump]

Here's a solution for the border problem zorg mentioned, copy-pasted from some old project. This function creates a tileset from an image and adds borders as required. Sorry, it's in moonscript, but should be easy to translate to Lua.

Code: Select all

image = love.image

_genBorders: (img, spacing) =>
	tw, th = @_tileWidth, @_tileHeight
	xtiles, ytiles = img\getDimensions!
	xtiles = math.ceil(xtiles / (tw + spacing))
	ytiles = math.ceil(ytiles / (th + spacing))

	tiles = assert(image.newImageData(xtiles * (tw + spacing + 1), ytiles * (th + spacing + 1)))

	sx, sy, dx, dy = 0, 0, 1, 1
	for y = 0, ytiles-1
		sx, dx = 0, 1
		for x = 0, xtiles-1
			with tiles
				\paste(img,    dx, dy,    sx,      sy,      1,  th)
				\paste(img,    dx, dy,    sx,      sy,      tw,  1)
				\paste(img,    dx, dy,    sx,      sy,      tw, th)
				\paste(img, dx+tw, dy,    sx+tw-1, sy,      1,  tw)
				\paste(img,    dx, dy+th, sx,      sy+th-1, th,  1)
				\paste(img, dx+tw, dy+th, sx+tw-1, sy+th-1,  1,  1)
			sx += tw+spacing
			dx += tw+spacing+1
		sy += th+spacing
		dy += th+spacing+1

	@_image = tiles
	@_xtiles, @_ytiles = xtiles, ytiles

[Stigma]

Thanks everyone for the replies! I will be trying to implement that way

[Stigma]

By the way why is the seams happening ? Doesnt the quads get the whole image from the tileset afterwards ? The images are glued together without borders i believe, didn't add +1 to any of the coordinates on :paste()

[pgimeno]

The calculations are performed by the GPU in floating point. These are subject to rounding errors. The effect tends to appear at coordinates that are near something plus 0.5, because sometimes it's rounded up and sometimes down.

[radgeRayden]

You can create an ArrayImage (https://love2d.org/wiki/love.graphics.newArrayImage) to circumvent the issue altogether.