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

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Corruptinator
:warning: Old Version Published before Godot 3 was released.

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?

:bust_in_silhouette: Reply From: avencherus

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

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)

Corruptinator | 2016-09-19 01:36

Good to hear, glad it was helpful. X)

avencherus | 2016-09-19 17:32

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 :slight_smile:

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

MaxwellDexter | 2020-03-28 14:57

:bust_in_silhouette: Reply From: ludosar

Hi,

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