Page 1 of 1

Is there a useful tool to quad sprite sheets? or I Make one?

Posted: Mon Sep 17, 2012 10:02 pm
by sanjiv
1. Are there tools for taking existing sprite sheets and defining quads and collision boxes?

2. I was thinking of making a tool, and wanted to get input. I have this old unfinished level editor (attached love file) which I can use to make different layers of shapes, and then save them. I was thinking of using a similar approach for making tables of quads. Essentially, it would load pictures at x2 or x3 scale, and let players draw layers of shapes over them. Then have these shapes save as tables in the correct format for defining quads.

Thoughts? I'm only considering this because I didn't know better tools existed for LOVE users. So if you know better, enlighten me.

-------------
EDIT: Instructions for the editor (it's not finished)
  • (1) doesn't work, but (2) and (3) should work fine for saving and loading.
    Left click OR left drag to draw.
    Right click to delete
    page-Up or page-Down to switch color, but you can also use the mouse wheel.
    Each color is it's own table of shapes. You can only interact with one layer at a time.
    You can move shapes by dragging them, if you have the right color selected.
    You can draw rectangles, triangles, and parallelograms

Re: Is there a useful tool to quad sprite sheets? or I Make

Posted: Tue Sep 18, 2012 9:18 am
by kikito
sanjiv wrote:1. Are there tools for taking existing sprite sheets and defining quads and collision boxes?
First, I don't think there is something that does spritesheets as well as collision boxes in the same go. I am also not sure there's enough need for such tool. But I might be wrong.

For doing spritesheets only, then the easiest way is having the sprites organized in a grid, instead of randomly around. Then calculating the coordinates of each sprite is easy. Anim8 allows for "several grids in the same spritesheet" - for example, if you have 2 or 3 sizes of sprites, you can code those in 4 lines.

Another tool is texturepacker. I'm not sure it is able to deduce individual sprites from a given spritesheet, though - mainly because they "compress the empty space around each sprite".

You probably want to see the aquaria editor for inspiration at least:



That's all I know about tools.
Thoughts? I'm only considering this because I didn't know better tools existed for LOVE users. So if you know better, enlighten me.
To be honest, your editor didn't make sense to me. I think I'll wait until you have it a bit more polished. Consider using a gui lib, like quickie or love frames.

Re: Is there a useful tool to quad sprite sheets? or I Make

Posted: Tue Sep 18, 2012 6:36 pm
by sanjiv
kikito wrote:
sanjiv wrote:1. Are there tools for taking existing sprite sheets and defining quads and collision boxes?
First, I don't think there is something that does spritesheets as well as collision boxes in the same go. I am also not sure there's enough need for such tool.
Yes, this is exactly what I'm asking for. I'll need it for my own projects eventually, so I'd like to emphasize this as my main question in this thread.

Thanks.

Sorry about my editor. It just draws shapes on a field. I'm still hammering out the collision algorithms in another love program, so I really won't have anything to post to the Projects board until after I merge those two. I'll start looking into libraries to work on it.

Re: Is there a useful tool to quad sprite sheets? or I Make

Posted: Wed Sep 19, 2012 12:26 am
by Lafolie
Assuming there is no spacing or empty tiles:

Code: Select all

spriteset = function(image, gridW, gridH)
	image = love.graphics.newImage(image)
	gridW = gridW or 16
	gridH = gridH or 16
	local width = image:getWidth()
	local height = image:getHeight()
	local quads = {}
	for y = 0, height / gridH - 1 do
		for x = 0, width / gridW - 1 do
			quads[# quads + 1] = love.graphics.newQuad(x * gridW, y * gridH, gridW, gridH, width, height)
		end
	end
	return {sprite = quads, img = image}
end

--use
example = spriteset("image.png", 16, 24)

--drawing
love.graphics.drawq(example.img, example.sprite[1], 1, 1)

Re: Is there a useful tool to quad sprite sheets? or I Make

Posted: Wed Sep 19, 2012 5:13 pm
by sanjiv
Thanks. I've learnt a lot just from the neat way in which you write your code. I can definitely use this as a base, and then add in the extra stuff to (1) draw in hitboxes, and (2) designate empty tiles, likely just by right clicking on the grid. I then expect to save the results as some form of text which a user can then transform into a chunk that's ready to be dropped into their game folder.

I'm also still holding out that a tool already exists. Recent MegaMan-style games now feature

1) A sprite that's positioned relative to player coordinates, and has certain dimensions
2) A collision box that has a different position and set of dimensions
3) A melee attack box that has its own position and dimensions, relative to the player coordinate. A single player may even have multiple such attack boxes active at one time (ie. if using multiple blades)

Stuff like Game Maker have these tools built in, and I'd be surprised if there wasn't a stand alone tool already out there. If there's not, then I think that'd be something worth creating for LOVE users.

Re: Is there a useful tool to quad sprite sheets? or I Make

Posted: Wed Sep 19, 2012 7:16 pm
by Lafolie
There are lots of libraries available already, and most of them do somewhat trivial things. I guess it's just that some of the concepts are inquired about a lot. See: Category:Libraries, I recently added one :)

Thanks for the compliment, it's good to see that you learned stuff, and I actually thought that the code I posted was kinda lazy. Using that function, everything you 'parse' with it loads it's own image into memory, which isn't great fi you want lots of things using it. To combat this you can use the returned table as a reference for an entity object, or you could do something like

Code: Select all

spriteset = function(image, gridW, gridH)
     image = type(image) == "string" and love.graphics.newImage(image) or image
     --previous code
So we just changed the first line of the function to check if we passed a reference or else we grab an image.