Moving an object to a position smoothly in a 2D world

Question

Hello!

After analyzing one of the project demos: "Look at Pointer" I wanted to figure out how to move a 2D object to an another position smoothly, similar to how the pointers rotates to where the mouse is.

I've tried various ways to get it work, even after analyzing the code, but it resulted in very weird positioning/non-moving results.

So can anybody explain how moving smoothly through the x and y axis works?

Answer 1

It's a form of easing.

Say that you want an object to travel to a destination 100 pixels from where it is at.

What you can do for example is have that object travel 60% of the distance remaining, and repeat that process until it is super close. This will create the visual effect of it slowing down on approach.

The calculations are something as follows: At position 0, going to 100, that's (100 - 0) * .6 = 60. Your new position is 0 (current) + 60 = 60. This calculation happens again, 60 to 100 is 40. This gap of 40 is multiplied by .6 as well, to give you another step of 24. 60 + 24 = 84.

You will continue to edge closer and closer to the end goal. At some point when the pixel movement is below a single pixel, it's best to stop and just set the final distance.

A video I would recommend watching is: https://www.youtube.com/watch?v=zLh0K1PdUbc

Comments

Thanks for the feedback, and based on the youtube link you've shown me I was able to get the right code to work, in case anybody is curious:

const SMOOTH_SPEED = 2
var repos = Vector2()
var repos_velo = Vector2()
var position = Vector2()

func _process(delta):


    var mpos = get_viewport().get_mouse_pos()#.get_mouse_pos()
    var destination = get_pos()

    repos.x = mpos.x - destination.x
    repos.y = mpos.y - destination.y
    repos_velo.x = repos.x * SMOOTH_SPEED * delta
    repos_velo.y = repos.y * SMOOTH_SPEED * delta

    position.x += repos_velo.x
    position.y += repos_velo.y

    move(repos_velo)

---

Good to hear, glad it was helpful. X)

---

I know it's an old question but the video and your code helped me a bunch!
I've also simplified the code a bit. You can just use vector maths instead of the x and y :)

extends Sprite # you can use anything that extends Node2D probably

const SMOOTH_SPEED = 2
var position_difference = Vector2()
var smoothed_velocity = Vector2()

func _process(delta):
    var destination = get_global_mouse_position()

    position_difference = destination - position
    smoothed_velocity = position_difference * SMOOTH_SPEED * delta

    position += smoothed_velocity

Answer 2

Hi,

the easiest way to achieve the smooth effect is by using a tween node. Look at the tween demo (in misc).