howto, teaching

Getting Started with Lua + LÖVE: Part 2

Dan Cox

Series:

Notes on this guide:

This part is written under the assumption of using  ZeroBrane Studio, an IDE introduced in the previous part. However, and assuming LÖVE is installed on the system, all examples will work when run from within the current working directory of the “main.lua” file using “love ./” to execute on the entire current directory.

Loading, Updating, and Drawing

LÖVE follows the common pattern of using three main functions: load, update, and draw. As seen in the following example, drawing calls are placed in the “draw” section with the initial loading done in the “load” function. Finally, when updating, the “update” block is run. The cycle of functions starts with “load” and progresses to loops of “updating” and finally “drawing” each time.

GitHub Gist Version:

Pre-formatted Version:

function love.load()
end

function love.update()
end

function love.draw()
  love.graphics.print("Hello World!", 400, 300)
end

Global and Local Variables

In Lua, all variables are global unless specifically scoped to local using the “local” keyword or within the encapsulation of a loaded file. In practice, this often means that variable naming becomes important when using functional or object-oriented styles of programming.

To expand the example, let’s create a “player” table and populate some key-value pairs.

GitHub Gist Version:

Pre-formatted Version:

  player = {}
  player.x = 100
  player.y = 100
  player.width = 20
  player.height = 20

With a “player” with coordinates of ‘x’ and ‘y’, the example can be expanded to react to input and then move where the “player” is drawn.

LÖVE has built-in functions for testing if a key is pressed as part of the keyboard structure. To test if a key is “down”, the function love.keyboard.isDown() can be used.

Combining the player key-value pairs with love.keyboard.isDown():

GitHub Gist Version:

Pre-formatted Version:

  if love.keyboard.isDown("up") then
    player.y = player.y - 20
  end
  
  if love.keyboard.isDown("down") then
    player.y = player.y + 20
  end
  
  if love.keyboard.isDown("left") then
    player.x = player.x - 20
  end
  
  if love.keyboard.isDown("right") then
    player.x = player.x + 20
  end

With a “player” and some functions to test if keys are pressed, the last part is an on-screen representation of movement. Using the key-value pair from “player”, a rectangle can be drawn and updated through the pressing of keys.

GitHub Gist Version:

Pre-Formatted Version:

function love.draw()
  love.graphics.rectangle("fill", player.x, player.y, player.width, player.height )
end

Updated Main.lua Example

GitHub Gist Version:

Pre-Formatted Version:

function love.load()
  player = {}
  player.x = 100
  player.y = 100
  player.width = 20
  player.height = 20
end

function love.update()
  
  if love.keyboard.isDown("up") then
    player.y = player.y - 20
  end
  
  if love.keyboard.isDown("down") then
    player.y = player.y + 20
  end
  
  if love.keyboard.isDown("left") then
    player.x = player.x - 20
  end
  
  if love.keyboard.isDown("right") then
    player.x = player.x + 20
  end
  
end

function love.draw()
  love.graphics.rectangle("fill", player.x, player.y, player.width, player.height )
end

Using a global “player” table created in the love.load function, its key-value pairs can be updated (in the love.update function) and then drawn using the (love.draw function).

Screenshot 2018-04-08 22.11.27

With an updated “main.lua” file, run the new version with F5 or clicking on the green “Start” button. LÖVE will create a window with a white square that be controlled using the keyboard arrow keys of “up”, “down”, “left” , and “right”.