Series:
- Getting Started with Lua + LÖVE: Part 1 (Building, Installing, and Testing)
- Getting Started with Lua + LÖVE: Part 2 (Loading, Updating, and Drawing)
- Getting Started with Lua + LÖVE: Part 3 (Basic Physics)
- Getting Started with Lua + LÖVE: Part 4 (Using Images)
- Getting Started with Lua + LÖVE: Part 5 (Object-Oriented)
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function love.load() | |
end | |
function love.update() | |
end | |
function love.draw() | |
love.graphics.print("Hello World!", 400, 300) | |
end |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
player = {} | |
player.x = 100 | |
player.y = 100 | |
player.width = 20 | |
player.height = 20 |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function love.draw() | |
love.graphics.rectangle("fill", player.x, player.y, player.width, player.height ) | |
end |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
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).
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”.