Quick Tip: Smoothly Move an Entity to the Position of the Mouse

Here’s a simple snippet of code that comes in handy all the time: how to move an object from one point to another, in a smooth, flowing, continuous motion. We’ll use the Pythagorean distance and a bit of easing to stop things getting jittery.

Note: Although this tutorial is written using JavaScript, you should be able to use the same techniques and concepts in almost any game development environment.

1. Explanation

In some games you may wish to move a character to the position of the mouse. Sometimes you’ll wish to do this when the player clicks, other times you will want the character constantly moving toward the mouse position and coming to rest once it reaches the same position as the mouse. We will be doing the latter in this tutorial, but adjusting this to work with mouse clicks will be trivial.

2. Distance Formula

To move the entity to the position of the mouse, we first need to know how far away the entity is from the mouse.

To do this we will use the distance formula. This uses Pythagoras’s theorem and is calculated as follows, for coordinates (x1, y1) and (x2, y2):

\[d=\sqrt{(\Delta x)^2+(\Delta y)^2}=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}\]

In other words, you square the difference between the x-coordinates, square the difference between the y-coordinates, add the two squares together, and take the square root of the sum.

To help understand how this works I have created the following image.

In the above image the x-distance is 7 and the y-distance is 6. Working through the steps we arrive at a distance of approximately 9.21.

\[d=\sqrt{(10-3)^2+(3-9)^2}\\
d=\sqrt{(7)^2+(-6)^2}\\
d=\sqrt{49+36}\\
d=\sqrt{85}\\
d\approx9.21\]

2. Code Implementation

To implement this in code we will take the x- and y-coordinates of both our mouse cursor and our entity (which in this case is a spaceship). Then, we will apply the distance formula, and increase or decrease the entity’s x and y positions, as long as the distance is greater than 1.

Below is some code to illustrate this:

function gameLoop(){
   var xDistance = mouseX - ship.x;
   var yDistance = mouseY - ship.y;
   var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
   if (distance > 1) {
       ship.x += xDistance * easingAmount;
       ship.y += yDistance * easingAmount;
   }
}

I have coded up a demo that shows all this in action:

3. What is Easing?

You may have noticed that in the step above we were multiplying the xDistance and yDistance by an easingAmount.

This makes our entity slow down as it approaches its target, rather than moving the same distance on each tick of the game loop. This is known as easing out.

Try adjusting the value of easingAmount in the jsFiddle demo above, and see what effect it has. You could also experiment with the code inside the tick() function.

4. Demo Game

I have coded a very simple demo to show you how this might be applied to a real game. Experiment with the code and see what you can come up with!

(Graphics from Everaldo Coelho, Sneh Roy, and our own Jacob Zinman-Jeanes.)

Conclusion

In this short Quick Tip you learned how to move an entity to the mouse position. See if you can adjust the code so that the entity moves to the last position where the player clicked, rather than continuously following the mouse. I hope you found this useful – thanks for reading!