Understanding Love2D | The sibexico databank

Today we will talk about love… I mean, Love2D - the engine for 2D games. Basically, I really love the game engine because it’s fast, simple and will let you make your first game in just a couple of hours! The process of a game creation looks like just programming on Lua, without any heavy overloaded IDE or special tools. Little by little,we will create a prototype for a 2D RPG with point-and-click controls right now! It will even have an animated character and we will do all of this in less than 100 strings of the code on Lua!

What additionally we will need for the project:

Graphic map file. As a map we will use just a static image to show it as a background, nothing else. It can be any PNG or JPEG, in the code example I’m using the file “map.png”.
The character sprite sheet. It’s just an image with frames for animate our character, 4 rows, for each direction of the moving and 3 cols, 3 frames per animation. It should have a transparent background, the frame size in our code example is 32x32 pixels. This is an example of a sprite sheet how we need.

Love2D has VERY good documentation! So please read the very basic manual to skip the part about installation and project running in this article…

So you have these two graphic files? Let’s begin to code. First things first, let’s make variables and constants what we will use in the code.

local lg = love.graphics

local player = {}
local map = {}
local camera = {x = 0, y = 0}

local PLAYER_SPEED = 100
local ANIMATION_SPEED = 0.15
local SPRITE_SIZE = 32

We just initialized our engine which will process the graphics, made arrays for store dynamic parameters (such as character coordinates) and made some constants for store configuration of our game. Next we will make a function to create animation quads from a spritesheet.

local function createQuads(image, frameWidth, frameHeight)
    local quads = {}
    local sheetWidth = image:getWidth()
    local sheetHeight = image:getHeight()
    for y = 0, (sheetHeight / frameHeight) - 1 do
        quads[y + 1] = {}
        for x = 0, (sheetWidth / frameWidth) - 1 do
            quads[y + 1][x + 1] = lg.newQuad(x * frameWidth, y * frameHeight, frameWidth, frameHeight, sheetWidth, sheetHeight)
        end
    end
    return quads
end

Next we will load our graphics, such as map and the player sprites. As well we will place our character to the middle of the screen at the beginning.

 function love.load()
    map.image = lg.newImage("map.png")
    map.width = map.image:getWidth()
    map.height = map.image:getHeight()

    player.image = lg.newImage("char.png")
    player.quads = createQuads(player.image, SPRITE_SIZE, SPRITE_SIZE)

    player.x = lg.getWidth() / 2
    player.y = lg.getHeight() / 2
    player.targetX = player.x
    player.targetY = player.y
    player.isMoving = false
    player.direction = 1
    player.animTimer = 0
    player.currentFrame = 1
 end

Next it will not be so hard, we just need to make some logic to make the character move. It will be a bit of mathematics here, but first you can just copy this to your file, then you will understand it.

 function love.update(dt)
    if player.isMoving then
        local dx = player.targetX - player.x
        local dy = player.targetY - player.y
        local distance = math.sqrt(dx * dx + dy * dy)

        if distance < PLAYER_SPEED * dt then
            player.x = player.targetX
            player.y = player.targetY
            player.isMoving = false
            player.currentFrame = 1 -- Reset to idle frame
        else
            local angle = math.atan2(dy, dx)
            player.x = player.x + math.cos(angle) * PLAYER_SPEED * dt
            player.y = player.y + math.sin(angle) * PLAYER_SPEED * dt

            player.animTimer = player.animTimer + dt
            if player.animTimer > ANIMATION_SPEED then
                player.currentFrame = (player.currentFrame % #player.quads[player.direction]) + 1
                player.animTimer = 0
            end

            if math.abs(dx) > math.abs(dy) then
                if dx > 0 then player.direction = 3 else player.direction = 2 end -- Right or Left
            else
                if dy > 0 then player.direction = 1 else player.direction = 4 end -- Down or Up
            end
        end
    else
        player.currentFrame = 1
    end

    camera.x = player.x - lg.getWidth() / 2
    camera.y = player.y - lg.getHeight() / 2

    camera.x = math.max(0, math.min(camera.x, map.width - lg.getWidth()))
    camera.y = math.max(0, math.min(camera.y, map.height - lg.getHeight()))
 end

Ok, it will move. Now we need a function that will get the coordinates of the point where we have clicked and where the character has to go.

function love.mousepressed(x, y, button)
    if button == 1 then
        player.targetX = x + camera.x
        player.targetY = y + camera.y
        player.isMoving = true
    end
end

We are almost done! Now just drawing everything to show it.

 function love.draw()
    lg.push()
    lg.translate(-camera.x, -camera.y)

    lg.setColor(1, 1, 1)
    lg.draw(map.image, 0, 0)

    local currentQuad = player.quads[player.direction][player.currentFrame]
    lg.draw(player.image, currentQuad, player.x, player.y)

    lg.pop()
 end

As I said at the beginning, you will find all the information about how to run the game depends on your operating system. So please check it if you still don’t. When you launch the game project, you will see a character walking to the clicked point with correct animation. For make additional functions in your new game, again, read the documentation.

If you are interesting in this game engine, I highly recommend you to watch this 11-hours long course at the YouTube from freeCodeCamp. These guys have tons of high quality courses about programming at different languages and related things.