Interpolate ContainerBox children's position when child changes index

Godot Version

4.2

Question

So I've been attempting to make a turn-based RPG game and one of my goals now is to make a visual turn queue so the player can visualize the order that the characters will act, my objective is to make something really similar to Honkai Star Rail's visual turn queue, but I just can't figure out a way to make a loop work making the nodes inside de containers of the interface interpolate their position so they change their positions between each other smoothly.

I tried used tweens and getting the other nodes’ position/global_position, but returns Vector2(0,0) or the base node of the interface’s position, I also tried using get_global_transform() with get_origin() but it also returns Vector2(0,0).
Can anyone give me at least a hint about how to make this work?

Don’t know, but some ideas:

  1. You can calculate position of children in the box by knowing their index and size.
  2. You could remove the child from the box, and replace it with a sprite2d (say) on top and then animate that to the new position, and then re-add it.

Something like that?

1 Like

Any CanvasItem descendant class has a position variable you can alter directly. What I would recommend is overriding the _process() function on the container that holds the list and make two paths for drawing. If we’re not animating, we queue_render() the list of nodes as it should be, just like godot would. If we’re animating, we instead first cache the positions, modify and lerp the ones that need to move and then queue_render() them. Then at the end of that, however many frames you want, we switch the actual data no the list and go back to normal rendering.

On each list item that moves we override _draw() to make it render at its current position regardless of the GUI layout. I am not 100% sure this step is necessary, but because you’re replacing the position, it might. It also would let you use a different value instead of the actual position to draw, if you ever need to do something fancier.

2 Likes

Thank you sm for your suggestion
So I ended up finding a solution, I ended up using a normal VBoxContainer, starting tweens to change 2 nodes position and then swap their indexes and keep doing this until the top portrait reaches its intended index, I don’t know what happened that when I tried something similar for the first time it wasn’t working because as I said, the position was returning Vector2(0,0), but now it’s working
Video showing result

1 Like