A LÖVE animation primer
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.
Listing 4
Separate Frames
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.
Listing 5
Cubey McCubeFace Walks
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.
Listing 6
Cubey McCubeFace Walks Slow
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.
Listing 8
animation.lua
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
Listing 7
main.lua
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.
« Previous 1 2 3 Next »
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
News
-
Linux Kernel Reducing Long-Term Support
LTS support for the Linux kernel is about to undergo some serious changes that will have a considerable impact on the future.
-
Fedora 39 Beta is Now Available for Testing
For fans and users of Fedora Linux, the first beta of release 39 is now available, which is a minor upgrade but does include GNOME 45.
-
Fedora Linux 40 to Drop X11 for KDE Plasma
When Fedora 40 arrives in 2024, there will be a few big changes coming, especially for the KDE Plasma option.
-
Real-Time Ubuntu Available in AWS Marketplace
Anyone looking for a Linux distribution for real-time processing could do a whole lot worse than Real-Time Ubuntu.
-
KSMBD Finally Reaches a Stable State
For those who've been looking forward to the first release of KSMBD, after two years it's no longer considered experimental.
-
Nitrux 3.0.0 Has Been Released
The latest version of Nitrux brings plenty of innovation and fresh apps to the table.
-
Linux From Scratch 12.0 Now Available
If you're looking to roll your own Linux distribution, the latest version of Linux From Scratch is now available with plenty of updates.
-
Linux Kernel 6.5 Has Been Released
The newest Linux kernel, version 6.5, now includes initial support for two very exciting features.
-
UbuntuDDE 23.04 Now Available
A new version of the UbuntuDDE remix has finally arrived with all the updates from the Deepin desktop and everything that comes with the Ubuntu 23.04 base.
-
Star Labs Reveals a New Surface-Like Linux Tablet
If you've ever wanted a tablet that rivals the MS Surface, you're in luck as Star Labs has created such a device.