how to move multiple sprite like sine wave using tween

[dense dragon]

Im making player health UI and Id like to move multiple sprites using tween to move like sine wave. I also wanna make it wave faster if player health is lower. I would appreciate if you could help me how to do it. With my code right now, the sprites doesnt move as expected.

extends CanvasLayer

@onready var player_health_bar01 := $crystal_heart1/Sprite2D as Sprite2D
@onready var player_health_bar02 := $crystal_heart2/Sprite2D as Sprite2D
@onready var player_health_bar03 := $crystal_heart3/Sprite2D as Sprite2D
@onready var player_health_bar04 := $crystal_heart4/Sprite2D as Sprite2D
@onready var player_health_bar05 := $crystal_heart5/Sprite2D as Sprite2D

func test_animation():
    var tween = get_tree().create_tween()
    var sprites = [player_health_bar01, player_health_bar02, player_health_bar03, player_health_bar04, player_health_bar05]
    for sprite in sprites: # sprites should be a list of your sprites
        tween.tween_property(sprite, "position", Vector2.UP * 20, 0.5).set_trans(Tween.TRANS_EXPO).set_ease(Tween.EASE_IN_OUT).as_relative()
        tween.tween_property(sprite, "position", Vector2.DOWN * 20, 1).set_trans(Tween.TRANS_EXPO).set_ease(Tween.EASE_IN_OUT).as_relative()

[gusty osprey]

Create the same tween for each sprite, just start each with a little delay.
1st 0.0 sec delay, 2nd 0.2 sec delay, 3rd 0.4 sec delay, and so on.

Alternatively add a little delay (await) to your for loop so the tweens are created with increased delay for each sprite

[gusty osprey]

I created one just for fun.. I used await in the for loop and also added delay to the start of each tween.

You can also adjust the delay and/or animation duration based on player health.

[dense dragon]

could you teach me how to add delay to start of each tween?

[gusty osprey]

You can add this to your for loop, to create a 0.2 sec delay between each iteration.

await get_tree().create_timer(0.2).timeout

https://www.youtube.com/watch?v=INBQAxFQBbg

[modest rose]

You can of course use the sin function to get a sin wave 😉

@export var sin_angle: float = 0
var frequency = 0.1
var amplitude = 40
var home

func _ready():
    home = global_position

func _process(delta):
    global_position.y = home.y + sin(sin_angle) * amplitude
    sin_angle += frequency

Set each sin_angle to about 0.5 higher than the last one and you'll get your wave.

[dense dragon]

@gusty osprey @modest rose
Thank you very much for the help.
I managed to make it move like wave with tween.
Id like to ask which is better A or B.
I personally think A is better. But same time, I think its weird to have shadow like that since its floating on screen and not on ground.

A

B

[modest rose]

If it were at the bottom of the screen, I'd say A. But if it's at the top, B.