0 votes

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?

in Engine by (204 points)

2 Answers

+2 votes
Best answer

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

by (5,242 points)
selected by

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
+1 vote

Hi,

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

by (281 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.