Drawing Shapes

Before we build our platformer, let's learn how to draw different shapes. Love2D makes this easy with built-in drawing functions.

The Coordinate System

In Love2D:

(0, 0) is the top-left corner
x increases going right
y increases going down

This is standard for most 2D game frameworks.

Drawing Functions

Rectangles

lua
-- Filled rectangle
love.graphics.rectangle("fill", x, y, width, height)

-- Outlined rectangle
love.graphics.rectangle("line", x, y, width, height)

Circles

lua
-- Filled circle
love.graphics.circle("fill", x, y, radius)

-- Outlined circle
love.graphics.circle("line", x, y, radius)

Lines

lua
love.graphics.line(x1, y1, x2, y2)

Colors

Set colors using RGB values (0 to 1):

lua
love.graphics.setColor(1, 0, 0)     -- Red
love.graphics.setColor(0, 1, 0)     -- Green
love.graphics.setColor(0, 0, 1)     -- Blue
love.graphics.setColor(1, 1, 0)     -- Yellow
love.graphics.setColor(1, 1, 1)     -- White
love.graphics.setColor(0.5, 0.5, 0.5) -- Gray

Let's Draw a Scene

Now let's combine these to draw a simple platformer scene with a player, ground, and sky:

lua
function love.load()
    -- Player properties
    player = {
        x = 50,
        y = 200,
        width = 30,
        height = 40
    }
end

function love.update(dt)
    -- Nothing to update yet
end

function love.draw()
    -- Sky background
    love.graphics.setColor(0.4, 0.7, 1)
    love.graphics.rectangle("fill", 0, 0, 400, 300)

    -- Ground
    love.graphics.setColor(0.4, 0.8, 0.4)
    love.graphics.rectangle("fill", 0, 250, 400, 50)

    -- Player (red rectangle)
    love.graphics.setColor(1, 0.3, 0.3)
    love.graphics.rectangle("fill", player.x, player.y, player.width, player.height)

    -- Player eyes (white circles)
    love.graphics.setColor(1, 1, 1)
    love.graphics.circle("fill", player.x + 10, player.y + 12, 5)
    love.graphics.circle("fill", player.x + 22, player.y + 12, 5)

    -- Player pupils (black circles)
    love.graphics.setColor(0, 0, 0)
    love.graphics.circle("fill", player.x + 12, player.y + 12, 2)
    love.graphics.circle("fill", player.x + 24, player.y + 12, 2)
end

Challenge: Try changing the colors or adding more shapes to the scene!