Tutorial:Object Follows Mouse
Contents
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(1, 1, 1)
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(1, 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(1, 0, 0)
love.graphics.circle("fill", circle.x, circle.y, 50)
love.graphics.setColor(1, 1, 1)
love.graphics.print("Mouse Coordinates: " .. mouse.x .. ", " .. mouse.y)
end