A Löve2D Tutorial — Part 02 Images & Sound

This is the second part of a Löve2D tutorial based on a old (but gold) pygame tutorial. To read part 01, click here.

So, given we are now experts on rectangles, we could now aim higher and try something more bold and realistic … like a image =D

This is the image we will use:

All hail the mighty ball!

-- file: main.lua
local ball_img = nil
function love.load()
  -- load the image once and set it to ball_img
  ball_img = love.graphics.newImage("ball.png")
end
function love.draw()
  -- white background
  love.graphics.setBackgroundColor(1, 1, 1)
  -- draw our image in the position 20x20
  love.graphics.draw(ball_img, 20, 20)
end

Given you have the conf.lua file as before, the snippet above should produce something like this:

Our code this time is quite simple: given ball.png is in the same folder as our main.lua file, we call newImage from within love.load to load the image into ball_img. Inside love.draw, we paint our window background white (to match the image background) and draw the image with love.graphics.draw at the desired position.

This time we do not use nor override love.update because, well, our example is static. As previously discussed, the proper place to load resources like media files is within love.load. If you try to load resources from within a löve callback like love.update or love.draw, which are called in loop, your program will run out of memory and crash.

I Wanna Hear It!

Our image example is cool and all but a little soundtrack would really make a difference here, so, let’s add one!

Please, go to freemusicarchive and download the song “Night Owl”. That is gonna be our sound file.

local ball_img = nil
local music = nil
function love.load()
  -- load the image once and set it to ball_img
  ball_img = love.graphics.newImage("ball.png")
  
  -- mp3, ogg, wave and whatever libmodplug supports
  -- second argument can be stream or static; 
  -- stream reads from disk while static reads from loads and memory;
  music = love.audio.newSource('Night_Owl.mp3', 'stream')
  music:setLooping( true )  -- play on loop
  music:play()  -- play =D
end
function love.draw()
  -- white background
  love.graphics.setBackgroundColor(1, 1, 1)
  -- draw our image in the position 20x20
  love.graphics.draw(ball_img, 20, 20)
end

To add background music to our demo is quite simple: load the sound file, set it to play on loop and “play it”. One thing that might tick your curiosity is the second argument for the newSource function. It actually tells löve how the file should be handled. If the second argument is stream, the file will be readen from disk, which adds some workload to the disk, but saves a lot of memory. If set to static, the compressed audio file will be decompressed and loaded into memory. A small 5mb file can hold up to 50mb in your computer’s memory when decompressed, so, use it with care.

A good use case for static is when you want to play short sounds when a event occours, like a character jump.

It is me, Mario!

In these cases, you would not want the audio to play on loop, so, no need to call setLooping.

Please, leave in the comments your opinion on the second part of this tutorial and subscribe! ; )