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
Direct Download
Read full article as PDF:
Price $2.95
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Find SysAdmin Jobs
News
-
OpenMandriva Lx 23.03 Rolling Release is Now Available
OpenMandriva "ROME" is the latest point update for the rolling release Linux distribution and offers the latest updates for a number of important applications and tools.
-
CarbonOS: A New Linux Distro with a Focus on User Experience
CarbonOS is a brand new, built-from-scratch Linux distribution that uses the Gnome desktop and has a special feature that makes it appealing to all types of users.
-
Kubuntu Focus Announces XE Gen 2 Linux Laptop
Another Kubuntu-based laptop has arrived to be your next ultra-portable powerhouse with a Linux heart.
-
MNT Seeks Financial Backing for New Seven-Inch Linux Laptop
MNT Pocket Reform is a tiny laptop that is modular, upgradable, recyclable, reusable, and ships with Debian Linux.
-
Ubuntu Flatpak Remix Adds Flatpak Support Preinstalled
If you're looking for a version of Ubuntu that includes Flatpak support out of the box, there's one clear option.
-
Gnome 44 Release Candidate Now Available
The Gnome 44 release candidate has officially arrived and adds a few changes into the mix.
-
Flathub Vying to Become the Standard Linux App Store
If the Flathub team has any say in the matter, their product will become the default tool for installing Linux apps in 2023.
-
Debian 12 to Ship with KDE Plasma 5.27
The Debian development team has shifted to the latest version of KDE for their testing branch.
-
Planet Computers Launches ARM-based Linux Desktop PCs
The firm that originally released a line of mobile keyboards has taken a different direction and has developed a new line of out-of-the-box mini Linux desktop computers.
-
Ubuntu No Longer Shipping with Flatpak
In a move that probably won’t come as a shock to many, Ubuntu and all of its official spins will no longer ship with Flatpak installed.