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
-
LibreOffice 7.5 has Arrived and is Loaded with New Features and Improvements
The favorite office suite of the Linux community has a new release that includes some visual refreshing and new features across all modules.
-
The Next Major Release of Elementary OS Has Arrived
It's been over a year since the developers of elementary OS released version 6.1 (Jólnir) but they've finally made their latest release (Horus) available with a renewed focus on the user.
-
KDE Plasma 5.27 Beta Is Ready for Testing
The latest beta iteration of the KDE Plasma desktop is now available and includes some important additions and fixes.
-
Netrunner OS 23 Is Now Available
The latest version of this Linux distribution is now based on Debian Bullseye and is ready for installation and finally hits the KDE 5.20 branch of the desktop.
-
New Linux Distribution Built for Gamers
With a Gnome desktop that offers different layouts and a custom kernel, PikaOS is a great option for gamers of all types.
-
System76 Beefs Up Popular Pangolin Laptop
The darling of open-source-powered laptops and desktops will soon drop a new AMD Ryzen 7-powered version of their popular Pangolin laptop.
-
Nobara Project Is a Modified Version of Fedora with User-Friendly Fixes
If you're looking for a version of Fedora that includes third-party and proprietary packages, look no further than the Nobara Project.
-
Gnome 44 Now Has a Release Date
Gnome 44 will be officially released on March 22, 2023.
-
Nitrux 2.6 Available with Kernel 6.1 and a Major Change
The developers of Nitrux have officially released version 2.6 of their Linux distribution with plenty of new features to excite users.
-
Vanilla OS Initial Release Is Now Available
A stock GNOME experience with on-demand immutability finally sees its first production release.