How do I make an infinitely looping carousel scrollcontainer setup?

Question

I am currently trying to make a carousel setup using the ScrollConatiner node with a VBoxContainer which holds 10 children all spaced out side by side. I want the ScrollContainer to repeat the children behind the first, so it's not just a terminating list of objects within it. I've been searching for a while, but cannot find anything about making a carousel setup in Godot. The purpose of this is to simply make the list of 10 (or more depending on what I add later) to simply be an infinite loop so I can have a set of interactables look more interesting than just a bunch of static un-moving things.
I have never made one in any other language so I haven't the slightest clue as to how to go about this setup.

I originally wanted to do a circular carousel setup, but I think starting with the basic linear looping one might help me get there.
Any help is much appreciated.

Answer 1

Hi,

don't know if you're still looking for a solution but I came here to solve the exact same effect and ended implementing one myself.

So one way of doing it is to (by code) duplicate the first element of your list and add it again so the first and the last elements are the same.
Then, depending if the previous and next element you're chosing in game, you can tween between the last and last+1 element (and vice versa).

In my exemple, it looks like this :

• ScrollContainer
  
  
  • HBboxContainer
    
    
    • Item0
    • Item1
    • etc...
  • Tween

the script is attached to the ScrollContainer

onready var tween = get_node("Tween")
onready var child_count = get_node("HBoxContainer").get_child_count()
onready var img_size = get_node("HBoxContainer").get_child(0).get_texture().get_size()


func _ready():
    # duplicate first character to set him in front and back of carousel to create the effect
    var first_child = get_node("HBoxContainer").get_child(0)
    var new_last_child = first_child.duplicate()
    get_node("HBoxContainer").add_child(new_last_child)

to duplicate the first child.

# scroll te scrollcontainer when choosing an item
func roll(prev = 0, next = 0):
    var prev_pos
    var next_pos
    prev_pos = prev*img_size.x
    next_pos = next*img_size.x
    if prev == child_count-1 and next == 0:
        next_pos = (prev+1)*img_size.x
    elif prev == 0 and next == child_count-1:
        prev_pos = (next+1)*img_size.x
    tween.interpolate_property(self, "scroll_horizontal",
        prev_pos, next_pos, 0.1,
        Tween.TRANS_SINE, Tween.EASE_IN_OUT)
    tween.start()

if you want a VBoxContainer ans a vertical scroll effect, use the "y" value of imgsize and interpolate the "scrollverticall" in your tween.

have a nice day