How to create animations from sprite sheets?

[BlueDigit1250]

I've just started with LÖVE and I've been following the tutorials on the wiki. I searched the forums for animated sprite sheets and came up with AnAl (which seems to be discontinued for 0.7.x). And using quads, I couldn't find any information as to how to go about animating a sprite sheet with quads. Would anyone be able to give a snippet/example or a link to a tutorial. Any help would be greatly appreciated.

- BlueDigit1250

[Ensayia]

I don't have a specific example on hand, but the idea is to have a series of images (or a series of quads on one large image) and iterate through them with a timed loop. Whenever I learn something new I generally look at a library that has done it before (AnAL in this case) and try to adapt it to something that suits my needs.

Good Luck!

[BlueDigit1250]

Thanks for the quick reply, I know what sprite sheets are and have made them before. I'm a beginner at programming and I realised after looking at the demos that I had to include the AnAl.lua file as a module...

Like I said I'm a beginner programmer in fact lets just say this is my first time programming, because it may as well be. What language, if not lua, do you recommend me starting in?

- BlueDigit1250

[NC22]

Code: Select all

	
	self.frame = 0
	self.hitanimation = {}
	self.hitanimation[0] = love.graphics.newQuad(0,0, 10,10,self.width,self.height )
--self.width and self.height - is total size of image
--0,0 x y point in pixels in your image where your first frame starts from
-- 10 ,10 size of the first frame
	self.hitanimation[1] = love.graphics.newQuad(10,0,10,10,self.width,self.height )
--etc
	self.hitanimation[2] = love.graphics.newQuad(20,0,10,10,self.width,self.height )
-etc
	self.hitanimation[3] = love.graphics.newQuad(30,0,10,10,self.width,self.height )
--etc
--if update function past some thing like this for calculate what frame show in current dt
love.update(dt)
self.frame = (self.frame + 20*dt) % 4 
--and in the draw function past render func
love.draw()
local frame=math.floor(self.frame)
		love.graphics.drawq(self.image,self.hitanimation[frame],drawX,drawY)

end
--this will be simple loop animation in 4 frames

[kraftman]

Like I said I'm a beginner programmer in fact lets just say this is my first time programming, because it may as well be. What language, if not lua, do you recommend me starting in?

- BlueDigit1250

Lua is a good language to start with.

[ivan]

Code: Select all

	
	self.frame = 0
	self.hitanimation = {}
	self.hitanimation[0] = love.graphics.newQuad(0,0, 10,10,self.width,self.height )
--self.width and self.height - is total size of image
--0,0 x y point in pixels in your image where your first frame starts from
-- 10 ,10 size of the first frame
	self.hitanimation[1] = love.graphics.newQuad(10,0,10,10,self.width,self.height )
--etc
	self.hitanimation[2] = love.graphics.newQuad(20,0,10,10,self.width,self.height )
-etc
	self.hitanimation[3] = love.graphics.newQuad(30,0,10,10,self.width,self.height )
--etc
--if update function past some thing like this for calculate what frame show in current dt
love.update(dt)
self.frame = (self.frame + 20*dt) % 4 
--and in the draw function past render func
love.draw()
local frame=math.floor(self.frame)
		love.graphics.drawq(self.image,self.hitanimation[frame],drawX,drawY)

end
--this will be simple loop animation in 4 frames

Yep, that's the way to do it.
It's also possible to generate the quad information procedurally.

Code: Select all

  local w = tileset:getWidth ( )
  local h = tileset:getHeight ( )
  local cols = w / 128
  local rows = h / 128
  for i = 1, cols * rows, 1 do
    local frame = i - 1
    local x = frame % cols * 128
    local y = math.floor ( frame / cols ) * 128
    quads[i] = love.graphics.newQuad ( x, y, 128, 128, w, h )
  end

Where "tileset" is your tileset image and 128 is the size of a single frame.

Check this out.

[BlueDigit1250]

Thank you all so much for your help, I'll try it out very shortly.

- BlueDigit1250