How to Tween the vertices of a Polygon2D

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Halfmania33

Hi everyone,

i’m trying to animate a Polygon2D shape (over 600 vertices) with a tween animation by code.
The polygon2D shape is generated dynamically with GDScript. And everytime i generate a new set of coordinates for its vertices (the next shape), i want the transition between the old and the new shape to be smooth.
So i thought tweening would be the solution to do it dynamically with GDScript. But it seems that doesn’t work.
If i just update the polygon2D with the new set of vertices coordinates, it works perfectly but it’s instantaneous (without transition/animation).
Below, some code i tested with no result :

onready var currentPoly = Polygon2D.new()
var morphingSpeed = 0.5
var morphingSpeed2 = 0.05

func _ready() -> void:
     currentPoly.polygon = dotsPosNew # ->PoolVector2Array 
     currentPoly.antialiased = true
     currentPoly.color = Color.aqua
     add_child(current_poly)

– 1st test –

func _physics_process(delta):
     if Input.is_action_just_released("ui_next_shape"):
          var tween = get_tree().create_tween()
          tween.tween_property(self.currentPoly,"polygon",newPoly.polygon,morphingSpeed) # newPoly.polygon : new PoolVector2Array

– 2nd test –

func _physics_process(delta):
     if Input.is_action_just_released("ui_next_shape"):
          for dot in currentPoly.polygon.size():
               tween.tween_property(self.currentPoly,"polygon[dot]",newPoly.polygon[dot],morphingSpeed)

– “3rd test”

func _physics_process(delta):
     if Input.is_action_just_released("ui_next_shape"):
          for dot in currentPoly.polygon.size():
               currentPoly.polygon[dot] = lerp(currentPoly.polygon[dot], newPoly.polygon[dot], morphingSpeed2)

So i’m wondering if polygon2D can be animated/tweened by code.
I’m completely stuck. If you have a solution, please let me know.
Thanks for your help.

P.S : Sorry, i don’t know why but all underscores and indents disappear when the text is published !

2
:bust_in_silhouette: Reply From: Inces

You say that doesn;t work, but what happens instead ?
Nothing ?
Maybe it is because Tween needs to call start()after interpolation parameters are chosen :slight_smile:
Also, this won’t work if new polygon has different amount of points than old one

Thanks for the reply.

You say that doesn;t work, but what happens instead ?

Nothing happend on screen.

Maybe it is because Tween needs to call start()after interpolation
parameters are chosen :slight_smile:

If i’m not wrong, in Godot documentation and various tutorials, start() is called with tween.interpolate_property().
Here i’m using tween_property(), and it seems the method start() doesn’t exist for it.
For exemple i tried this piece of code :

tween.tween_property(self.current_poly,"position:x",current_poly.position.x+200,morphing_speed)

and it worked perfectly without using start().

Also, this won’t work if new polygon has different amount of points
than old one

The amout of points of the old shape and the new shape is identical.
I even tested on a polygon2d node with a fixed amount of 4 points and tried to update the position of its points:

tween.tween_property($Polygon2D,"polygon",new_polygon_dots,morphing_speed)

Result : same problem. Nothing happened.

Then i tried to tween the global position of this same polygon2D :

tween.tween_property($Polygon2D,"position:x",$Polygon2D.position.x+500,morphing_speed)

Result : it worked correctly !

So maybe it’s the property “polygon” of polygon2D that can’t be tweened ?
I’m at loss because i found nothing in the documentation, Godot Q&A, reddit and youtube.

So if you have another idea please let me know.

Halfmania33 | 2022-09-18 08:56

I see, I didn’t know about this new tween.
It seems it can’t get proper nodepath from there :

..."polygon[dot]"...

Create AnimationPlayer somewhere, add new animation and manually keyframe one polygon point to it, with key icon. This will show new animation track, from there You can read how exactly string Nodepath to polygon point should be syntaxed.

Inces | 2022-09-18 09:42

Thanks.
I did what you wrote, and ended up to find that “polygon” was the only property available for vertices pool.

So as you stated in your last reply, it seems impossible to get proper nodepath to each vertice/point in polygon property in order to modify them.
Maybe the dev team forgot to give access to it from tween_property method.
Or they didn’t want to give the possibility to tween the entire “polygon” as a whole property…

If that’s the case, then that means it’s not possible to animate any property with a tween animation.

Anyway, thank you for your help. Apparently there is no solution with a tween animation, so i’ll try to find another way to do that (i’m open for any idea).
Thanks.

Halfmania33 | 2022-09-18 12:19

oh, sorry to hear that.

I can still propose more of a primitive way to tween this shape :

var steps : int # amount of interpolation steps
var resfreshrate : float 0.01-0.1 #time between each step
for x in range(steps):
      for pt in polygon.size():
            var way = targetpolygon[pt] - polygon[pt]
            polygon[pt] += way.normalized() * (way.length() / steps )
      yield(get_tree().create_timer(refreshrate),"timeout")

I am not sure if direction is positive in var way line. If it is negative, just change places of subtracted values

Inces | 2022-09-18 15:30

I’ll try your solution and tell you if it solves my problem.
Thank you.

Halfmania33 | 2022-09-19 21:23