LÖVE is an unquestionably awesome 2D game framework, which allows rapid game development and prototyping in Lua.

Post tutorial Report article RSS Feed Simple Game Making 1: How Computers Run Your Games

After this short illustrated tutorial, you will be able to start programming games! The excellent Love2D engine is the tool here.

Posted by qubodup on Dec 9th, 2010
Basic Client Side Coding.

How does the computer convert source code to an interactive game? Let's find out!


Games consist of four main parts of code: load, update, draw and events.

Diagram of how a game runs


The load() function is used to open resources (images, sounds..) and give them names (variables).


update() runs after load() or draw() finishes. Calculations about game changes happen there - for example character movement.
dt measures the time it took to update() since the last time there was an update(). On an old computer, dt can be a big number (1 or even more) on a modern computer, it should be very small (at least 0.016 or less).


The draw() function is executed each time update() finishes. It is used for drawing shapes and images.


Events happen when keys or mouse buttons are pressed or released or when the current window loses focus or is being closed by the "X"/"Close" button.


Let's make the keyboard move an image around on the screen!


  1. Download and install love2d (aka LÖVE)
  2. Create a new folder (directory) called "myGame"
  3. Download and move the file unit1.png into "myGame"
  4. Create a new text file (.txt, not a word document!) using TextEdit, Kate, GEdit or Notepad++ (Don't use Notepad!) called main.lua (not Main.lua or main.LUA or mAIn.lUa ;) ).

The file/folder structure should look like this:
darkFlat-dir myGame/
|_ darkFlat-unit1 unit1.png
|_ darkFlat-code main.lua


Write the following into the myGame/main.lua file:

We will create a list for the images, create a unit and 'configure' it and set the background color.

lua code:
function love.load()

img = {

monster = love.graphics.newImage("unit1.png"),


units = {

{ -- this is automatically the first unit in "units" which can be accessed via "units[1]"

pos = { math.random(200,600) ,math.random(200,400) }, -- these are the (random at game start) x/y coordinates of the unit

speed = 100,

moveDir = { 0, 0 }, -- movement direction: {-1,-1} would be 100% left and 100% up, {0,1} would be 100% right. We will add ways to change moveDir later.



love.graphics.setBackgroundColor(244,200,200) -- no bg color, no fun!


On each update(), the unit's new position gets calculated.
The new position depends on dt, otherwise the movement would depend on the update() frequency (and thus on the computer speed).

lua code:
function love.update(dt)

units[1].pos = {units[1].pos[1] + (units[1].moveDir[1] * units[1].speed * dt), units[1].pos[2] + (units[1].moveDir[2] * units[1].speed * dt)}


All we do is draw the unit at its position. Background is re-drawn automatically in the beginning of draw().

lua code:
function love.draw(dt)

love.graphics.draw(img.monster, units[1].pos[1], units[1].pos[2])


Events (love.keypressed() and love.keyreleased())
Axis movement directions are set to 1, 0 or -1, according to what arrow key is pressed.

lua code:
function love.keypressed(key, isrepeat)

if key == "up" then

units[1].moveDir[2] = -1

elseif key == "down" then

units[1].moveDir[2] = 1

elseif key == "right" then

units[1].moveDir[1] = 1

elseif key == "left" then

units[1].moveDir[1] = -1



function love.keyreleased(key, isrepeat)

if key == "up" then

units[1].moveDir[2] = 0

elseif key == "down" then

units[1].moveDir[2] = 0

elseif key == "right" then

units[1].moveDir[1] = 0

elseif key == "left" then

units[1].moveDir[1] = 0



Well that's it! You can just download the code above in this file: main.lua.

Running the game

You can either

  • Drag-and-drop the folder "myGame" onto a LÖVE executable or link or
  • Make a zip file that contains unit1.png and main.lua (it may not contain the directory "myGame" though) and then run it using love2d

This is what you should see:
tutorial ...
This is it! You understand how the load-update-draw-events system works and are prepared to make some simple games! See you in my next tutorial!

Post comment Comments
AirborneSn1p3r Dec 10 2010 says:

great tut, i will have a go at this when i am free after my exams

+2 votes     reply to comment
StoneCrowUK Dec 10 2010 says:

great tutorial :)
any chance of getting another that deals with basic multiobject collision code(outside of box2d).

+2 votes     reply to comment
SEGIII Dec 15 2010 says:

I needed something like this, thanks. :)

+2 votes     reply to comment
Brokenfold Jun 10 2012 says:

How can i change the window resolution? like "1280 x 800"

+2 votes     reply to comment
Guest Jul 22 2013 replied:

you can change the resolution by doing the following:
1.make a file called conf.lua in your game's folder
2. right click... edit with notepad
3. paste the below in
4.save and run game like usual without editing main.lua at all. (:
function love.conf(t)
t.title = "" -- The title of the window the game is in
t.author = "" -- The author of the game (string)
t.url = nil -- The website of the game (string)
t.identity = nil -- The name of the save directory (string)
t.version = "0.8.0" -- The LÖVE version this game was made 4
t.console = false -- Attach a console (boolean, Windows only)
t.release = false -- Enable release mode (boolean)
t.screen.width = 1280 -- The window width (number)
t.screen.height = 800 -- The window height (number)
t.screen.fullscreen = false -- Enable fullscreen (boolean)
t.screen.vsync = true -- Enable vertical sync (boolean)
t.screen.fsaa = 0 -- The number of FSAA-buffers (number)
t.modules.joystick = true -- Enable the joystick module (boolean)
t.modules.audio = true -- Enable the audio module (boolean)
t.modules.keyboard = true -- Enable the keyboard module (boolean)
t.modules.event = true -- Enable the event module (boolean)
t.modules.image = true -- Enable the image module (boolean)
t.modules.graphics = true -- Enable the graphics module (boolean)
t.modules.timer = true -- Enable the timer module (boolean)
t.modules.mouse = true -- Enable the mouse module (boolean)
t.modules.sound = true -- Enable the sound module (boolean)
t.modules.physics = true -- Enable the physics module (boolean)

+2 votes     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Windows, Mac, Linux
Send Message
Official Page
Release Date
Released 2008
Engine Watch
Track this engine
Report Abuse
Report article
Related Engines
LÖVE Zlib Released 2008
Related Groups
LÖVE Developers
LÖVE Developers Developer & Publisher with 5 members