How to create animations from sprite sheets?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
BlueDigit1250
Prole
Posts: 3
Joined: Sun Jul 24, 2011 3:05 am

How to create animations from sprite sheets?

Post by BlueDigit1250 » Sun Jul 24, 2011 4:43 am

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

User avatar
Ensayia
Party member
Posts: 397
Joined: Sat Jun 12, 2010 7:57 pm
Location: Middle of Nowhere, TN

Re: How to create animations from sprite sheets?

Post by Ensayia » Sun Jul 24, 2011 4:57 am

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
Prole
Posts: 3
Joined: Sun Jul 24, 2011 3:05 am

Re: How to create animations from sprite sheets?

Post by BlueDigit1250 » Sun Jul 24, 2011 5:49 am

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
Prole
Posts: 9
Joined: Sat Jul 16, 2011 12:36 am

Re: How to create animations from sprite sheets?

Post by NC22 » Sun Jul 24, 2011 7:05 am

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

User avatar
kraftman
Party member
Posts: 277
Joined: Sat May 14, 2011 10:18 am

Re: How to create animations from sprite sheets?

Post by kraftman » Sun Jul 24, 2011 8:26 am

BlueDigit1250 wrote: 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.

User avatar
ivan
Party member
Posts: 1549
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: How to create animations from sprite sheets?

Post by ivan » Sun Jul 24, 2011 9:01 am

NC22 wrote:

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
Prole
Posts: 3
Joined: Sun Jul 24, 2011 3:05 am

Re: How to create animations from sprite sheets?

Post by BlueDigit1250 » Mon Jul 25, 2011 7:42 am

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

- BlueDigit1250

Post Reply

Who is online

Users browsing this forum: No registered users and 38 guests