Splitting Up

What you want to do is not only show one frame, but split the reel into its individual frames and store each frame (or, to be precise the quads that describe each frame) in some sort of array. This will let you pick the one you want at each moment. Fortunately, arrays, or, more specifically, tables, are a cornerstone of the Lua programming language.

Look at Listing 4 and notice how you read each frame/quad into the frames table on lines 6 to 9.

01 function love.load ()
02   love.graphics.setBackgroundColor(0.5, 0.8, 1, 1)
03
04   reel = love.graphics.newImage ("images/cmcf.png")
05
06   frames = {}
07   for i = 0, reel:getWidth() - 64, 64 do
08     table.insert (frames, love.graphics.newQuad (i, 0, 64, 64, reel:getDimensions ()))
09   end
10 end
11
12 function love.update ()
13 end
14
15 function love.draw ()
16   love.graphics.draw (reel, frames[5], 100, 100)
17 end

On line 6 you make frames a table by assigning it an empty array. Then on line 7, you start a for loop to fill up the table. In a similar way to C/C++ and JavaScript, for loops in Lua take three arguments: the initial value for the iterator ( ), the end value for the iterator (reel:getWidth () - 64) and the increment (64) you add to the iterator after each loop.

Here's how this goes: i starts out as  , and on line 8 you use the Lua table method insert to dump the quad that goes from (0, 0) to (63, 63) into the frames table. Next time around, i's value is 64 and the quad you dump is from (64, 0) to (127, 63). This goes on until you reach the left side of the last frame at (320, 0) and you dump from there to (383, 63) into the quad table, covering all six frames.

You can now use an index to refer to any of the frames and show it in the game window, which is exactly what you do on line 16.

To run through the frames and animate your sprite, you now use the update part of your program – see Listing 5.

01 local framecounter = 1
02
03 function love.load ()
04   love.graphics.setBackgroundColor(0.5, 0.8, 1, 1)
05
06   reel = love.graphics.newImage ("images/cmcf.png")
07
08   frames = {}
09   for i = 0, reel:getWidth() - 64, 64 do
10     table.insert (frames, love.graphics.newQuad (i, 0, 64, 64, reel:getDimensions()))
11   end
12 end
13
14 function love.update ()
15   framecounter = framecounter + 1
16   if framecounter > 6 then
17     framecounter =  1
18   end
19 end
20
21 function love.draw ()
22   love.graphics.draw (reel, frames[framecounter], 100, 100)
23 end

The new thing here is that we have a variable, framecounter, that does what it says on the tin: It starts out as 1 (line 1) and increments to 6 on each iteration of update () (lines 15 to 18). You can then use it to show each of the frames in the draw () section (line 22).

Run the program and Cubey McCubeFace walks … but badly.

LÖVE in Time

When you run Listing 5, Cubey "walks," but the movement is jittery and way too fast to appreciate as a smooth animation.

That is because you are using the speed of your processors to run the animation. Depending on the load of your CPU, the execution of your program will be faster or slower and, in consequence, so will your animation. The speed of your animation will also vary depending on the speed of the device you use. This is not good. You cannot have your game run so fast that it's unplayable or so slow that it's sluggish and boring.

What you need is to run the animation in game time. Game time means that, if you want an action to take half a second to complete, it will take half a second regardless of the load of the processors or the power of the machine it is running on.

Game time is implemented in LÖVE via the dt variable. The idea behind dt is simple: It contains the time that has passed since the last time update was called. Just with that information you can make actions last exactly as long as intended.

Say you want a full walk cycle of Cubey McCubeFace to last exactly half a second. You could modify your program to look like Listing 6.

01 local framecounter = 1
02 local time = 0
03
04 function love.load ()
05   love.graphics.setBackgroundColor(0.5, 0.8, 1, 1)
06
07   reel = love.graphics.newImage ("images/cmcf.png")
08
09   frames = {}
10   for i = 0, reel:getWidth() - 64, 64 do
11     table.insert (frames, love.graphics.newQuad (i, 0, 64, 64, reel:getDimensions()))
12   end
13 end
14
15 function love.update (dt)
16   time = time + dt
17   if time >= 0.5 then
18     time = 0
19   end
20
21   framecounter = math.floor ((time/0.5) * #frames) + 1
22 end
23
24 function love.draw ()
25   love.graphics.draw (reel, frames[framecounter], 100, 100)
26 end

You set a new variable time to   (line 2), and each time you enter update () you add dt to time (notice you need to make dt a parameter of love.update () for this to work). Then, if you divide time by the duration you want for your animation (0.5 seconds, in this case) as shown on line 21, you will have the stage in the animation counting from when time was  . For example, if time is 0.25, a quarter of a second has passed since the animation started:

0.25 / 0.5 = 0.5

This tells your program you are halfway through the animation.

Now multiply that by the number of frames (#frames – you use # to get the number of items in any table), and you will get a number between zero and five. Get rid of the decimals using Lua's math.floor () function, add one and you've got a number between one and six, the number of the frame you need to show.

As soon as the time reaches the duration of the animation, you reset time to   (line 17 through 19) and start all over again.

Run the program, and you will see that Cubey McCubeFace runs through one walk cycle every half a second.

Clean LÖVE

To keep things nice and tidy, you can take all the initiation and calculations out to separate functions. To make your main.lua file even cleaner, you can then separate those functions into a different file.

In this example, Listing 7 is your main file, and Listing 8 is where all the gory stuff goes.

01 function animation (reel, framesize, duration, pos)
02   local animation = {}
03
04   animation.reel = love.graphics.newImage (reel)
05
06   animation.frames = {}
07   for i = 0, animation.reel:getWidth() - framesize[1], framesize [1] do
08     table.insert (animation.frames, love.graphics.newQuad (i, 0, framesize[1], framesize[2], animation.reel:getDimensions()))
09   end
10
11   animation.duration = duration
12   animation.frame = 1
13   animation.time = 0
14
15   animation.pos = pos
16
17   return animation
18 end
19
20  function framecounter (time, duration)
21   if time >= duration then
22     time = 0
23   end
24   return math.floor ((time / cmcf.walk.duration) * #cmcf.walk.frames) + 1, time
25 end

01 require 'animation'
02 local time = 0
03
04 function love.load ()
05   love.graphics.setBackgroundColor(0.5, 0.8, 1, 1)
06
07   cmcf = {}
08   cmcf.walk = animation ("images/cmcf.png", {64, 64}, 0.5, {100, 100})
09 end
10
11 function love.update (dt)
12   cmcf.walk.frame, cmcf.walk.time = framecounter (cmcf.walk.time + dt, cmcf.walk.duration)
13 end
14
15 function love.draw ()
16   love.graphics.draw (cmcf.walk.reel, cmcf.walk.frames[cmcf.walk.frame], unpack (cmcf.walk.pos))
17 end

To include the contents of Listing 8 in your main.lua file, all you need is the require command (line 1).

Most of what is going on in Listing 8 should be self-explanatory, but it is worth pointing out how Lua tables can act like pseudo-classes that will allow you to create a cmcf (Cubey McCubeFace) walk cycle type-object, a jump cycle type-object, a run cycle type-object, and so on.