Introduction to Löve

Binary Cocoa has been doing game development for a while, and quite often we are asked what engine we use and why we use it.  This post will answer that question as well as give you, the reader, a starting point in doing your own game development.

Löve (www.love2d.org)  is “an *awesome* framework you can use to make 2D games in Lua.” It is fully cross-platform with it running perfectly under Windows, Linux, and Mac.  Support is also available for Android and iOS.  The engine is also licensed permissively, meaning you have full access to the source, and you can use the engine commercially. This makes it very well suited for learning and for production work.  Additionally, the engine is free.  That being said, if you find it useful, you should consider going to their website, scrolling down to the bottom, and following one of their donation links.  It’s a good cause, and it helps make the engine better for everyone.  Seriously, go do that.

Programs in Löve consist of three primary callback functions:

• love.load() – Fired off when the game starts.  Useful for setting various parameters to be used later in the game.
• love.update(dt) – Fired off before each frame is drawn.  Useful for updating player positions, calculating when things happen, etc.
• love.draw() – Fired off to draw each frame. It’s use should be pretty obvious to you.

The following diagram should help you visualize how it works:

You probably noticed that all three functions were prefixed with love.  Everything made available via the framework is prefixed by love.  You can see a full listing of what’s available in the wiki. During this introduction, we’re going to make a simple program that lets the human control a circle that moves about the screen.  If you aren’t familiar with Lua, don’t worry, and feel free to ask questions in the comments.  We’ll try to keep things simple and straight forward.

function love.load()
   player = {}
   player.y = 0
   player.x = 0
end

What the above code does is quite simple.  It is making an empty table called “player,” and then it is initializing y and x inside of that table to both be 0.  We will be working with those later.  If we wanted the player to start out in the center of our window, we could simply change the x and y value.  We’ll be clever and use some of the love functions to make the program smart about where the center is.  Consider the following code.

function love.load()
   player = {}
   player.y = love.window.getHeight()/2
   player.x = love.window.getWidth()/2
end

That code will dynamically set the player’s x and y coordinates to the center of the window.  Because that is in our love.load function, it will only happen at the very beginning of when the program runs, unless we manually call it later, but I seriously doubt we’ll be doing that.  Now let’s move onto the next function.

function love.update(dt)
   if love.keyboard.isDown('down') then
      player.y = player.y + 100*dt
   elseif love.keyboard.isdown('up') then
      player.y = player.y - 100*dt
   end
end

This function gets called before drawing anything.  It also receives an argument called “dt”, but more about that later.  What’s important to keep in mind right now is that this function is called every frame and should be used for logic and control of the game.  If you take a look at the above code, you’ll see that we’re checking if some keys are down on the keyboard.  Specifically, we are looking for down or up.  If down is being pressed, then we are increasing the player’s Y coordinate by 100 pixels per second.  We are doing the opposite if the player is pushing up.  The only thing you might not understand right now is what ‘dt’ is doing there.  Delta time (dt) can be considered the great normalizer.  It is what we use to make sure the game is consistent regardless of how fast the player’s computer is.  By multiplying the speed of the player (in this case, 100) by dt, we are in effect ensuring that it moves that speed per second. Pretty cool huh?  Now let’s move on to actually drawing our player.

function love.draw()
   love.graphics.circle('fill', player.x, player.y, 30)
end

The only thing new there is the love.graphics.circle function.  It should be pretty obvious what it does though.  Notice that we’re not dealing with player motion in love.draw(), we are only dealing with drawing the player.  Now, if you take all 3 of those functions, put them into main.lua, and run the folder with Löve, you should have a circle that you can move up and down.  Once you have that working, I encourage you to add left and right, and maybe even start working on placing some constraints.  (Hint, you would need to start checking if p.y < something).  Either way, have fun, ask question, and remember – it takes time to learn this, but it’s very rewarding.