Tutorial:Object Follows Mouse

Overview

In this tutorial, you'll be learning how to make an object follow the mouse pointer inside the game's window.

Part 1: Detecting the Mouse
Part 2: The Object Follows
Part 3: The Whole Code

Part 1: Detecting the Mouse

So to start off, you need to prepare your main.lua. Now what we first need to do is to store the mouse's coordinates into two variables representing the x and y coordinate respectively. To do this, we will be using love.mouse.getPosition. For tutorial purposes, we will also be printing the coordinates to the screen so that we can see if the game is constantly updating the values in the variables.

mouse = {}

function love.load()

end

function love.update(dt)
    mouse.x, mouse.y = love.mouse.getPosition()  -- This gets the x and y coordinates of the mouse and assigns those to these respectively.
end

function love.draw()
    love.graphics.setColor(255, 255, 255)
    love.graphics.print("Mouse Coordinates: " .. mouse.x .. ", " .. mouse.y)
end

Note: We're putting the variables in the love.update function so that the game will constantly change the values within the variable. If you just declare it inside love.load and print it, it will always print the first mouse coordinates the game will detect and will never update the variables' values.

You will now have something like this:

Part 2: The Object Follows

Next we make the object follow. To do that, we will first create an object. For tutorial purposes, the object we will be creating is a red circle.

...
circle = {}

function love.load()
    circle.x = 300   -- This will render the circle at 300px to the right along the x-axis.
    circle.y = 300   -- This will render the circle at 300px below along the y-axis.
end

function love.update(dt)
    ...
end

function love.draw()
    -- Please draw the circle above the Mouse Coordinate text.
    love.graphics.setColor(255, 0, 0)                     -- Sets the circle's color to red.
    love.graphics.circle("fill", circle.x, circle.y, 50)  -- Draws a red circle at the given coordinates with a radius of 50.
    ...
end

Now that we have the red circle, we need to make it follow the mouse. To do this, we will be comparing the objects coordinate's to the mouse's current coordinates and if the conditions are met, then the object will move towards the mouse. The basics of character movement applies here. We need to declare the circle's movement speed and we must multiply this speed to the delta time.

...
circle = {}

function love.load()
    ...
    -- Add below the circle's coordinates
    circle.speed = 300  -- The circle's movement speed is 300.
end

function love.update(dt)
    ...
    -- Add below the love.mouse.getPosition()

    -- If the circle is to the left of the mouse:
    if circle.x < mouse.x then
	circle.x = circle.x + (circle.speed * 2.5 * dt)
    end
    
    -- If the circle is to the right of the mouse:
    if circle.x > mouse.x then
	circle.x = circle.x - (circle.speed * 2.5 * dt)
    end

    -- If the circle is above the mouse:
    if circle.y < mouse.y then
	circle.y = circle.y + (circle.speed * 2.5 * dt)
    end

    -- If the circle is below the mouse:
    if circle.y > mouse.y then
	circle.y = circle.y - (circle.speed * 2.5 * dt)
    end
end

function love.draw()
    ...
end

Note: The value of "2.5" there is an optional value. What this does is it increases the speed of the circle when it moves so that we don't have to keep on adjusting the movement speed that we set or so that we don't have to make any intricate operations on the delta time. You can change or remove completely if you want.

Now you have something like this:

Congratulations! You have successfully made an object follow the mouse.

Part 3: The Whole Code

mouse = {}
circle = {}

function love.load()
	circle.x = 300
	circle.y = 300

	circle.speed = 300
end

function love.update(dt)
	mouse.x, mouse.y = love.mouse.getPosition()

	if circle.x < mouse.x then
		circle.x = circle.x + (circle.speed * 2.5 * dt)
	end
	if circle.x > mouse.x then
		circle.x = circle.x - (circle.speed * 2.5 * dt)
	end
	if circle.y < mouse.y then
		circle.y = circle.y + (circle.speed * 2.5 * dt)
	end
	if circle.y > mouse.y then
		circle.y = circle.y - (circle.speed * 2.5 * dt)
	end
end

function love.draw()
	love.graphics.setColor(255, 0, 0)
	love.graphics.circle("fill", circle.x, circle.y, 50)

	love.graphics.setColor(255, 255, 255)
	love.graphics.print("Mouse Coordinates: " .. mouse.x .. ", " .. mouse.y)
end