Custom Cursors in Love2D

When making a game in LÖVE, you'll probably end up needing to customise the mouse cursor. As I recently had to do just that, I thought I'd make a quick tutorial on it. If you want an example cursor, here's the crosshair I'm using in a game right now.

Now, all of what we need is contained within the love.mouse module. The first step is to hide the mouse with love.mouse.setVisible. You'll probably want to do this in love.load:

function love.load()
  love.mouse.setVisible(false)
  love.mouse.setGrab(true)
end

It's probably a good idea to confine the mouse cursor to the window via love.mouse.setGrab, as we have here.

Now all you need to do is draw an image at the position of the mouse every frame:

function love.draw()
  love.graphics.draw(cursorImage, love.mouse.getX(), love.mouse.getY())
end

So, for a complete example:

function love.load()
  cursor = love.graphics.newImage("crosshair.png")
  love.mouse.setVisible(false)
  love.mouse.setGrab(true)
end

function love.draw()
  love.graphics.draw(cursor, love.mouse.getX() - cursor:getWidth() / 2, love.mouse.getY() - cursor:getHeight() / 2)
end

You might be wondering why I've subtracted half the image's width/height from the coordinates. In this case it's because when using something like a crosshair, the centre, not the top-left, of the cursor image should indicate the exact point where the mouse is. Note that if you want to replicate a normal cursor (such as the default one provided by your operating system) you'll need to draw the image from the top-left, as we saw in the first love.draw example.

Well, that's it for now. I hope this tutorial's been useful to you.